用github的webhooks实现项目自动化构建

背景

公司用github管理项目,而且这些项目(包括纯静态和node APP)大都是我们自己上服务器部署的.

我正在埋头写代码,突然,

pm过来说: xxx 项目改个东西,很简单(例如换个图片,按钮,文案...)

我: 哦,那就改呗,按要求先在本地,切到 test 分支改动后的上测试步骤:

git add .

git commit -m fix(xxx): xxx

git fetch upstream test

git rebase upstream/test test ,合并conflict后

git push upstream test

以上只是把 test 分支代码同步到github上,接下来,还要上服务器 pull 代码,重启项目:

ssh ubuntu@xxx

tmux a -t xxx

git checkout test

git log

git pull origin test

npm run build:test

现在成功上到测试了,看看效果,没问题就要上到生产了,步骤和上面差不多,先切到生产(我的是: next 分支)上生产步骤:

git fetch upstream next

git rebase upstream/next next

git merge test ,合并conflict后

git push upstream next

以上只是把 next 分支代码同步到github上,接下来,还要上服务器pull代码,重启项目:

ssh ubuntu@xxx

tmux a -t xxx

git checkout next

git log

git pull origin next

npm run build:next

终于完成领导交给的任务了,就为了一个小小的改动,用了这么多步骤,是不是很蛋疼,过了一会儿,pm又跑过来说还有一个地方要改....

以上经历是否有过呢?

确实太繁琐了,为了简化开发,js已经在工程化方面做的不错了,由前些年的 grunt ,到 glup ,又到现在的 webpack ,以及 rollup ,可以说是很成熟了,但是项目部署,可能很多前端小伙伴接触的还不多,可能只是打包出文件( dist )甩给后端.

接下来我就讲讲如何简单的优化这些繁琐的步骤,不依靠 ci ,仅仅借助 webhooks 来简单的实现.

那么什么是webhooks?

简单的来说是一种回调,和异步编程中的"订阅-发布模式"很类似,一端触发事件，一端监听执行,webhooks是异步编程模型的一种实现,具体的可以看 webhooks

git push xxx 本地代码提交至远程github仓库

github仓库收到push后进行回调,发post( Payload url 是来自webhooks的配置)请求

基于 Payload url 的服务根据传回来的信息进行提取,拉取最新代码并重新构建项目

可以看到,我们只需把代码提交到github仓库即可,不用再上服务器进行一些列的操作了

搭建github-hook服务

目的是为webhooks提供payload url,并取得github 回调发来的信息,执行构建部署命令

a. copy我的 github-hook ,基于koa

b. 用这个自己写 github-webhook-handler ,基于node原生http服务的

c. 其他

介绍一下我的 github-hook :

├── README.md ├── config │ ├── data.example.js │ ├── data.js (配置项目的 dir/分支/启动命令) │ └── index.js (配置secret,与github的webhooks配置相同) ├── ecosystem.config.js (pm2启动配置文件) ├── package-lock.json ├── package.json └── src ├── controlers │ └── token.js (用于生成token,webhooks加密用) ├── index.js (启动文件) ├── jobs │ └── index.js (解析回调发来的信息,执行命令) └── routes └── index.js (路由,处理请求)

在服务器启动 github-hook 服务

登录服务器,进入工作目录(我的是 /var/nodejs ,可根据喜好自己改,别忘了改对应的 config/data.js 文件的 DIR )

git clone xxxgithub-hook.git

cd github-hook

npm i

npm run start ,用的是 pm2 ,请先全局安装pm2

curl ip:9002 ,若有success字样,则成功

注:本服务的端口是9002,若已占用,请自行更改 /index.js ,别忘记安全组开放端口

打开github,找到要配置的项目,进入setting-->webhooks-->新增一个:

Payload URL: 输入上一步测试的api,即 http://ip:9002/payload/{reponame} ,我这里的reponame即 github-hook

Content type: 选择application/json

Secret: 与上面 /config/index.js 中的 appSecrcet 保持一致

Which events would you like to trigger this webhook? 选择第一项 Just the push event 即可

配置完成,提交即可,配置后如下图:

不需要登录服务器, pull 代码,重启服务,直接在本地提交代码就可以重新构建部署是不是提高了效率?

当然这只是简单的应用,想要更好地管理还是要靠 ci 系统,在版本回退,单元测试等方面更完善,也就是我下次要讲的,将项目放到 docker 容器中 "用 jenkins 打包构建部署项目".

== ps: ==刚开始写东西,以前没有这个习惯,还请多多提意见,谢谢~