前端项目持续集成和部署实现

要高效的把纯前端项目部署到云服务器上，研究了好几种持续集成部署方案，这里简单记录描述一下。

方案选择
总的部署思路分两种：

• 编译后的文件部署

        编译后的文件部署，就是先在本地进行npm run build打包，生成 build 文件夹，然后将 build 文件夹传到服务器，再用 Nginx 配置一个静态解析即可。

• 源码部署

        源码部署就是把源文件上传到服务器上，然后执行 npm install && npm run build，这种方式是将打包工作交给服务器，本地只是将源代码 push 上去，git 监听到推送然后自动开始构建。这是现在流行的方式，大多数持续集成工具都是这么干的。

关于本项目，我决定不借助其他构建工具，只用纯 Git 实现监听 push 并自动构建和服务启动。

服务端

首先准备一台服务器，我使用的是云服务器：

Host : 118.xxx.xxx.xxx
项目目录：/root/demo/my-project

在服务器初始化一个正常仓库
登入服务器，在服务器的/root/demo/my-project目录下创建一个正常仓库

在/root/demo/my-project目录下执行命令创建：
 

git init my-project

创建好后，会生成my-project文件夹，所以我们的正常仓库位置是 /root/demo/my-project
，记住这里后面会用到。

创建裸仓库

登入服务器，在服务器的/root/demo目录下创建一个裸仓库（什么是裸仓库？裸仓库就是没有工作目录的仓库，说白了就是你的项目目录下的 .git 文件夹）

在/root/demo目录下执行命令创建：
 

git init --bare my-project.git

创建好后，会生成my-project.git文件夹，所以我们的裸仓库位置是 /root/demo/my-project.git，记住这里后面会用到。

接下来，进入my-project.git 文件夹，发现里面有个 hooks 文件夹，是放 Git “钩子” 的地方。
“钩子” 其实就是一个 shell 文件。在执行 git 某些操作（如：push，pull）时触发执行。现在我们创建一个钩子。

添加 push 钩子

在 hook 目录下新建 post-receive 文件，这个钩子文件会在代码 push 到这个裸仓库后执行，这里是本文最重要的重点。

在hooks文件夹下执行命令创建post-receive文件

vim post-receive

post-receive 的具体内容如下：

#!/bin/bash
echo 'server: received code push...'
cd /root/demo/my-project

echo 'server: checkout latest code from git...'
git --git-dir=/root/demo/my-project.git --work-tree=/root/demo/my-project checkout -f master

npm install
echo 'server: install success'

npm run build
echo 'server: build success'

pm2 list

pm2 stop my-project
echo 'server: my-project stop'

pm2 start my-project
echo 'server: my-project start'

特别注意：创建完成后一定要将post-receive赋予可执行权限

这个脚本最重要的就一条命令：

git --git-dir=/root/demo/my-project.git --work-tree=/root/demo/my-project checkout -f master

命令的意思：将 /root/demo/my-project.git这个 git 仓库的 master 分支，检出（checkout）到项目目录/root/demo/my-project，从而更新了项目目录的代码。

在shell脚本中，检出新代码之后，直接运行了打包命令（也就是脚本中的 npm run build）更新部署文件夹，然后执行了pm2 start my-project这样前端的服务就在服务器启动了（其实你可以直接执行 npm start）

至于什么是pm2请自行搜索，pm2是node进程管理工具，能够保证在关闭终端以后服务不被终止
其实这时候我们的应用就已经在服务器上启动了，并且可以通过IP+服务端口http://118.xxx.xxx.xxx:3000 （我的服务端口是3000）的方式进行访问了，但是要想像正常网站一样被访问，就需要借助nginx了

Nginx

至于怎么使用nginx将服务端口映射出去这里不进行讲解了，回头可以自行研究下nginx的代理配置，大概配置如下：

server {
   listen       443 ssl;
   server_name www.myproject.com;

   location / {
            proxy_pass http://127.0.0.1:3000;
     }
}

客户端

前面在服务器建好了 git 裸仓库my-project.git，回到客户端只需要做一件事：将代码推到这个裸仓库。

第一步，我们先在本地项目下，将这个裸仓库添加为远程仓库。

git remote add prod ssh://root@118.xxx.xxx.xxx/root/demo/my-project.git

第二步，我们直接将代码推送到这个远程仓库：

git checkout -b master
git push prod master

这里必须要切换到 master 分支再推送。因为在远程仓库钩子中，我们定义的是检出 master 分支，所以要推送的是 master 分支。

推送后，会在控制台看到我们在 post-receive 中写好的输出。当推送完成，查看服务器下的 /root/demo/my-project 目录，会看到源文件和打包后的文件。
到这里，CI/CD 工作已经全部完成。

后续的持续部署工作，只需要在客户端执行 git push prod master 即可。