阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 02月11日

GitHub Webhook CI/CD：逐步指南

（本部落格文章是我和Mustapha El Idrissi合作作品的一部分，請參閱他的 devTo 頁面以了解更多資訊：https://dev.to/appsbymuss）

什麼是 CI/CD

CI/CD，即持續整合和持續交付/部署，是一組自動化軟體開發、測試和發布過程的實踐和工具。它可以幫助開發人員更頻繁、更安全、更可靠地交付程式碼變更。

持續整合：這是一種開發實踐，開發人員經常將他們的程式碼變更整合到共享儲存庫中。
持續交付：透過自動化整個發布過程，更進一步。一旦程式碼通過所有測試階段，它就會自動部署到生產環境。

有許多工具可用於執行CI和CD，例如但不限於：

詹金斯
GitHub 操作
GitLab CI/CD
崔維斯·西

然而，這些工具通常會受到資源使用限製或需要資金捐贈才能有效使用，同時初學者在軟體開發職業生涯開始時很難使用這些工具。

然而，有一種更容易引導但更難以高效設置的方法來實現 CI/CD，那就是“GitHub Webhooks ”

如何設定 GitHub Webhook？

步驟 0：建立 repo

當然，當我們有一個新專案時，我們必須為其建立一個新的儲存庫來儲存我們的程式碼變更（即提交），但在這種情況下，它對於實現我們的 CI/CD 目標也很有用。

步驟 1：為 POST-webhook 建立路由

假設您已經擁有一個在特定連接埠上啟動並執行所需執行時間環境/框架的伺服器。
您還必須建立一個 webhook，以便當您的 GitHub 倉庫上的主/生產分支發生新的變更時，Github 能夠存取您的伺服器，如下所示：

require('dotenv').config();
const express = require('express');
const crypto = require('crypto');
const bodyParser = require('body-parser');
const { exec } = require('child_process');
const app = express();

const updatedAt = new Date();

function verifySignature(req, res, buf, encoding) {
    const signature = req.headers['x-hub-signature-256']; // GitHub sends the signature here

    if (!signature) {
        console.log('No signature found on request');
        return false;
    }

    const hmac = crypto.createHmac('sha256', process.env.REPO_WEBHOOK_SECRET);
    const digest = 'sha256=' + hmac.update(buf).digest('hex');

    if (signature !== digest) {
        console.log('Signature does not match');
        return false;
    }

    console.log('Signature is valid');
    return true;
}

app.use(bodyParser.json());

app.post('/cicd/github-cicd', (req, res) => {
    const buf = JSON.stringify(req.body); // The raw body of the request
    // const isValid = verifySignature(req, res, buf);

    /* if (!isValid) {
            return res.status(401).send('Invalid signature');
    }*/

    const { ref } = req.body;
    if (ref === 'refs/heads/main') {
        // PM2 is my instance manager
        exec('git pull origin main && pm2 restart cicd_app');
    }
    res.sendStatus(200);
});

app.get('/cicd/time', (req, res) => {
    res.send(`<h1>${updatedAt}</h1>`);
});

app.listen(80, () => {
    console.log("Listening on Port 80...");
});

(完整原始碼)

步驟 2：配置 repo 的設定

前往 [YourRepo -> 設定 -> Webhooks]

圖片描述

然後

圖片描述

然後我們進入 webhook 建立面板
[警告] 根據您網站的 SSL 狀態（是否已啟用），相應地選擇「SSL 驗證」選項。
[警告] 如果你想讓 Github 包含一個「秘密」令牌來向你的伺服器驗證自身身份，以確保它是 Github 而不是威脅行為者，那麼請輸入一個秘密詞，否則留空。

圖片描述

步驟3：準備好！

在您的Web 伺服器上設定好您的 Webhook 並在您的 repo 上設定好github Webhook之後，您基本上就可以開始了。

宏

圖片描述

首先，開發人員會將他們的提交（程式碼變更）推送到 GitHub。
其次， GitHub 將向我們的伺服器發送一個 POST 請求，特別是向我們的 webhook 路由發送一個 POST 請求，其正文是 JSON，其中包含與我們剛完成的 github 推送相關的資訊。
第三，伺服器當然會將所述請求視為一種了解生產分支上有必須盡快應用的變更的方式，因此會嘗試git pull ，然後執行測試、新建等等。
最後，伺服器將使用更新的原始程式碼重新啟動。