从零开始通过webhooks实现前端自动化

1. 前置条件

1. 有一台自己的服务器。比如阿里云，腾讯云之类
2. 有远程仓库能够push代码，pull代码。比如github，或者码云
3. 远程仓库有webhooks功能

2. 自动化部署流程图

3. 构建流程

3-1. 服务器部署git环境

1. 安装git

通过指令yum install git安装git

安装按完成后可以看到

2. 设置ssh密钥

通过以下指令创建密钥,-C后面的内容,写你的邮箱名字就行

ssh-keygen -t rsa -C "youreamil@163.com"

不需要密码的话,一直回车就行了,然后可以得到两个文件：id_rsa和id_rsa.pub

3. 添加ssh密钥

在github添加密钥



在码云添加密钥

4. 测试密钥添加成功

github通过以下指令测试

ssh -T git@github.com

码云通过以下指令测试

ssh -T git@gitee.com

码云测试通过会显示 success,如下图所示

5. clone远程代码仓库到服务器

接着找到远程仓库代码的ssh地址



这个时候需要建立一个文件夹mkdir web,然后进入web文件夹中,通过git clone指令把远程仓库拷贝到服务器的web目录下

git clone git@gitee.com:XXXXXX.git

clone结束后，web文件夹下已经有了你的项目，这里yourprogram就是你的clone下来的项目文件夹，我们通过cd yourprogram,我们可以看到服务器里面已经有了代码内容

3-2. 服务器部署node环境

1. 安装nvm

在服务器中输入以下两种指令都行

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

2. 通过nvm安装node

nvm install v10.20.1

安装完成后，我们通过指令node -v和 npm -v确认使用这个版本的node

具体的安装过程可以看我的这篇文章linux服务器通过nvm安装node环境

3. 安装pm2

通过以下指令全局安装pm2

npm install -g pm2

通过pm2 list查看当前node进程为0

3-3. 创建webhook用服务后端

我们使用 NodeJS 创建 webhook 服务后端，后端代码保存在 webhook文件也就是index.js中，调用 deploy.sh 来发布，因此需要与 deploy.sh 文件在同一级目录中，监听 http://127.0.0.1:6666/webhook：

git_webhook目录结构如下

deploy.sh
node_modules
package.json
index.js

目录结构就是这样

1.初始化node

首先我们通过指令mkdir git_webhook新建一个文件夹git_webhook,然后通过一下指令初始化node

ps: git_webhook文件夹可以放在/opt目录下

npm init

2. 安装node包

Github webhooks需要跟我们的服务器进行通信，确保是可以推送到我们的服务器，所以会发送一个带有X-Hub-Signature的POST请求，为了方便我们直接用第三方的库github-webhook-handler来接收参数并且做监听事件的处理等工作

npm i -S github-webhook-handler

同上，这个是码云用的，原理一样

npm i —S gitee-webhook-middleware

3. 建立index.js

接下来就是构建起一个能够接收远程仓库post请求的服务,这同样也很简单,我们可以通过上面下载的包github-webhook-handler的帮助,快速建立起这样一个服务

ps: index.js中的secret就是webhooks设置中的key

通过以下指令创建并写入index

vim index.js

我们构建入口文件代码(git用)

var http = require('http');
var spawn = require('child_process').spawn;

// git用
// secret 保持和 GitHub 后台设置的一致
var handler = createHandler({ path: '/webhook', secret: 'webhook' });
var createHandler = require('github-webhook-handler');
// 码云用
// var createHandler = require('gitee-webhook-middleware');
// var handler = createHandler({ path: '/webhook', token: 'webhook' });

http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404;
    res.end('no such location');
  })
}).listen(6666);
console.log('listen at prot 6666')

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

// 修改push监听事件,用来启动脚本文件
//git是push ，而码云是Push Hook
handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref); 

  runCommand('sh', ['./deploy.sh'], function( txt ){
    console.log(txt);
  });
}); 

// 启动脚本文件
function runCommand( cmd, args, callback ){
    var child = spawn( cmd, args );
    var resp = 'Deploy OK';
    child.stdout.on('data', function( buffer ){ resp += buffer.toString(); });
    child.stdout.on('end', function(){ callback( resp ) });
}

构建入口文件代码(码云用)

var http = require('http');
var spawn = require('child_process').spawn;

// 码云用
// token 保持和 码云 后台设置的一致
var createHandler = require('gitee-webhook-middleware');
var handler = createHandler({ path: '/webhook', token: 'webhook' });
// git用
// var handler = createHandler({ path: '/webhook', secret: 'webhook' });
// var createHandler = require('github-webhook-handler');

// 上面的 secret 保持和 GitHub 后台设置的一致
http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404;
    res.end('no such location');
  })
}).listen(6666);
console.log('listen at prot 6666')

handler.on('error', function (err) {
  console.error('Error:', err.message)
});
// 阅读上面代码,你会发现handler监听到push事件调用对应的函数,所以你要做的就是在函数中执行deploy.sh命令,你需要在index.js添加代码

// 修改push监听事件,用来启动脚本文件
// 码云是Push Hook， 而git是push
handler.on('Push Hook', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref); 

  runCommand('sh', ['./deploy.sh'], function( txt ){
    console.log(txt);
  });
}); 

// 启动脚本文件
function runCommand( cmd, args, callback ){
    var child = spawn( cmd, args );
    var resp = 'Deploy OK';
    child.stdout.on('data', function( buffer ){ resp += buffer.toString(); });
    child.stdout.on('end', function(){ callback( resp ) });
}

3-4. 构建自动化脚本文件

通过指令vim deploy.sh构建并写入脚本文件，脚本执行命令的主要操作流程为

1.进入服务器git仓库-> 2.pull远程仓库上的代码-> 3.下载新的node包-> 4.编译新的dist包

ps:

1）develop_qa 是本人用来发布代码的分支,这个可以替换成你的分支

2）WEB_PATH是服务器代码仓库的路径,按照我们第一步设置的代码仓库应该在web文件夹下

3）web文件夹我是创建在根目录下的，也就是和/opt，/etc同级

4）yourprogram就是你上面clone的项目地址，这里改成你自己的项目就行

WEB_PATH='/web/yourprogram/'
WEB_USER='root'
WEB_USERGROUP='root'

echo "Start deployment"
cd $WEB_PATH
echo "pulling source code..."
git reset --hard origin/develop_qa
git clean -f
git pull
git checkout develop_qa
echo "changing permissions..."
npm install
npm run build
echo "build end"
chown -R $WEB_USER:$WEB_USERGROUP $WEB_PATH
echo "Finished."

3-5. 在远程仓库构建webhooks

1.设置webhooks

在码云上设置



这个时候我们就需要匹配上面node环境配置的内容

在github上设置

同上,github上也需要在webhooks上配置

3-6. 运行node服务,实现自动化

1. 使用pm2开启node服务,并检查是否配置成功

进入git_webhook通过以下指令启动node服务

pm2 start index.js --watch

通过pm2 list可以查看我们的node服务已经启动了

2. 测试webhooks,查看是否自动部署

这里以码云上为例,点击测试之后,可以看到请求结果是true



测试成功后,我们需要实际提交代码看下

我之前的分支是develop_qa,提交之后可以看到每次push之后,webhooks都会出发一次

3. pm2查看打印日志

我们在.sh脚本,在index.js中打印了很多日志,但是这些日志是看不到的,这个时候可以通过以下指令看到我们的程序执行情况

方法一：

pm2 monit appid

ps: appid就是下图的这个id



然后会出现这样一个界面

当我们提交代码之后,日志就全打印出来了

方法二：

pm2 logs appid

效果同上

4.待优化点

4-1. 查看npm run build的实时日志

如题，如何在linux服务器上实施查看编译日志，上面的方法只能是编译结束后，把日志打印出来，并不能实施看到编译情况，中间等待的时间就比较懵b了，哪位有什么方法可以实时查看

5. 参考资料:

使用 GitHub Webhook 实现静态网站自动化部署

都9012年了,你还在手动部署代码吗

Github Webhook自动发布代码

使用 GitHub / GitLab 的 Webhooks 进行网站自动化部署

webhook实现github代码自动部署

使用Github的webhooks进行网站自动化部署