用GitHub的Webhooks打造前端自動化構建部署

前言

隨着前端工程化的推動，如今的前端開發流程已經日趨規範化，在咱們的平常開發中，每完成一次功能的開發，通常須要通過如下步驟:

1. Git提交代碼
2. Webpack打包源碼
3. 上傳服務器
4. 重啓服務器上部署的服務(例如Nginx)

若是這些步驟每一次都須要手動執行，不免顯得繁瑣、效率低下，做爲一個程序員，怎麼能忍受？若是能作到咱們一提交代碼，自動的幫咱們打包構建=>部署=>重啓服務就省事多了。以前一直有了解到GitHub有Webhooks這個功能，這篇記錄就來填個坑，實現前端工程的自動化部署。

1 準備工做

1.1 項目初始化

出於示例目的，先在Github中開一個新的倉庫命名爲Webhooks-demo,使用vue-cli生產初始代碼，並上傳到倉庫中，並把項目部署到服務器(本文使用騰訊雲,操做系統爲ubuntu)運行。

1.2 項目運行環境搭建

本文項目服務器環境使用nginx做爲代理服務器運行，須要在nginx配置中設置目錄指向項目的dist目錄(也就是打包出來的目錄)。

location / {
    root /home/ubuntu/webhooks-demo/dist; #網站主頁路徑。此路徑僅供參考，具體按照實際目錄操做。
    index  index.html index.htm;
}
複製代碼

使用瀏覽器訪問服務器域名或者公網IP地址，能正常訪問則項目運行環境搭建完成

2 編寫自動化腳本

首先分析實現自動化部署功能的需求：

1. 當項目倉庫發生git push操做時，須要執行git pull操做拉取最新代碼
2. 運行npm install，項目可能會有新加的npm包
3. 運行npm run build(參考使用，以具體項目爲主)，使用Webpack打包源碼，生成dist目錄
4. 運行sudo service nginx restart，重啓nginx服務

2.1 搭建Node服務器

搭建Node服務器，用於監聽Webhooks發出的POST請求，並作出下一步操做。

在項目根目錄下新建autoBulid.js文件，代碼比較簡單

const http = require('http')
const createHandler = require('github-webhook-handler')
const handler = createHandler({ path: '/webhook', secret: 'myhashsecret' })
// 上面的 secret 保持和 GitHub Webhooks 後臺設置的一致 下文會提到
// secret: 'myhashsecret' 記住 後面會用到
// path 是webhook訪問的url 後面會提到

http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(7777)
 
handler.on('error', function (err) {
  console.error('Error:', err.message)
})
 
handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref)
})
複製代碼

這裏用到了github-webhook-handler這個包，用於監聽Webhooks發出的請求，具體介紹可前往npm查看，此時Node服務基本搭建完成，在服務器中運行autoBulid.js

node autoBulid.js
複製代碼

2.2 Webhooks設置

首先在項目的GitHub主頁設置中開啓Webhooks功能

接下來就是建立Webhooks，在Webhooks的頁面咱們能夠看到一段簡短的介紹：

Webhooks allow external services to be notified when certain events happen. When the specified events happen, we’ll send a POST request to each of the URLs you provide.

大概意思就是Webhooks在檢測到倉庫有事件觸發時會發送一個POST請求到你給定的URL去，從而進行後續的部署工做。點擊「Add webhook」按鈕，建立一個webhook。

建立完成後wenhook會立刻模擬發送一個請求用於測試是否請求成功。(這裏圖中URL漏寫/webhook了)

如圖，看到一個綠色的√，說明webhook建立成功並能正常運行。

2.3 編寫.sh腳本

到這一步，項目已經能檢測到項目倉庫的變動，接下來須要編寫腳原本跑命令，實現項目的更新和部署。

一樣在根目錄下新建一個autoBuild.sh文件，寫入如下代碼。

git pull origin master      # 拉取最新代碼
npm install                 # 安裝依賴
npm run build               # 打包
sudo service nginx restart  # 重啓nginx
複製代碼

有了腳本文件，咱們須要在前面建立的Node服務中調用它，修改autoBuild.js代碼。

const http = require('http')
const createHandler = require('github-webhook-handler')
const handler = createHandler({ path: '/webhook', secret: 'myhashsecret' })

http.createServer(function (req, res) {
  handler(req, res, function (err) {
    res.statusCode = 404
    res.end('no such location')
  })
}).listen(7777)
 
handler.on('error', function (err) {
  console.error('Error:', err.message)
})
 
handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref)
    run_cmd('sh', ['./autoBuild.sh'], function(text){ console.log(text) }); // 執行autoBuild.sh
})

// 新增run_cmd函數
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) });
}
複製代碼

執行git push提交代碼，服務器上拉取代碼並運行node autoBuild.js。

接下來咱們在本地修改一下項目的代碼，而後提交到Github，測試腳本是否能正常運行。

// App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <HelloWorld msg="Webhook test"/>
  </div>
</template>
複製代碼

本地執行git push提交代碼更新到倉庫中，經過Xshell觀察服務器的輸出。

能夠看到，服務器已經檢測到項目倉庫變化，並自動執行了 autoBuild.sh腳本，此時打開瀏覽器刷新查看頁面變化。

能夠看到，頁面已經按照咱們修改的代碼自動更新了。之後每一次的提交代碼，服務器都會幫咱們更新代碼和打包部署，不再用本身手動操做啦。

3 總結

到這裏，使用Github提供的Webhooks來實現自動化部署就已經大體完成了，總體過程沒什麼難度，一些細節的地方還能夠繼續優化，其實能實現的不止有這麼多，能夠在autoBuild.sh文件中加入單元測試之類，能夠發揮的空間還很大。固然，實現自動化部署的方案不止Webhook這一種，如今我所在公司使用的是GitLab的CI，可使用還有Travis CI和Jenkins等等。此次的記錄就寫到這裏，今年剛畢業萌新第一次在掘金髮文章，寫的很差的地方望你們諒解。