前端开发过程中，我们经常需要提供一个及时更新的浏览环境，已方便项目经理实时跟踪项目开发进度，以及对项目开发问题及时反馈。如果我们手动部署环境，没更新一次代码都需要执行相同的部署操作，如何让一切自动化起来，下面就是我实践总结的方案。

方案介绍

我一直使用gitlab作为代码管理工具，每次提交都从自己fork出的仓库向主仓库发送merge请求，每次merge请求接收后，主仓库代码更新，都会通过webhook向指定服务地址发送请求，指定的服务收到请求，会执行相应的脚本，来完成项目的更新部署。

如何实现呢？

写一个监听webhook请求的服务

我选择在部署代码的服务器上写监听webhook请求的服务。选用NodeJS。

先创建一个 webhook 目录，执行如下命令：

1
2
$ npm init
$ npm install --save node-gitlab-webhook

这里使用了 node-gitlab-webhook 包，用来解析webhook请求。

创建一个 service.js 文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var http = require('http')
var createHandler = require('node-gitlab-webhook')
var handler = createHandler({ path: '/webhook', secret: 'secret1'})

// 用来执行脚本文件
function exec_command(cmd, args, callback) {
    var spawn = require('child_process').spawn;
    var child = spawn(cmd, args);
    var resp = "";

    child.stdout.on('data', function (buffer) { resp += buffer.toString(); });
    child.stdout.on('end', function () { callback(resp) });
}

// 服务端口号为6687
http.createServer(function(req, res) {
    handler(req, res, function(err) {
        res.statusCode = 404
        res.end('no such location')
    })
}).listen(6687)

handler.on('error', function(err) {
    console.error('Error:', err.message)
})

// 这里监听merge请求
handler.on('merge_request', function(event) {
    console.log('Received a merge event for %s to %s',
        event.payload.repository.name,
        event.payload.ref
    )
		
	// 执行同目录下的脚本文件
    exec_command('sh', ['./deploy-pub.sh'], function (text) { console.log(text) });
})

接下来需要开启服务，这里使用pm2作为进程管理工具，执行以下命令开启服务：

1
$ pm2 start service.js

可通过 pm2 list 查看服务进程状态。

gitlab页面配置webhook

登录 gitlab 的 weebhook 配置界面，如下图：

创建指定类型的webhook，配置服务地址，可以点击测试按钮，如果成功，会返回200状态码。

服务器端脚本编写

脚本需要在收到webhook请求后执行，主要目的是拉去远端仓库最新代码，并完成编译部署。

代码内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
REPO_DIR=/root/Repository/repo
DYSERVER_DIR=/var/www/html/dyserver

cd $REPO_DIR
~
# Reset current HEAD to the specified state.
git reset --hard origin/dev

# Remove untracked files from the working tree.
git  clean -f

# 拉取远端代码
git pull origin dev

cd ./DyServer/static

# 进行编译
gulp build

# 编译后代码放到访问目录下
mv ./dist/* $DYSERVER_DIR

然后可以通过执行脚本测试脚本是否执行成功。

总结

遇到问题

  • 公网上的服务器防火墙对开放端口进行了限制，所以创建新的服务需要对防火墙进行端口配置，可以参看链接。
  • 公共服务器上最好使用ssh方式拉去代码，使用http方式会泄露本地保存的个人账户信息。

自动化工作流还可以进行更多功能的拓展。