天天看點

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

作者:小傅哥

部落格:https://bugstack.cn

原文:https://mp.weixin.qq.com/s/VtTHUfyiITNSoGy052jkXQ

沉澱、分享、成長,讓自己和他人都能有所收獲!😄

一、前言

小傅哥,我搞了三台伺服器,維護學校遊戲社站點,我麻了!

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

📨傅哥回信:辦法是有的,可以把你的網站代碼設定私有倉庫傳到 Github 或者 Gitee,這兩個代碼庫都支援 webhook 簡單說就是當你把代碼 push 到代碼庫以後,代碼庫會調用你預先配置好的一個或者多個回調鈎子,其實也就是調用你三個負載均衡的站點提供的 URL,來通知你現在這個代碼庫有最新更新的代碼,你可以在收到 URL 的調用通知以後,通過

git pull

指令把最新上傳的網站代碼,拉取到伺服器上。那麼現在的效果就是,你把代碼維護在 GitHub 以後,上傳最新的網站内容以後,三個站點就可以自動部署了,簡要流程如下:

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

方案流程:

  1. 在自己的網站站點中,提供 webhooks URL 通路位址,配置到

    Github/Gitee

    代碼庫的 Settings -> Webhooks

    在下文中會有詳細介紹

  2. 例如圖中 webhooks.php 開發的内容就是在接收到調用的時候,擷取入參以後開始執行 git pull 操作

    shell_exec("git pull origin main 2>&1");

  3. webhooks 配置完成以後,當我們再通過 git push 把本地代碼推送到倉庫(Github/Gitee)的時候,倉庫就會調用全部的 webhooks.php,把倉庫(Github/Gitee)中的代碼拉取到站點中,這樣就完成了整個站點内容的更新。

🤔 傅哥,你說的我悟了,但需要你再手把手,操作下!

二、環境說明

  1. 【必須】使用 Github、Gitee、Codechina 維護網站代碼,因為這些代碼庫可以支援配置 webhooks
  2. 【必須】Linux 雲伺服器(公網IP);安裝Git、安裝Nginx、安裝PHP、安裝FTP
  3. 【可選】使用寶塔運維面闆,部署站點部落格,操作起來會比較友善

三、站點配置

首先,我們使用 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 檔案中,執行腳本指令。如圖:
    Github webhooks 自動部署部落格文章,使用總結【含視訊】

2. 站點配置

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 環境安裝完畢後,就可以添加一個網站的站點了,你的網站運作代碼都需要上傳到這個站點中,它提供了 FTP 操作以及寶塔運維面闆中還有一個

    檔案

    ,可以線上修改站點内容。

3. 通路站點

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 位址: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 檔案的中腳本指令會報錯。

通路站點

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 項目路徑:

    [0] => /www/wwwroot/39.96.73.167

  • 使用者目錄:

    [1] => /home/www

    - www 就是這個使用者目錄,也就是我們需要為其建立 ssh 公鑰的使用者

2. 生成和配置公鑰

2.1 開啟 www 使用者

  • vim /etc/passwd

  • 配置:把

    sbin/nologin

    bin/bash

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

2.2 生成公鑰

因為我們已經開始了 www 登入權限,那麼在生成公鑰之前,需要切換到 www 賬戶下,指令:

su www

  • 切換使用者:

    su www

  • 生成公鑰:

    ssh-keygen -t rsa -C "[email protected]"

    - 預設回車即可
  • 檢視公鑰:

    cat ~/.ssh/id_rsa.pub

    - 其他賬戶下不可見,隻有切換到 www 可見
    Github webhooks 自動部署部落格文章,使用總結【含視訊】

2.3 配置公鑰(Github)

  • 位址:https://github.com/settings/ssh/new
  • 配置:把你通過

    cat ~/.ssh/id_rsa.pub

    檢視到的公鑰,配置到這裡即可,如下:
    Github webhooks 自動部署部落格文章,使用總結【含視訊】
    • 有了這個公鑰的配置,我們通過 webhooks.php 中的腳本指令就可以自動的拉取代碼了。

五、webhooks 更新部落格

1. 克隆我的代碼

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 源碼:關注公衆号:bugstack蟲洞棧 - 回複:

    guide-webhooks

    即可獲得
  • 使用:你可以把我的源碼先fork到自己的Github,然後部署到你的站點中。在學習完成搞清楚原理後,再處理你自己的站點

2. 部署到站點

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 這裡我們需要先在站點使用

    git clone ”你的網站代碼git位址“

    ,把Github代碼克隆到自己的部落格中,其實也就是啟動了部署做的作用。而這步操作,其實就是日常使用 Git 的方式,先克隆代碼,在不斷 git pull 更新。
  • [www@CodeGuide 39.96.73.167]$ git clone [email protected]:fuzhengwei/guide-webhooks.git

    - 注意,你需要切換為自己的代碼庫位址,否則 webhooks 不能生效

3. 更改網站運作目錄

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 因為我們已經在部落格站點中,從 Github 克隆下來我們的部落格運作代碼,那麼這裡需要把網站的運作目錄切換到這個檔案夾下,這樣就能正常通路到我們的部落格代碼了。

4. 配置 webhooks

webhooks.php

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

回調腳本

<?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 下了,如圖:
    Github webhooks 自動部署部落格文章,使用總結【含視訊】
    • 配置,URL、Content type、Secret、trigger,配置完成後确認即可,另外你可以把多個伺服器執行個體都配置上 webhooks,這樣就可以在推送代碼到 Github 倉庫時一起部署了。

六、部署驗證

目前,通路部落格是這樣,如下:

接下來我們開始修改部落格檔案并送出,驗證自動部署更新站點

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

1. index.php 新增代碼

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 你可以在 index.php 檔案中修改任意内容,或者添加新的内容。

2. push 代碼到 Github

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 推送新修改的内容,到代碼庫中,等待 Github webhooks 回調腳本

3. 驗證部落格更新

  • 位址:http://39.96.73.167/
  • 效果:
    Github webhooks 自動部署部落格文章,使用總結【含視訊】
    • 通過通路部落格位址,已經可以看到我們新加入的内容,已經自動部署更新到站點了!✌🏻

4. 檢視腳本執行日志

在我們的 webhooks.php 中,執行 git pull 腳本的時候,還有一段日志記錄,便于知曉誰對網站對了什麼!

git_webhook_log.txt

Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • git_webhook_log.txt 是在 webhooks.php 中記錄的日志檔案,你可以自行擴充其他需要輸出的内容。

5. 檢視webhooks推送日志

Github webhooks 自動部署部落格文章,使用總結【含視訊】
Github webhooks 自動部署部落格文章,使用總結【含視訊】
  • 每一次 webhooks 執行時,都會有對應的記錄,來告訴你本次代碼推送是否被回調成功。并且在日志中,你還可以看到 webhooks 向你推送的内容 JSON 檔案内容,你可以從中擷取需要的資訊,比如這是誰推送的、在哪個分支推送的、推送的檔案有哪些等等。
  • 這裡也截取了一段推送的 JSON,其餘資訊你可以在推送記錄中自己檢視了。

七、總結

  • 本章節我們帶着大家徹底的把 webhooks 的使用走了一遍,也讓需要此技術的小夥伴可以讓自己的站點部署變更的更加

    聰明一些

    。當然自己做記錄也幫助了一些師弟和小姐姐!
  • 那麼現在如果你手裡有伺服器正在吃灰不知道怎麼用起來,現在可以折騰起來了,因為傅哥給你錄好了入門視訊、寫好了操作文章,那麼不要等待了,上吧!年輕人!課程連結:https://space.bilibili.com/15637440/channel/seriesdetail?sid=479958

八、系列推薦

  • 《Netty+JavaFx實戰:仿桌面版微信聊天》代碼開源、上雲部署、視訊講解,隻為讓你給點個Star!
  • Cloudreve 自建雲盤實踐,我說了沒人能限得了我的容量和速度!
  • 一天建4個,小傅哥教你搭部落格!
  • 小傅哥,一個有“副業”的碼農!
  • 講道理,隻要你是一個愛折騰的程式員,畢業找工作真的不需要再花錢教育訓練!

公衆号:bugstack蟲洞棧 | 作者小傅哥多年從事一線網際網路 Java 開發的學習曆程技術彙總,旨在為大家提供一個清晰詳細的學習教程,側重點更傾向編寫Java核心内容。如果能為您提供幫助,請給予支援(關注、點贊、分享)!