[Gitlab]使用Webhook實現前端項目自動發佈

時間 2019-11-17

標籤 gitlab 使用 webhook 實現前端項目自動發佈欄目 Git 简体版

原文原文鏈接

喜聞樂見的背景故事時間--承接[prerender-spa-plugin]--微型Vue項目的靜態化利器，官網上線以後，就開始琢磨，每次改動都得上服務器部署一下，是否是有點麻煩了，是時候該整個自動化部署惹:)而後就開始本身挖坑本身填啦。前端

本文將會涉及的內容--node

Webhook是啥？何時該使用它？
該怎麼利用Webhook解放咱們的雙手？
小結

Webhook是啥？何時該使用它？

以我司爲例，咱們團隊內部使用Gitlab做爲代碼倉庫，因此如下內容都是在Gitlab中進行實踐的，固然在Github上其實也是大同小異的。python

Webhook顧名思義，其實就是一鉤子。當咱們在Gitlab上作出某些特定操做時，能夠觸發鉤子，去進行一些咱們事先設定好的腳本，以達到某些特定功能（例如--前端項目自動發佈）。git

也許熟悉Gitlab的同窗會說了，這不就是CI嗎，爲何好好的CI放着不用要去搞webhook呢？確實，CI也能完成同樣的功能，可是也要結合業務實際情況而言。該項目並不是公司核心項目，跑CI的runner須要有Gitlab控制權限的同事幫忙配置，本着不騷擾同事的原則，我的認爲應該本身動手豐衣足食，既然有簡單便捷的webhook爲何不用呢？web

何時才應該去使用它呢？我的認爲至少要有這幾點：express

項目不是一成不變的
你是項目的負責人
你有權限進入部署項目的服務器
~~你能擠得出時間來踩坑~~

該怎麼利用Webhook解放咱們的雙手？

上圖是Gitlab中有關webhook的配置頁面，當咱們成功進行了[Trigger]內部的某些或某些操做時，好比Push events--成功push了一次代碼，不管是向哪一個分支push，均可以觸發hook......安全

以後Gitlab將會自動的替咱們向URL中的連接發去POST請求，這裏能夠是腳本也能夠是服務，只要可以成功接收來自Gitlab的請求便可。在本次實踐中，我起了一個node服務來幫助完成自動化部署。服務器

那麼就有一個問題了，請求那個URL就會觸發node服務中的部署流程，那麼萬一有人一直在玩那個接口，會不會把服務搞掛或是把網站搞掛呢？還真有可能...因此Gitlab給了咱們設置Secret Token的機會，咱們檢測到請求有帶有這段特殊的token才能認爲本次請求是安全可接受的。微信

It will be sent with the request in the X-Gitlab-Token HTTP header.app

這裏須要注意一下的是，實際上咱們並不會找到X-Gitlab-Token這個請求頭，咱們只會匹配到x-gitlab-token這個字段，別問我爲何知道的，你們注意避坑就好:)

下面講講在服務器上咱們是怎麼接收Gitlab的請求而且執行部署的--

const exec = require('child_process').exec
const express = require('express')
const app = express()

let isLocking = false

app.post('/deploy', function (req, res) {
    let headers = req.headers
    let cmdStr = 'cd ... && git fetch origin && ...'
    if (!isLocking && headers['x-gitlab-token'] === 'xxx') {
        isLocking = true
        exec(cmdStr, function (err, stdout, stderr) {
            if (err) {
                // ...
                console.log('error:' + stderr);
            } else {
                // ...
                console.log(stdout)
                isLocking = false
            }
        })
    }
    // ......
})

app.listen(1234, '0.0.0.0', function () {
    console.log(`listening on port 1234`)
})
複製代碼