如何部署vue+nodejs+mongodb应用
前言
Vue框架是全栈开发最流行的框架之一，其特点为：数据层与显示层分离，网站内容可以分component进行开发，开发相对来说简单，可以使用的npm包比较多，可以使用axios或vue-router访问后端API，使用javascript可以和后端交互等。Nodejs为javascript后端开发提供了非常大的支持，与vue可以相对完美的进行结合。今天我们在开发出Vue+Nodejs+Mongodb产品后，如何对该APP进行部署，部署云平台的操作系统为centos。
MongoDB部署
这三部分中部署最为简单的就是MongoDB了。
首先我们需要通过ssh指令进入远程的云平台
ssh root@myserverIP
将myserverIP改为云平台的公网IP。然后输入密码或ssh公钥验证。
然后我们需要进入yum.repos.d文件夹建立新的repo文件。
cd /etc/yum.repos.d/
vim mongodb-org-3.2.repo
然后将下面的配置内容粘贴到vim编辑器中
[mongodb-org-3.2]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.2/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.2.asc
用:wq指令保存并推出该文件。
接下来我们下载mongodb。
首先检查mongodb库文件在列表中是正常的。
使用指令
yum repolist
该指令运行后会出现一个列表，MongoDB库文件会在列表之中。
然后运行yum的下载指令
yum -y install mongodb-org
当下载完成后，我们使用systemctl运行mongodb
systemctl start mongod
运行后，mongodb会占用端口27017，因此我们通过检查端口，判断该应用是否在运行。
netstat -plntu
不仅如此我们也可以使用另一个systemctl指令来判断mongodb是否运行正常
systemctl status mongod
如果正常结果将会是如下
这样就说明运行正常了。
mongo shell和数据导入的内容我就不赘述了，可以参见我的另一篇文章。
以上mongodb部署就完毕了。
Nodejs部署
nodejs部署相对简单，我们首先需要把nodejs应用传到服务器上，可以使用scp进行复制，也可以使用github进行。
通过github转移到服务器上就是简单的使用以下指令
git init
git add * && git commmit -m "first commit"
git remote add origin myGitAddress
git push origin master
git clone myGitAddress
由于git在传输的时候把node_module文件给忽略掉了，以保证传输的速度。我们在下载这个应用文件夹之后，通过运行一下指令，重新下载应用中将要用到的node module
npm install
然后我们使用node运行入口文件进行测试该后端app能否正常运行
node index.js
如果入口文件是main或者app，就将index改为该文件名。
如果在package.json中设置过script，也可以运行一下指令启动服务器
npm start
如果运行结果显示正在监听某个端口，并且连接到mongodb，那么说明该node应用可以正常运行。
看到成功信息后，我们结束node应用。
下载pm2
PM2是非常简单的node部署软件，可以帮助我们在后台运行node应用，同时也方便我们管理。
npm install -g pm2
下载完该工具后，我们可以使用pm2运行我们的入口文件
pm2 start index.js
该指令会把我们的应用加入到pm2进程列表中。这里指令的输出为
[PM2] Spawning PM2 daemon
[PM2] PM2 Successfully daemonized
[PM2] Starting index.js in fork_mode (1 instance)
[PM2] Done.
┌──────────┬────┬──────┬──────┬────────┬─────────┬────────┬─────────────┬──────────┐
│ App name │ id │ mode │ pid │ status │ restart │ uptime │ memory │ watching │
├──────────┼────┼──────┼──────┼────────┼─────────┼────────┼─────────────┼──────────┤
│ index │ 0 │ fork │ 3524 │ online │ 0 │ 0s │ 21.566 MB │ disabled │
└──────────┴────┴──────┴──────┴────────┴─────────┴────────┴─────────────┴──────────┘
Use `pm2 show ` to get more details about an app
这样就说明我们的node应用已经正常运行了。
node应用运行也会占用端口，因此我们也可以使用netstat指令查看端口情况，以确定应用是否工作正常。
Vuejs部署
vuejs的部署会涉及到部分apache的知识，因此不了解的朋友可以先了解一下apache的相关内容，再进行自己前端应用的部署。同样，该网站部分的部署也可以通过nginx进行部署，如果感兴趣可以查阅nginx相关资料，这里仅对apache服务器部署进行简要说明。
首先我们需要下载apache，使用如下指令
sudo yum install httpd
接下来我们可以按照需求修改httpd配置文件httpd.conf。
然后使用以下指令运行httpd。
sudo systemctl enable httpd.service
sudo systemctl restart httpd.service
标准的apache文件的入口在/var/www/html/index.html处。因此我们需要把build之后的文件转移到/var/www/html/文件夹中。
回到我们的Vuejs文件中，使用默认的组建指令
npm run build
该指令会生成一个dist/文件夹，相当于把所有的源代码编译转移到了dist文件夹中的build.js文件中。dist/文件夹中还包括以些本地的文件、图像等。
build之后，我们把vue根目录的index.html文件和dist/文件夹转移到/var/www/html/文件夹中即可。
总结
至此，Vuejs+Nodejs+MongoDB的应用就完全部署完毕了。可以通过netstat指令查看nodejs和mongodb是否正常运行，然后通过外部访问该云平台的80端口，查看Vuejs应用是否正常运行。
这3部分的部署最好按照顺序进行，应为nodejs依赖于mongodb的数据库连接，vuejs应用又依赖于nodejs所提供的后端API。因此这个部署顺序最好不要改变。
如果有问题欢迎在下方留言。BEST