利用gitHub的webhooks實現前端專案自動化部署---個人摸索的一次學習總結

Archer 漸幾於道發表於2021-07-20
GithubWebHook前端

作為一個前端，買了騰訊雲伺服器後，一直想嘗試專案自動化打包部署，奈何jenkins體量太大，窮人買的低配伺服器還玩不起來，還有gitHub的webhooks，於是自己摸索用node.js結合webhooks跑通了自動部署的流程。

前期準備：一個伺服器（自己搭好node環境, 安裝好git）, 一個託管在github、部署在伺服器上的前端專案。

  • 在伺服器上建立一個服務（我用node.js），用於監聽gitHub的webhooks觸發的post請求，

請求所帶的資料大概如下：

由此可區分出觸發的事件(僅識別push觸發)和分支(僅對master分支做了識別並自動部署)，之後執行部署指令碼。

服務程式碼deploy.js如下：

var http = require('http')

var createHandler = require('github-webhook-handler')

var handler = createHandler({ path: '/', secret: '1qazxsw2' }) 

// 上面的 path 即是github中填寫的url的path部分

// 上面的 secret 保持和 GitHub 後臺設定的一致 
function run_cmd(cmd, args, callback) {

  var spawn = require('child_process').spawn;  var child = spawn(cmd, args);

  var resp = "";   
  child.stdout.on('data', function(buffer) { resp += buffer.toString(); });

  child.stdout.on('end', function() { callback (resp) });

}
 http.createServer(function (req, res) {

  handler(req, res, function (err) {

    res.statusCode = 404

    res.end('no such location')

  })

}).listen(7777)

// listen(7777)指監聽7777埠,可以根據實際情況改成你自己的

handler.on('error', function (err) {

  console.error('Error:', err.message)

})// push事件觸發

handler.on('push', function (event) {

  var name=event.payload.repository.name;

  console.log('Received a push event for %s to %s',    event.payload.repository.name,    event.payload.ref);

  // 判斷master分支變動時執行，可根據payload.ref區分分支

  if (event.payload.ref === 'refs/heads/master') {   
     run_cmd('sh', ['./deploy.sh',name], function(text){ console.log(text) });

  }

})
//這裡為了實現不同倉庫的自動部署,傳了倉庫名給shell指令碼 

handler.on('issues', function (event) {

  console.log('Received an issue event for % action=%s: #%d %s',    event.payload.repository.name,    event.payload.action,    event.payload.issue.number,    event.payload.issue.title)
})
複製程式碼

部署指令碼所做的工作：伺服器拉取並更新程式碼庫（伺服器要配置好git，生成公鑰，並在gihub專案上新增公鑰），打包生成dist，移動到對應的目錄替換髮版檔案。

部署指令碼程式碼deploy.sh如下

#!/bin/bash

WEB_NAME="$1"# 伺服器上的專案程式碼庫路徑

PROJECT_PATH="/root/project/${WEB_NAME}/"


# 專案釋出的地址，我用的nginx的靜態目錄DEPLOY_PATH="/usr/share/nginx/html/${WEB_NAME}/"

cd $PROJECT_PATH

MD5=`md5sum package.json | cut -d' ' -f1`

rm -rf dist

git pull

NEW_MD5=`md5sum package.json | cut -d' ' -f1`

# 利用前後package.json檔案MD5值是否變化來決定是否重新npm install

if [ $MD5 == $NEW_MD5 ]; then

    echo '未檢測到依賴項改變'else

    echo "change install"

    npm installfi

npm run build

if [[ ! -d "dist" ]]; then

    echo "build error"    exit 1fi

rm -rf $DEPLOY_PATH*

cp -rf dist/* $DEPLOY_PATH 

echo "build success $WEB_NAME"
複製程式碼

可以用pm2管理此服務，此外，我根據package.json檔案MD5值是否變化來選擇是否重新安裝依賴 npm install。

在github專案配置url和secert

測試，修改專案程式碼，提交、push。檢視是否觸發，gitHub皮膚會有觸發記錄，redeliver按鈕也可以方便除錯，不用每次都自己push觸發。

如此實現了前端自動部署專案的流程，但是實際生產中，還是jenkin等有介面的ci系統更為可靠。

相關文章