部署vue项目、安装mongodb

一、node运行环境

1、npm install -g n  

通过npm 全局安装node

2、 sudo n 8160 

设置node版本

Password:

install : node-v8160

mkdir : /usr/local/n/versions/node/8160

fetch : >小鸟云服务器niaoyun实例创建好之后，您可以使用以下任意一种方式登录服务器：
远程桌面连接(MicrosoftTerminalServicesClient,MSTSC)：采用这种方式登录，请确保实例能访问公网。如果在创建实例时没有购买带宽，则不能使用远程桌面连接。
管理终端VNC：无论您在创建实例时是否购买了带宽，只要您本地有网页浏览器，都可以通过管理控制台的管理终端登录实例。
使用远程桌面连接(MSTSC)登录实例
打开开始菜单>远程桌面连接，或在开始菜单>搜索中输入mstsc。也可以使用快捷键Win+R来启动运行窗口，输入mstsc后回车启动远程桌面连接。
在远程桌面连接对话框中，输入实例的公网IP地址。单击显示选项。
输入用户名，如小鸟云默认为niaoyun。单击允许我保存凭据，然后单击连接。这样以后登录就不需要手动输入密码了。

后端用的drf，使用的是uwsgi+nginx

进入服务器项目文件目录下，我的django项目放在了“/usr/myProjects/”目录下了。在managepy同级目录下创建uwsgiini文件，配置如下：

测试效果命令：

如果访问：xxxxxxxxxxx:8000 成功， 则uwsgiini配置成功

我的nginxconf所在位置是“/etc/nginx/nginxconf”
配置文件如下：

1、第一行

主要就是给nginx加权限，vue部署后使用history路由时会去掉地址后面的‘#’号，打包部署后不加权限会有bug。
2、如配置所示，有两个Server，分别部署了前端服务，和后端服务，值得注意的是两个Server用的是同一个服务器，监听的端口不同。
3、vue部署需要注意的是反向代理地址：

以及后面的端口问题

4、后端的Server需要注意location中的uwsgi_pass 后面的端口号要和uwsgiini中配的相同，否则监听不到

5、后端跨域问题。如果遇到跨域需要自己网上找配置，我的没遇到，可能是因为我在django的settings中配置了跨域。
6、django-suit后台管理样式崩了，需要改，但是api可以正常访问，这个有空再说
7、我开始后台监听的是8008端口，vue前端监听的是80端口，这样前端显示好看。然而问题出现了，虽然后台api可以正常访问，vue的本地开发环境也能正常运行且文字、资源均显示正常，但是前端vue打包线上部署后，文字信息显示正常，信息缺失8008端口，导致显示不出来。为图方便我选择了前端监听8008端口，后端监听80，部署后显示正常。原因不太清楚///////有空再说吧。
8、不要问我为啥都前后端分离了还部署到一个服务器上？穷，而且只是测试，没必要
9、此文仅适合入门

关于django后台admin（suit）缺失的修改（参考：django中文网： >简述：Spring boot+Vue 前后端分离项目部署，主要采用docker容器部署方式。

Springboot项目部署：docker构建mysql环境+docker构建项目自身环境。

Vue项目：使用docker启动nginx服务器方式代理部署。

项目使用mysql80作为数据源，所以部署时需要使用docker构建mysql环境及项目自身环境。

连接出现1251错误时：

首先将项目进行打包：mumu-001-SNAPSHOTjar

到此，springboot项目采用docker方式运行部署结束。

使用docker容器方式运行nginx服务器。

对于nginx服务器，重要的两个 *** 作是：

所以我们在配置启动nginx容器的时候，需要将对应的目录及文件进行宿主机挂载，方便后续更新资源及 *** 作

启动命令：

看了下网上的解释，一般都是将介绍vuejs的文本与node js的文本 贴过来， 再解释说 前者是前端开发框架，后者是js的运行环境，可以以js开发后台服务器。似乎没有说到点子上。

我的理解是

1 nodejs是一个很强大的js 运行环境，类似于jvm之于java。因此对js的支持非常好，催生了基于js的一系列应用开发。源于各js的应用的成长壮大，继而催生出了 npm

2 NPM是基于node js环境的一个包管理器。试问 为什么单纯的 jsp/php里面没有NPM？因为没有一个类似于nodejs的强大的js运行环境的支撑。由于nodejs 催生了js的兴盛，又进而催生出NPM来打包管理这些基于js的应用

3 随着前端开发的网页元素不断丰富和复杂化，催生出webpack 来进一步规划js应用的打包部署。前端目标页面资源，通过webpack来打包压缩出来。

4 可以看出vuejs 就是遵循的webpack 的方式来部署的，我们使用npm run build之后，会生成一个目标dist文件。这即是目标静态web资源，放在nginx下面即可通过网页访问。

综上所述，vuejs 是通过 webpack来打包，而webpack 又基于 npm, npm需要nodejs环境。这就是为什么vuejs 还需要安装nodejs环境。

将目标dist文件夹拷贝到一台未安装nodejs的 nginx服务器上，访问页面可以正常响应逻辑。这时跟nodejs没有任何关系，服务器又不是nodejs在担当，而是nginx。如果你用nodejs来部署服务器，则需要在目标机上安装nodejs

简单的说：你既可以开发nodejs的服务程序，亦可以用基于nodejs的npm && webpack来打包 目标前端页面。vuejs 使用webpack来打包，故而需要nodejs环境。

你现在的这个情况是通过vue打包后，build之后的产物。

先不多说，直接说方法，最后再解释。

想运行在tomcat上，先在打包之前做一下配置：

首先在config文件夹下找到indexjs修改一下当前路径

把assetsPublicPath：‘/’改成assetsPublicPath：‘/‘

对就是/前面加个点儿。

然后重新打包。就可以直接打开了。

======================================

为什么这样做呢，因为vue的打包默认形成的是一个部署在服务器环境上的文件，如果是部署在静态站点上（express或者阿帕奇），就需要做路径转变。其实算是个小tip。

欢迎追问。

---