Github webhooks 自動部署部落格文章，使用總結【含視訊】

作者：小傅哥
部落格：https://bugstack.cn
原文：https://mp.weixin.qq.com/s/VtTHUfyiITNSoGy052jkXQ

沉澱、分享、成長，讓自己和他人都能有所收穫！?

https://www.bilibili.com/vide...

一、前言

小傅哥，我搞了三臺伺服器，維護學校遊戲社站點，我麻了！

?女粉來信：傅哥，我大二了，就程式設計學的還可以的那種大二女生?。最近我不是天天看見一大堆人宣傳伺服器白皮襖嗎，我就在11.1日也買了，還讓宿舍的兩個同學一起跟著買了，都買了三年。想著這樣我們三個人就可以搭建和維護我們學校遊戲社團的站點了，日常維護著學校的遊戲比賽、宣傳、通知，還能順便就把我學的程式設計技術用上，一舉多得嘛。本來還想，可以趕在 EDG VS DK 的時候上線秀一下呢，但是域名要備案好多天，只能鴿了。而且隨著我們三個熬夜的折騰伺服器、做站點網站、備案域名，真是遇到太多問題了，以前感覺課本學了就能起飛呢，現在全拉胯了。只能一遍學習傅哥的雲伺服器操作視訊，一遍部署驗證，真的學到了好多好多！再次感謝傅哥！那麼現在問題來了，就是傅哥你的B站視訊只有6節，我看完也跟著做了，但這回我遇到了新的問題，就是就是，我三個伺服器，按照視訊配置完 Nginx 負載以後，每次都要通過 FTP 把網站檔案傳到三個伺服器上去，有時候還忘記一個。這咋弄呀，傅哥給想想辦法嘛。

?傅哥回信：辦法是有的，可以把你的網站程式碼設定私有倉庫傳到 Github 或者 Gitee，這兩個程式碼庫都支援 webhook 簡單說就是當你把程式碼 push 到程式碼庫以後，程式碼庫會呼叫你預先配置好的一個或者多個回撥鉤子，其實也就是呼叫你三個負載均衡的站點提供的 URL，來通知你現在這個程式碼庫有最新更新的程式碼，你可以在收到 URL 的呼叫通知以後，通過 git pull 命令把最新上傳的網站程式碼，拉取到伺服器上。那麼現在的效果就是，你把程式碼維護在 GitHub 以後，上傳最新的網站內容以後，三個站點就可以自動部署了，簡要流程如下：

方案流程：

在自己的網站站點中，提供 webhooks URL 訪問地址，配置到 Github/Gitee 程式碼庫的 Settings -> Webhooks 在下文中會有詳細介紹
例如圖中 webhooks.php 開發的內容就是在接收到呼叫的時候，獲取入參以後開始執行 git pull 操作 shell_exec("git pull origin main 2>&1");
webhooks 配置完成以後，當我們再通過 git push 把原生程式碼推送到倉庫(Github/Gitee)的時候，倉庫就會呼叫全部的 webhooks.php，把倉庫(Github/Gitee)中的程式碼拉取到站點中，這樣就完成了整個站點內容的更新。

? 傅哥，你說的我悟了，但需要你再手把手，操作下！

二、環境說明

【必須】使用 Github、Gitee、Codechina 維護網站程式碼，因為這些程式碼庫可以支援配置 webhooks
【必須】Linux 雲伺服器(公網IP)；安裝Git、安裝Nginx、安裝PHP、安裝FTP
【可選】使用寶塔運維皮膚，部署站點部落格，操作起來會比較方便

三、站點配置

首先，我們使用 Linux 寶塔運維皮膚，新增一個部落格站點，在新增之前需要在寶塔中安裝 Nginx、FTP、PHP模組，如果你對這裡的操作比較陌生，可以先看小傅哥在B站錄製好的雲伺服器學習視訊，地址：https://space.bilibili.com/15637440/channel/seriesdetail?sid=479958 PS：當然你也可以不使用寶塔，通過命令安裝 Nginx 或者 Apache 伺服器等所需要的軟體也是可以的。

1. 環境安裝

安裝 Git

需求：在站點接收到 webhooks 回撥時，使用 git pull 拉取網站程式碼，所以需要安裝 git
命令：yum -y install git
驗證：

[root@CodeGuide ~]# git version
git version 2.27.0

安裝 Nginx、FTP

需求：部署部落格站點時會需要到Nginx伺服器、FTP上傳
操作：可以直接在寶塔中使用軟體商店進行安裝

配置 PHP，允許 exec 指令碼指令

需求：由於我們使用的是 PHP 開發的 webhook 回撥操作，所以這裡需要安裝 PHP 模組
安裝：直接在寶塔的軟體商店中進行安裝即可
配置：安裝完 PHP 模組以後，還需要對 PHP 的 php.ini 進行更改，刪除 disable_functions 下的 exec、shell_exec，這樣才能在 webhooks.php 檔案中，執行指令碼命令。如圖：

2. 站點配置

環境安裝完畢後，就可以新增一個網站的站點了，你的網站執行程式碼都需要上傳到這個站點中，它提供了 FTP 操作以及寶塔運維皮膚中還有一個檔案，可以線上修改站點內容。

3. 訪問站點

地址：http://39.96.73.167 - 你換成自己的訪問IP即可
描述：預設建立完站點，會在 /www/wwwroot/39.96.73.167 目錄下有一個 index.html 此時你可以進行線上修改

四、建立公鑰

SSH 是 Linux 系統的登入工具，現在廣泛用於伺服器登入和各種加密通訊。

1. 檢視執行使用者

一般php執行使用的是 www 使用者，我們可以通過 ftp 上傳一個 index.php 到站點根目錄下，之後進行訪問站點，檢視專案路徑和使用者目錄。

index.php 中的程式碼如下

<?php
header('Content-type: text/html; charset=utf-8');
ini_set("error_reporting", "E_ALL & ~E_NOTICE");

echo "Hi，Webhooks！By 小傅哥<br/>";

echo '<br/>測試：輸出專案路徑和使用者目錄：<br/>';

exec("cd ~ && cd - && cd -", $output);

echo '<pre>';
echo print_r($output);
echo '</pre>';

如果你未對 php.ini 中的 disable_functions = {exec、shell_exec} 刪掉，那麼執行這個 php 檔案的中指令碼指令會報錯。

訪問站點

專案路徑：[0] => /www/wwwroot/39.96.73.167
使用者目錄：[1] => /home/www - www 就是這個使用者目錄，也就是我們需要為其建立 ssh 公鑰的使用者

2. 生成和配置公鑰

2.1 開啟 www 使用者

命令：vim /etc/passwd
配置：把 sbin/nologin 為 bin/bash

2.2 生成公鑰

因為我們已經開始了 www 登入許可權，那麼在生成公鑰之前，需要切換到 www 賬戶下，命令：su www

切換使用者：su www
生成公鑰：ssh-keygen -t rsa -C "184172133@qq.com" - 預設回車即可
檢視公鑰：cat ~/.ssh/id_rsa.pub - 其他賬戶下不可見，只有切換到 www 可見

2.3 配置公鑰(Github)

地址：https://github.com/settings/s...
配置：把你通過 cat ~/.ssh/id_rsa.pub 檢視到的公鑰，配置到這裡即可，如下：
- 有了這個公鑰的配置，我們通過 webhooks.php 中的指令碼指令就可以自動的拉取程式碼了。

五、webhooks 更新部落格

1. 克隆我的程式碼

原始碼：關注公眾號：bugstack蟲洞棧 - 回覆：guide-webhooks 即可獲得
使用：你可以把我的原始碼先fork到自己的Github，然後部署到你的站點中。在學習完成搞清楚原理後，再處理你自己的站點

2. 部署到站點

這裡我們需要先在站點使用 git clone ”你的網站程式碼git地址“，把Github程式碼克隆到自己的部落格中，其實也就是啟動了部署做的作用。而這步操作，其實就是日常使用 Git 的方式，先克隆程式碼，在不斷 git pull 更新。
命令：[www@CodeGuide 39.96.73.167]$ git clone git@github.com:fuzhengwei/guide-webhooks.git - 注意，你需要切換為自己的程式碼庫地址，否則 webhooks 不能生效

3. 更改網站執行目錄

因為我們已經在部落格站點中，從 Github 克隆下來我們的部落格執行程式碼，那麼這裡需要把網站的執行目錄切換到這個資料夾下，這樣就能正常訪問到我們的部落格程式碼了。

4. 配置 webhooks

webhooks.php

回撥指令碼

<?php
/**
 * Git webhooks 自動部署指令碼
 * 地址：https://github.com/fuzhengwei/guide-webhooks/settings/hooks
 */

// 接收post引數
$requestBody = file_get_contents("php://input");
if (empty($requestBody)) {
    exit('data null！');
}

// Content type = application/json
$content = json_decode($requestBody, true);

// 驗證 Webhooks 配置的 Secret，也可以不驗證
/*if (empty($content['password']) || $content['password'] != '123456') {
    exit('password error');
}*/

// 專案存放物理路徑，也就是站點的訪問地址
$path = "/www/wwwroot/39.96.73.167/guide-webhooks/";

// 判斷需要下拉的分支上是否有提交，我們這裡的分支名稱為 main
if ($content['ref'] == 'refs/heads/main') {

    // 執行指令碼 git pull，拉取分支最新程式碼
    $res = shell_exec("cd {$path} && git pull origin main 2>&1"); // 當前為www使用者

    // 記錄日誌 ($content 返回的是一整個物件，可以按需獲取裡面的內容，寫入日誌)
    $res_log = '------------------------->' . PHP_EOL;
    $res_log .= '使用者 ' . $content['pusher']['name'] . ' 於 ' . date('Y-m-d H:i:s') . ' 向專案【' . $content['repository']['name'] . '】分支【' . $content['ref'] . '】PUSH ' . $content['commits'][0]['message'] . PHP_EOL;
    $res_log .= $res . PHP_EOL;

    // 追加方式，寫入日誌檔案
    file_put_contents("git_webhook_log.txt", $res_log, FILE_APPEND);
}
echo 'done';

在我們從 Github 克隆下來的程式碼檔案中，有一個名為 webhooks.php 的檔案，它是用於處理 Github 回撥時拉取 Github 對應部落格程式碼庫的指令碼檔案。
現在 http://39.96.73.167/webhooks.php 就可以配置到 Github 的 webhooks 下了，如圖：
- 配置，URL、Content type、Secret、trigger，配置完成後確認即可，另外你可以把多個伺服器例項都配置上 webhooks，這樣就可以在推送程式碼到 Github 倉庫時一起部署了。

六、部署驗證

目前，訪問部落格是這樣，如下：接下來我們開始修改部落格檔案並提交，驗證自動部署更新站點

1. index.php 新增程式碼

你可以在 index.php 檔案中修改任意內容，或者新增新的內容。

2. push 程式碼到 Github

推送新修改的內容，到程式碼庫中，等待 Github webhooks 回撥指令碼

3. 驗證部落格更新

地址：http://39.96.73.167/
效果：
- 通過訪問部落格地址，已經可以看到我們新加入的內容，已經自動部署更新到站點了！✌?

4. 檢視指令碼執行日誌

在我們的 webhooks.php 中，執行 git pull 指令碼的時候，還有一段日誌記錄，便於知曉誰對網站對了什麼！

git_webhook_log.txt

git_webhook_log.txt 是在 webhooks.php 中記錄的日誌檔案，你可以自行擴充套件其他需要輸出的內容。

5. 檢視webhooks推送日誌

每一次 webhooks 執行時，都會有對應的記錄，來告訴你本次程式碼推送是否被回撥成功。並且在日誌中，你還可以看到 webhooks 向你推送的內容 JSON 檔案內容，你可以從中獲取需要的資訊，比如這是誰推送的、在哪個分支推送的、推送的檔案有哪些等等。
這裡也擷取了一段推送的 JSON，其餘資訊你可以在推送記錄中自己檢視了。

七、總結

本章節我們帶著大家徹底的把 webhooks 的使用走了一遍，也讓需要此技術的小夥伴可以讓自己的站點部署變更的更加聰明一些。當然自己做記錄也幫助了一些師弟和小姐姐！
那麼現在如果你手裡有伺服器正在吃灰不知道怎麼用起來，現在可以折騰起來了，因為傅哥給你錄好了入門視訊、寫好了操作文章，那麼不要等待了，上吧！年輕人！課程連結：https://space.bilibili.com/15637440/channel/seriesdetail?sid=479958