保姆级__项目部署(Vue2 Koa2 mongoDB)

项目部署

本文涉及项目所用的技术栈
前端：Vue2.0
后端： NodeJS Koa2
数据： MongoDB

---

---

前言

本文主要是 项目的部署进行一个总结，前端(vue)+后端(node)，数据库采用了MongoDB；
本文默认，您已拥有至少一台服务器的情况，所以对服务器的选择购买等操作不做过多描述

---

1、准备连接服务的工具

点击finalshell下载

2、连接服务器

选择SSH连接

1.1 购买服务器

此部分就默认 大家已拥有，所以就不再赘述。

1.2 服务器软件安装

当前使用服务器操作系统是CentOS8.2；如果想要确保项目成功部署，请确保当前系统是一个干净的全新的操作系统，否则建议重装系统再试

1.2.1 Nginx

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
负载均衡、反向代理

安装nginx

yum install -y nginx

设置开机启动

systemctl start nginx.service
systemctl enable nginx.service

浏览器打开此地址查看效果


无法访问的原因是：nginx默认使用端口 80，我们当前服务器实例没有开启80端口,所以我们需要到云服务商这边 开放80端口就ok了

这里使用腾讯云服务器，进行一个简单的演示，其他云服务器可做参考

列表出现 80端口表示添加成功

然后重新访问我们的服务器地址，出现下面 nginx欢迎页 表示nginx开启成功

1.2.2 nodeJS

使用nvm安装多版本的node

NVM（Node Version Manager）是Node.js的版本管理软件，使您可以轻松在Node.js各个版本间进行切换。适用于长期做 node 开发的人员或有快速更新node版本、快速切换node版本的场景。

我们现在仅进行一个的部署体验，所以不使用NVM进行安装，大家如果有兴趣，可以私下进行拓展

直接安装nodeJS

查看我们进行开发时，本地使用的node版本

GitHub仓库地址：https://github.com/nodesource/distributions

yum install -y nodejs

查看使用安装成功

node -v

如果需要安装一些全局依赖，像yarn，nodemon，pm2

npm install -g yarn pm2 nodemon

1.2.3 MongoDB

1) 安装mongodb

进入文件夹/usr/local,下载mongodb源代码：

cd /usr/local

下载文件

wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.9.tgz

解压文件

tar zxvf mongodb-linux-x86_64-4.0.9.tgz

删除已下载的安装包

rm -rf mongodb-linux-x86_64-4.0.9.tgz

重命名文件夹为mongodb

mv mongodb-linux-x86_64-4.0.9 mongodb

在var文件夹里建立mongodb文件夹，并分别建立文件夹data用于存放数据，logs用于存放日志

cd /var
mkdir mongodb
cd mongodb
mkdir data logs

设置mongodb 开机启动

cd /etc/rc.d
vi rc.local

将mongodb启动命令追加到本文件中，让mongodb开机自启动：

/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

如果对Linux系统的vim输入模式 不熟悉的话，通过finalshell工具打开该文件，修改保存上传也是可以的

启动mongoDB

cd /usr/local/mongodb/bin

./mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

测试mongodb

cd /usr/local/mongodb/bin
./mongo

2) 导入数据

将本地导出的数据上传到 远程服务器

cd /usr/local
mkdir data

cd data

将服务器数据导入数据库
服务器上json文件的路径

• /usr/local/data/articles.json
• /usr/local/data/fans.json
• /usr/local/data/users.json
• /usr/local/data/comments.json

cd /usr/local/mongodb/bin

注：下面命令不可直接复制使用！注意修改 dbname collectionname 为自己项目对应的数据库名与集合名

./mongoimport --db dbname --collection collectionname --file url

测试数据库

./mongo

3 部署前端项目(vue)

3.1 修改项目配置

3.2打包项目

npm run build

3.3上传项目

html下原有文件 可删可不删；
然后将本地打包好的项目上传到 该文件夹即可；

最后浏览器访问 该文件夹即可 http://81.70.9.18/dist

打开开发者模式，可以发现本地的接口全部都访问不到，是因为在开发时使用的是 代理服务器，项目上线时，反向代理就失效（vue.config.js中的devServer配置失效），可以使用nginx实现项目上线的反向代理---------接口上线

4 部署后端项目(node + Koa2)

新建server 文件夹 用于存放后端项目，也可在dist下新建

cd server 
npm i

启动项目

npm run prd

修改nginx 配置信息

cd /etc/nginx
vi nginx.conf (还可用可视化)

为了方便，这里我们采用可视化进行操作

注： 上图中 反向代理部分稍有错误， 需要将 /api/ 修改为 /api

lcoation /api {
		proxy_pass http://localhost:3000;
}

重启nginx 服务

/sbin/nginx -s reload

此时访问浏览器，发现接口通了，项目可以正常运行了。

域名部分未进行描述，有兴趣的大家可以私下了解一下…