比快更快,Github Action + 雲開發部署靜態網站

Github 爲開源項目提供了用於靜態頁面展示的 Pages 服務,很多開發者都在上面託管了自己的靜態網站和博客,不少開源項目的案例和文檔頁面也採用了這種方式。不過由於 Pages 的 CDN 節點大部分在國外,在國內的訪問速度不是很理想,不少開發者希望能提升網站在國內的訪問速度和穩定性,今天會介紹如何配合 Github Action 的持續集成服務和 雲開發 Github Action 擴展,自動部署到訪問速度更快的雲開發靜態託管服務。

64173-d51d1a7df238490b.jpg
Pages 國內測速數據

雲開發靜態託管介紹

雲開發靜態託管是雲開發提供的靜態網站託管的能力,靜態資源(HTML、CSS、JavaScript、字體等)的分發由騰訊雲對象存儲 COS 和擁有多個邊緣網點的騰訊雲 CDN 提供支持。可以通過騰訊雲控制檯、命令行工具以及下面會提到的雲開發 Github Action 進行管理部署。雲開發提供了免費的二級域名(未綁定自定義域名時下行速度有限制),同時支持免費綁定開發者自己的自定義域名

首個環境可享受 1GB 容量和每月 5GB 流量的免費額度,對於訪問量不是很大的個人博客應該足夠了。如果流量大也沒關係,計費是按照具體使用收費的按量付費方式,具體信息可以查看計費價格文檔 https://cloud.tencent.com/product/wh/pricing

雲開發靜態託管部署的網站,還可以使用雲開發的提供的一站式 Serverless 後端能力,例如雲函數、雲數據庫、雲存儲、身份服務等。比如可以在靜態託管的個人博客上面使用雲函數和雲數據庫實現評論、留言板功能等,或者可以把博客的內容管理從原來的靜態文件部署變爲動態內容管理等,拓展的用法非常的多,開發者可以繼續深入探索。

如何通過 Github Action 一鍵部署到雲開發

下面演示如何將 Github 靜態頁面自動部署到雲開發的靜態託管,來獲得穩定的訪問速度和更多的擴展能力。

例如開發者的個人博客 Github 項目結構如下:

|-- src
|-- build
|-- README.md 

希望將項目下 build 目錄生成的靜態網站代碼部署到雲開發這邊開通的靜態網站託管的根目錄下。

編寫 Github Action 文件

首先在項目目錄配置如下的 Github Action 文件 .github/workflows/main.yml,如果已經配置過 Github Action 就不需要重新創建了,然後參考下面的配置填寫。

on: [push] # push 代碼時觸發

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Tencent Cloudbase Github Action Example
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      
      # 使用雲開發 Github Action 部署
      - name: Deploy static to Tencent CloudBase
        id: deployStatic
        uses: TencentCloudBase/cloudbase-action@v1
        with:
            # 雲開發的訪問密鑰 secretId 和 secretKey
          secretId: ${{ secrets.SECRET_ID }}
          secretKey: ${{ secrets.SECRET_KEY }}
          # 雲開發的環境id
          envId: ${{ secrets.ENV_ID }}
          # Github 項目靜態文件的路徑
          staticSrcPath: build

可以看到配置中主要用到了 雲開發 Github Action 擴展 TencentCloudBase/cloudbase-action@v1 來部署靜態文件。

注意配置文件中參數部分的 secretIdsecretKeyenvId屬於敏感信息,需要放在項目的 secret 存儲中,這裏不用填寫真實的值,只需要按照上面實例填寫變量即可。

staticSrcPath 這裏填寫了靜態網站構建產生的目錄 build,如果想把靜態資源部署到雲端的某個子目錄而不是根目錄,可以再配置一個參數 staticDestPath

配置雲開發訪問信息

我們還需要在項目的 Secrets 中配置 SECRET_IDSECRET_KEYENV_ID 這幾個私密信息,下面是具體的配置方式。

首先要開通雲開發靜態網站,可以參考開通指南:https://docs.cloudbase.net/hosting/,開通環境後即可得到環境ID ENV_ID,然後在騰訊雲 訪問管理 頁面可以配置一對 API 訪問密鑰,也就是SECRET_IDSECRET_KEY

然後在自己的 Github 項目內的 Setting/Secrets 裏設置 SECRET_ID, SECRET_KEY, ENV_ID 信息即可。

[圖片上傳失敗...(image-e534d-1586741563921)]

配置完之後就可以提交代碼體驗自動部署了,每次 git push Actions 都會自動運行,將項目的靜態資源部署到自己的雲開發靜態託管環境,部署成功之後即可通過雲開發提供的二級域名訪問來自己的網站。

64173-8c5f9c6183a09b50.jpg
雲開發靜態託管測速數據

配置自定義域名

雲開發提供的免費的二級域名下行速度有所限制,開發者最好綁定一個自己的域名,綁定域名是免費的,還可以在騰訊雲配置一個免費的 SSL 證書,來通過 HTTPS 訪問自己的網站。

自定義域名的方法可以參考這篇文檔 https://docs.cloudbase.net/hosting/custom-domain.html

64173-165351558bd2b158.jpg
image

配置完成後,測試下部署在雲開發靜態託管的網站的訪問速度,根據測速數據可以看到各地的訪問速度都非常快。

64173-20a68642548d4e21.jpg
image

更多擴展玩法

雲開發 Tencent CloudBase Github Action 這個擴展會 Github 項目自動部署到雲開發環境,目前支持靜態託管功能,後續會支持其他資源的部署,比如可以把用 Node JS 、 Java、PHP 等語言開發的服務端項目一鍵部署到雲開發,來獲得 Serverless 化的動態網站服務。或者自動化部署帶有數據庫、前端、後端的全棧應用

Tencent CloudBase Github Action 擴展市場地址
https://github.com/marketplace/actions/tencent-cloudbase-github-action

Tencent CloudBase Github Action 代碼開源地址
https://github.com/TencentCloudBase/cloudbase-action

歡迎大家多多體驗、Star 支持或者提交 Issue / Pull request 來參與貢獻。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章