利用github提供的Webhooks實現自動化部署

自如大前端團隊發表於2021-05-07
GithubWebHook

image.png

實現自動部署的關鍵就是利用github的webhooks，我們在github建立一個專案之後，在專案主頁點選Settings，看到Webhooks點選開啟可以新增一個連結，這裡的意思是，github可以幫你監聽一些專案發生的事件，當指定事件發生時，會向你指定的連結發一個post請求，然後你就可以知道自己的哪個專案發生了什麼事情，再去做一些具體的操作，那麼這時就可以利用shell指令碼實現專案自動pull並且重新部署，最後實現的效果就是在本地push程式碼，一段時間過後，效果就展示在了網站上面。

1.配置git SSH 公鑰和私鑰

可自行Google(最簡單的基本操作)：配置成功之後，服務就能拉取github的程式碼了

2.配置Webhooks

新建專案=>Settings=>Webhooks=>add hooks 配置項如下：


Payload URL // hook觸發的介面地址
Content type // request型別(這裡以application/json為例)
Secret // 加密的祕鑰
Which events would you like to trigger this webhook // 想要觸發的時間，預設選擇第一個(push事件)
Active // 是否提供詳細資訊

複製程式碼

image.png

3.建立自動化部署Shell指令碼(也可以是其他指令碼或手段，這裡以Shell為例)


#!/bin/bash
cd /opt/...
git pull
...
啟動命令

複製程式碼

4.編寫呼叫自動化部署Shell的介面(這裡以node服務koa2為例，也可以是其他語言服務)

將建立Webhooks時填寫的Secret存出在伺服器環境變數中(這裡以contos7為例)

臨時生效：


export SECRET_TOKEN=建立Webhooks時填寫的Secret

echo $SECRET_TOKEN // 驗證是否成功

複製程式碼

永久生效：


vim /etc/profile

在最後，新增:

SECRET_TOKEN=建立Webhooks時填寫的Secret
export SECRET_TOKEN

儲存，退出

source /etc/profile

echo $SECRET_TOKEN // 驗證是否成功

複製程式碼

建立koa2專案並編寫呼叫自動化部署Shell的介面

建立koa2專案，對專案進行常規配置(此處省略500字，這裡不屬於本文重點介紹的內容，有興趣請自行Google)

關鍵程式碼性程式碼：


const router = require('koa-router')()
const childProcess = require('child_process') // 建立子程式
const crypto = require('crypto') // 加密解密工具

router.post('/url', function (ctx, next) { // 這裡的/url必須與配置Webhooks時填寫的介面路徑相同
  const hubSignatureKV=ctx.header['x-hub-signature']
  if(hubSignatureKV){
    // 獲取github簽名
    const hubSignature=hubSignatureKV.slice(5)
    // 獲取系統環境變數SECRET_TOKEN
    const secret=process.env.SECRET_TOKEN
    // 建立一個hmac物件(必須是sha1演算法，secret作為加密祕鑰)
    const hmac = crypto.createHmac('sha1', secret)
    // 往hmac物件中新增摘要內容(必須是請求主體，因為Content type配置為application/json，所有此處需要轉為json字串)
    const up = hmac.update(JSON.stringify(ctx.request.body))
    // 使用 digest 方法生成加密內容(必須是hex格式)
    const signature = up.digest('hex')
    if(hubSignature===signature){ // 相同則驗證成功
      childProcess.exec('/opt/shell/hexo.sh',function(err){ // 利用子程式執行系統命令
        console.log(err)      //當成功是error是null 
      })
      ctx.body = '執行成功'
    }else{
      ctx.body = '伺服器已積極拒絕你的請求'
    }
  }else{
    ctx.body = '伺服器已積極拒絕你的請求'
  }

})

module.exports = router

複製程式碼

5.部署介面服務並驗證

將服務部署到伺服器(這裡案例為node服務，推薦使用pm2守護程式部署) 部署成功之後推送程式碼驗證即可

快讓你的github運轉起來吧!

作者：自如大前端研發中心-客端研發組-李會鑫

招聘資訊

自如大前端研發中心招募新同學！FE/IOS/Android工程師 公司福利有：

  • 全額五險一金，並額外購買商業保險
  • 免費健身房+年度體檢
  • 公司附近租房9折優惠
  • 晚間叫車報銷
  • 每年2次晉升機會

歡迎對技術有執著熱愛的你加入我們！簡歷請投遞 zhangxl122@ziroom.com, 或加微信 v-nice-v 詳聊！

相關文章