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

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

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

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

待部署项目介绍

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

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

关于跨域

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

这段代码的意思就是把 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 这里就是咱们的部署配置文件了，须要作一些改动

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

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 拉取的结果。

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

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

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

配置 Nginx 实现网页访问

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

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

就能够在浏览器看见本身的项目了！

总结

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

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

最后附上原文连接吧~