前端之路: 用github的webhooks實現專案自動化構建

蟈蟈同志發表於2019-02-21
前端GithubWebHook

背景

公司用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倉庫即可,不用再上伺服器進行一些列的操作了

前端之路: 用github的webhooks實現專案自動化構建

開始

  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 即可
    • 配置完成,提交即可,配置後如下圖:
      前端之路: 用github的webhooks實現專案自動化構建

  4. 測試

    在本機更改github-hook程式碼,提交,然後開啟剛剛的github頁面看看下面是否有Recent Deliveries:

前端之路: 用github的webhooks實現專案自動化構建

結語:

  • 不需要登入伺服器,pull程式碼,重啟服務,直接在本地提交程式碼就可以重新構建部署是不是提高了效率?
  • 當然這只是簡單的應用,想要更好地管理還是要靠ci系統,在版本回退,單元測試等方面更完善,也就是我下次要講的,將專案放到docker容器中 "用jenkins打包構建部署專案".

== ps: ==剛開始寫東西,以前沒有這個習慣,還請多多提意見,謝謝~

相關文章