前端之路: 用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: ==剛開始寫東西，之前沒有這個習慣，還請多多提意見，謝謝~