前端之路: 用github的webhooks实现项目自动化构建

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

流程

1. git push xxx 本地代码提交至远程github仓库
2. github仓库收到push后进行回调，发post（ Payload url 是来自webhooks的配置）请求
3. 基于 Payload url 的服务根据传回来的信息进行提取，拉取最新代码并从新构建项目
4. 能够看到，咱们只需把代码提交到github仓库便可，不用再上服务器进行一些列的操做了

开始

1. 搭建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 （路由，处理请求）
     复制代码

2. 在服务器启动 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 ，别忘记安全组开放端口

3. github配置webhooks

   打开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 便可
   • 配置完成，提交便可，配置后以下图：

     

4. 测试

   在本机更改 github-hook 代码，提交，而后打开刚刚的github页面看看下面是否有Recent Deliveries：

   

结语：

• 不须要登陆服务器，pull 代码，重启服务，直接在本地提交代码就能够从新构建部署是否是提升了效率？
• 固然这只是简单的应用，想要更好地管理仍是要靠 ci 系统，在版本回退，单元测试等方面更完善，也就是我下次要讲的，将项目放到 docker 容器中 "用 jenkins 打包构建部署项目"

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