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

1. 前置条件

有一台本身的服务器。好比阿里云，腾讯云之类
有远程仓库可以push代码，pull代码。好比github，或者码云
远程仓库有webhooks功能

2. 自动化部署流程

3. 构建流程

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

1. 安装git

经过指令yum install git安装git
安装按完成后能够看到
html

2. 设置ssh密钥

经过如下指令建立密钥,-C后面的内容,写你的邮箱名字就行node

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

不须要密码的话,一直回车就好了,而后能够获得两个文件：id_rsa和id_rsa.publinux

3. 添加ssh密钥

在github添加密钥

在码云添加密钥

git

4. 测试密钥添加成功

github经过如下指令测试github

ssh -T git@github.com

码云经过如下指令测试web

ssh -T git@gitee.com

码云测试经过会显示 success,以下图所示npm

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

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

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

json

git clone git@gitee.com:XXXXXX.git

clone结束后,咱们能够看到服务器里面已经有了代码内容vim

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: develop_qa 是本人用来发布代码的分支,这个能够替换成你的分支

WEB_PATH是服务器代码仓库的路径,按照咱们第一步设置的代码仓库应该在web目录下

WEB_PATH='/web/XXX/'
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

而后会出现这样一个界面

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

4. 参考资料:

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

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

 Github Webhook自动发布代码

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

 webhook实现github代码自动部署

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