一次前后端分离项目部署实践

警报：本文纯新手向，大牛请出门右转，或者轻喷 😄

前一阵子在阿里云上弄来了一个月的轻量应用服务器，尴尬的是，好不容易把备案搞完，服务器这会又到期了。。。于是这次买了一个学生版一年的 ECS ，在经过相同的配置工作后，终于可以开始真正进行项目部署了。

待部署项目介绍

简单说来待部署的项目就是一个 todolist ，项目内容和逻辑很简单，但是因为是我的第一个前后端独立完成的项目，所以开发起来还是有点费劲的，项目前端采用的是 Vue + Element 框架，后端采用的 Koa2，数据库使用的是 mongodb，可以说是对前端学习者来说相对友好的技术栈了。

附上项目仓库 vue-koa-demo（喜欢就去点个 star 哈哈哈）

关于跨域

在项目开发过程时，前端运行在 localhost:8080，后端运行在 localhost:5858 ，这就存在跨域问题，一般来说跨域有两种解决方案，一个是在服务器端加上跨域资源共享（CORS）的请求头，另一个就是通过 webpack-dev-server 提供的代理来帮我们做映射，这样就可以把跨域请求映射为同域请求了。在项目中我采用的是第二种方案，因为这种方案非常简单，只需要对 webpack-dev-server 的配置进行几行改动即可完成目标（但是开发时发现这个方法有的时候会不太稳定 -_-||）。

proxyTable

这段代码的意思就是把 axios 原来的请求相对路径 http://localhost:8080/api 映射到服务器端的 http://localhost:5858

部署方案

由于我们是采用的 webpack-dev-server 配置的方式解决的跨域问题，但是在生产环境下就没有 webpack 为我们做这一层映射了，所以在生产环境中，我们需要用 Koa 来托管由 webpack 打包出来的静态资源，这样前端 axios 请求的相对路径就和服务器是同域的了，不存在跨域的问题了。

托管静态文件，可以使用 koa-static 完成，其中 public 中的内容就是 webpack 打包出来的 dist 文件夹下的内容。

// app.js
app.use(require('koa-static')(path.join(__dirname, 'public')))

服务器端部署环境

接下来就要弄一下服务器端的部署环境了，在之前的博客里，已经把 Node 环境配置完成了，接下来就要安装一下一些必要的工具了，完成部署环境了（额这次并没有用到 Docker 什么的，因为是第一次试探性地，以后可以详细学习一下）。

mongodb 数据库的安装与简单配置

关于 CentOS 下数据库的安装，参考官网流程就行了，我感觉说的很详细了，安装的时候也没啥坑。

安装成功后，启动数据库 sudo service mongod start ，默认情况下 mongodb 是不需要输入用户名密码的，所以在终端下，连接数据库 mongo ，连接成功后，我们就需要建立一些用户角色了

1.建立一个用于账号管理的用户

use admin                // 切换到 admin 数据库
db.createUser({        // 创建一个用户
    user: 'yourUserName',        // 管理员用户名
    pwd: 'yourPassWord',        // 密码
    roles: [
        {
            role: 'userAdminAnyDatabase',    // 用户角色，允许所有数据库的 userAdmin 权限，可管理所有数据库的管理用户
            db: 'admin'            // 指定数据库
        }
    ]
})
db.auth('yourUserName', 'yourPassWord')    // 用户验证，返回 1 说明验证成功

2.建立一个用于项目数据库管理的用户

use vue_koa_todos        // 切换到项目数据库
db.createUser({
    user: 'yourProjectUserName',    // 数据库管理员用户名
    pwd: 'yourProjectPassWord',        // 密码
    roles: [
        {
            role: 'readWrite',        // 用户角色，允许读写指定数据库
            db: 'vue_koa_todos'        // 指定数据库
        }
    ]
})
db.auth('yourProjectUserName', 'yourProjectPassWord')    // 用户验证，返回 1 说明验证成功

建议把这些账号密码都存起来，省着忘了。。。

建立账号之后还没完，需要更改一下配置文件，默认情况下，配置文件在 /etc/mongod.conf ，之后在 vi 编辑器下修改配置文件，找到这两行，改成如下所示，保存并退出后，重启一下数据库 sudo service mongod restart，数据库的验证就开启了，这时候如果要查看或者操作数据库，就需要输入用户名和密码了。

security:
    authorization: 'enabled'

1.在登录数据库的时候，需要先指定数据库名比如 use vue_koa_todos ，再进行 db.auth 验证
2.用 admin 下建立的那个用户是登不上 vue_koa_todos 数据库的，别看它的角色是 anydatabase ，它只能操作数据库的用户管理部分

安装一些其他的工具（本地和服务器端都需要安装）

git : yum install -y git

pm2: npm install pm2 -g

这里服务器端需要配置一下对 github 的 ssh 秘钥，便于部署后自动拉取代码

对本地代码进行调整

1.部署前需要把之前连接本地数据库的代码改一下

// server/routes/index.js
// 本地开发的时候，数据库链接是直接连的
mongoose.connect('mongodb://127.0.0.1:27017/vue_koa_todos')

// 上线后因为有用户名和密码，所以要改动一下
mongoose.connect('mongodb://username:userpwd@127.0.0.1:27017/vue_koa_todos')

数据库连接格式：

mongodb://用户名:密码@服务器主机地址:mongodb运行端口/要连接的数据库名称

2.项目 package.json 文件中的 git 字段要和 github 中的 git 地址关联上

到这里我们的环境已经基本搞定了，接下来就是部署了。

利用 pm2 进行一键部署

打开终端进入项目根路径，执行 pm2 init 会得到一份 ecosystem.config.js 这里就是我们的部署配置文件了，需要做一些改动

pm2

post-deploy 中是发布后执行的一些命令，主要在 run.sh 里

deploy

1.为了避免因为服务器端登录密码验证而导致部署失败，建议配置一下 ssh 登录，或者在 production 中加入 "ssh_options": "StrictHostKeyChecking=no"
2.post-deploy 中的 git pull 其实是可以不用加的，但是我在实际操作时候，发现不加的话，本地每次更新代码的时候，服务器端并不会自动拉去新的代码，在网上查了一下说是和版本有关也和服务器有关。。。所以这里只能强加一个 git pull 命令，保证更新了

3.使用淘宝镜像安装是因为项目中用到了 node-sass 依赖，如果不用的话会偶尔出现部署失败的情况

配置文件改好后，我们在本地终端执行命令 pm2 deploy ecosystem.config.js production setup 进行项目初始化

执行后，如果成功的话会发现服务器端的指定目录下 /home/breezymelon/vue-koa-demo 多出了几个文件夹，其中 source 文件目录下就是我们的源代码了，服务器自动去 github 拉取的结果。

dir

之后再执行发布命令 pm2 deploy ecosystem.config.js production 就可以等待部署了。

deployOk

当我们在本地对代码有新的 push 后，再次执行 pm2 deploy ecosystem.config.js production 即可完成部署更新。

在服务器上执行 pm2 list 可以观察到项目已经正常运行了！如果不能正常运行的话 pm2 log 查看一下日志信息，一般都是数据库连接错了，不会出现什么大问题。

pm2list

配置 Nginx 实现网页访问

sudo vi /etc/nginx/conf.d 新建一个如下的配置文件

todoconf

保存退出后 sudo nginx -t && sudo service nginx restart

就可以在浏览器看见自己的项目了！

todoPage

总结

从本地开发前后端，到买服务器域名备案再到配置环境最后到部署，大概历时一个月了，终于看见完全由自己搞的第一个上线的项目了。虽然项目很简单，而且上线的配置也很初级，更不用说优化了，但是对于一个新手来说来说有了这份体验还是很不错的~学习的路还很长，这次实践也意识到了一个项目从无到有需要的掌握的知识真的很多，也体验到了作为学生来说切实可行的学习路线应该是首先做到对前端的专注，之后再慢慢一点一点积累服务端知识吧。不慌慢慢学，心急一事无成。

这篇文章到这就结束啦，我感觉说的挺详（mo）细（ji）的了，如果对和我一样的新手玩家有所帮助的话就最好不过了！！！

最后附上原文链接吧~

一次前后端分离项目部署实践