部落格從 CloudBase 遷移至雲主機

程式設計師翔仔發表於2022-07-16
Cloud

遷移起因

原來的部落格

其實從很久以前就想要寫部落格，但總是斷斷續續的，一直都沒有認真地開始。

最終，決定使用靜態部落格工具作為自己部落格的承載體。在多種工具的比較下，最終選擇了 Hugo 並部署到 Github Pages 上，並同時部署到騰訊雲的 CloudBase 以供國內使用者訪問。

自此，2022 年 5 月 15 日，翔仔的個人部落格終於部署到公網上了。

出現了變故

但是，才經過大概 2 個月的時間，收到了騰訊雲傳送的 CloudBase 計費模式變更的訊息。

騰訊雲 CloudBase 計費模式升級

簡單來說，CloudBase 出了一個最低消費，像我這樣的，原本從幾毛錢的無感消費要升級到幾十塊，這個變動對於我來說還是挺大的。

思路變更

此處要趕爺，爺自有去處。

突然想到，曾經自己用 299 買的雲伺服器一直荒廢沒有使用，畢竟還有好幾個月的期限呢，一定要利用起來。

就決定是你了，我的部落格暫時先放置在雲伺服器上，順便了解一下如何部署靜態部落格到雲伺服器上。

第一版方案

不可否認，現在流行的自動化部署真的是用一次就愛上了，尤其是，還有 Github Action 這樣的免費資源可以薅，哈哈哈。

Github Pages 部署

將 Hugo 通過 Github Action 部署到 Github Pages 非常簡單，在網上也有很多教程可用，這裡就簡單地列舉一下吧。

第一步，通常就是要建立一個私有庫儲存部落格的原始檔，再建立一個 Github Pages 庫儲存 Hugo 構建後的檔案。

第二步，自然就是在 Hugo 部落格專案下編寫 workflow 檔案，這裡有使用到 Checkout、Hugo setup、GitHub Pages action 三種 Action 步驟，當時的配置如下：

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 切換分支
      - name: Checkout
        uses: actions/checkout@v3

      # 安裝 Hugo 程式
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
           hugo-version: 'latest'
           extended: true

      # Hugo Build
      - name: Build
        run: hugo --minify --gc

      # 部署到 Github Pages 上
      - name: Deploy Github Pages
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/master' }}
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: fatedeity/fatedeity.github.io
          publish_branch: master
          cname: fatedeity.cn

在這一步，需要配置一個 Actions secrets 以解決安全性問題，可以通過 GitHub Pages action 瞭解更多。

經過上述兩個配置步驟，基本上是已經完成了，之後 Hugo 部落格檔案再 push 到 Github 時就會自動觸發部署，期間基本上能在 20s 左右完成。

CloudBase 部署

使用 Github Action 部署 Github Pages 非常簡單，畢竟也算是同出一家，基本上不會出現什麼問題。

因為想要通過部署到 CloudBase 以加速國內 IP 訪問部落格的速度，也不得不研究一下怎麼通過 Github Action 部署到 CloudBase 上。

仔細查詢了一下，基本上就兩種方案：通過 CloudBase CLI 使用命令列部署；通過官方提供的 Tencent CloudBase Github Action 工具部署。

最終，決定使用 Action 工具，相信與 Github Action 更配（實際操作起來並沒有?），下面是簡單的一個配置步驟：

第一步，新增 CloudBase Action v2 所需的配置檔案，由於我只使用了 CloudBase 的靜態部落格部署，配置起來也不麻煩，主要是需要在專案根目錄下建立 cloudbaserc.json 檔案，填入以下配置：

{
    "envId": "{{ENV_ID}}",
    "region": "ap-guangzhou",
    "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
    "framework": {
        "name": "x-blog",
        "plugins": {
            "client": {
                "use": "@cloudbase/framework-plugin-website",
                "inputs": {
                    "outputPath": "public",
                    "cloudPath": "/"
                }
            }
        }
    }
}

第二步，更新之前的 workflow 檔案，將 Cloudbase Action 的步驟配置進去，當時的配置如下：

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 切換分支
      - name: Checkout
        uses: actions/checkout@v3

      # 安裝 Hugo 程式
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
           hugo-version: 'latest'
           extended: true

      # Hugo Build
      - name: Build
        run: hugo --minify --gc

      # 部署到 Github Pages 上

      # 部署到 CloudBase 上
      - name: Deploy Tencent CloudBase
        uses: TencentCloudBase/cloudbase-action@v2.0.1
        if: ${{ github.ref == 'refs/heads/master' }}
        with:
          secretId: ${{ secrets.SECRET_ID }}
          secretKey: ${{ secrets.SECRET_KEY }}
          envId: ${{ secrets.ENV_ID }}

通過上述的步驟，基本上也算是完成了 Github Action 到 CloudBase 的配置。

但是，使用起來並不是很順利，經常性地出現 Github Action 執行超時的情況，應該是 Github Action 機器在美國，而 CloudBase 伺服器在國內的原因。

當時也沒有找到什麼好的解決辦法，只能通過每次報失敗之後再手動去執行一遍（從自動化部署變成了半自動化?）。

第二版方案

雲伺服器部署

將專案部署到自己的雲伺服器上，方法就變得更多了，既有使用 SSH Remote Commands 通過 ssh 工具執行命令，也有使用 SCP、Rsync、SFTP 等工具將檔案直接上傳，還有更多其他的辦法等等。

對比之後，還是採用了理解起來最簡單的辦法，通過 SSH Remote Commands 連線到雲伺服器上執行命令，這個命令也很容易理解，就是通過 Git 命令拉取 Github Pages 的程式碼。

第一步，先在雲服務上做好準備，安裝好 Git 程式，確定能手動拉取到 Github Pages 的程式碼。

第二步，當然還是要更新 workflow 檔案，將 SSH Remote Commands Action 的步驟替換掉原來的 CloudBase Action 的步驟，具體的配置如下：

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      # 切換分支
      - name: Checkout
        uses: actions/checkout@v3

      # 安裝 Hugo 程式
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
           hugo-version: 'latest'
           extended: true

      # Hugo Build
      - name: Build
        run: hugo --minify --gc

      # 部署到 Github Pages 上

      # 部署到 Server 上
      - name: Deploy Tecent Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          port: ${{ secrets.PORT }}
          script: rm -rf fatedeity.github.io/ && git clone https://ghproxy.com/https://github.com/fatedeity/fatedeity.github.io.git

這裡有個小技巧，將 Github 通過 GitHub Proxy 代理加速 訪問，原本比較慢的拉取程式碼步驟變得飛快，綜合下來，這個靜態部落格部署完成只需花費 30ms 左右的時間。

第三步，程式碼被自動拉取到伺服器上之後，還需要配置一個反向代理的伺服器以供外網訪問。最常用的自然就是 Nginx 伺服器了，安裝 Nginx 的步驟就直接忽略吧，下面是我這邊訪問靜態部落格的反向代理配置：

log_format main escape=json '{"remote_addr":"$remote_addr","timestamp":"$time_iso8601","request":"$request","size":$body_bytes_sent,"status":$status,"request_time":$request_time,"referer":"$http_referer","user_agent":"$http_user_agent"}';

server {
    listen      80;
    listen      [::]:80;

    server_name fatedeity.cn;

    return      301 https://$host$request_uri;
}

server {
    listen      443 ssl;
    listen      [::]:443 ssl;

    server_name fatedeity.cn;

    # 證書
    ssl_certificate             cert/fatedeity.cn_bundle.crt;
    # 私鑰
    ssl_certificate_key         cert/fatedeity.cn.key;
    ssl_session_timeout         5m;
    ssl_protocols               TLSv1.2 TLSv1.3;
    ssl_ciphers                 ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers   on;

    location / {
        root        /home/fatedeity/fatedeity.github.io/;
        index       index.html;
    }

    error_page 404  /404.html;

    access_log /var/log/nginx/x-blog-access.log main;
}

日誌統計

經過上述的操作記錄，基本就完成了 Hugo 到 Github Pages 和 Cloud Server 的配置，其實到這裡也就結束了。

但是，突然想要看一下自己伺服器的訪問量，之前都沒有搞過這些東西，都是在公司有現成的工具可以使用。發現自己的伺服器配置並不是很高，搞不來 ELK 那一套，只能另闢蹊徑。

還好，簡單一搜，發現有 GoAccess 這樣的開源實時日誌工具可用，非常適合我這樣簡單看看日誌的使用者。

第一步，自然就是安裝 GoAccess 工具啦，也很簡單，使用 apt install goaccess 命令安裝一下即可。

第二步，配置好 .goaccessrc 檔案，我這邊的配置很簡單，只是需要配置好日誌格式、輸入輸出檔案即可：

time-format %H:%M:%S
date-format %Y-%m-%d
log-format %^:"%h",%^:"%dT%t+%^",%^:"%r",%^:%b,%^:%D,%^:"%R",%^:"%u"

log-file /var/log/nginx/x-blog-access.log
output /home/fatedeity/logs/x-blog.html

第三步，這邊主要是想要通過瀏覽器訪問一下日誌，每次想訪問的時候使用下面的命令生成一下，也不麻煩，當然也可以定時更新：

goaccess -p /home/fatedeity/.goaccessrc

這樣就大功告成了，展示一下 GoAccess 的空頁面：

GoAccess 空資料頁面

相關文章