一鍵部署！這樣搭建一個文檔網站真的很簡單！

2021 年 3 月 14 日
筆記
前端學習

前言

最近筆者在複習 JavaScript 基礎知識，剛看完《JavaScript 高級程式設計（第四版）》，想再找一些優秀程式碼庫鞏固一下學到的內容，自然而然得就想到了 Lodash。

Lodash 是一個一致性、模組化、高性能的 JavaScript 實用工具庫。在筆者的公司內使用率頗高，相信在大家的項目中也是如此，於是就想研究一下 lodash 源碼，順便做一些源碼分析，獨樂樂不如眾樂樂，寫一些文章出來與大家分享。

於是就到了這篇文章的主題，快速搭建一個文檔網站。其實筆者是有一個伺服器的，域名是 //lcs.show，但是伺服器確實頻寬有限，再加上還得自己配置 NGINX、GitHub Action 以及 https 證書等內容。

很巧看到了騰訊雲 cloudbase 服務，可以快速搭建靜態網站，如果你沒有域名的話會自動分配一個域名（但是會比較難記），可以的話還是自己註冊一個域名，也可以很方便地申請並配置 https 證書，如果搭配 GitHub Action 使用的話可以說是完全不用考慮伺服器維護的內容了。

接下來就來講一下如何搭建以及部署。

搭建及部署

本文是以 VuePress 為例進行搭建部署，VitePress、Next、Docsify 等部署大同小異。

項目初始化

安裝 CLI

npm install -g @cloudbase/cli@latest

初始化一個應用

tcb new cloudbase-test vuepress

使用該 CLI 是需要進行登錄的，如果 CLI 檢測到你當前沒有登錄的話會自動打開瀏覽器跳轉到騰訊雲登錄頁面，登錄成功後返回命令行，繼續下一步操作：

接下來選擇你認為合適的一個伺服器地點，在這裡我選擇上海。

接下來會選擇關聯環境，如果你當前沒有環境的話可直接選擇「創建新環境」，CLI 會自動打開瀏覽器跳轉到「創建新環境」頁面，創建新環境如下圖，在這裡我選擇使用 VuePress 模板進行創建：

選擇完成後點擊下一步即可：

創建成功後返回命令行，會顯示正在初始化環境，稍等幾分鐘就可以直接創建項目。創建成功後會生成以下目錄結構的項目：

├── README.md
├── cloudbaserc.json
├── guides
│   └── README.md
└── package.json

項目部署

安裝依賴

npm i

構建部署

npm run deploy

部署成功

執行 npm run deploy 稍等片刻之後即可部署成功，命令行會返回一個訪問域名，筆者的為 //cloudbase-test-9gccjnk3e393c02a-1256377994.tcloudbaseapp.com/vuepress/ ，點擊即可訪問示例網站，如下：

到這裡為止，其實部署工作就算是結束了，無需自己配置 NGINX 等複雜繁瑣的操作，這就是雲服務的魅力，同時該服務按量計費，對於筆者來說費用可以說是非常低了。

但是，僅此還不夠，我們要配置 GitHub Action 之後，才能算完全放手部署這件事，做到完全自動化，將日常工作精力專註於文檔編寫就可以了。

GitHub Action 配置

如果初始化了一個項目的話，會看到項目中有一個 cloudbaserc.json 文件，該文件為 cloudbase 配置文件，文件中有一個 envId 配置項，這屬於敏感資訊，請注意千萬不要上傳到 GitHub 中，將該配置資訊從 cloudbaserc.json 中刪除！

既然不能上傳的話，我們應該如何配置呢，答案很簡單，使用 GitHub secret 即可。需要在騰訊雲控制台新建秘鑰，新建完成後，打開你的 GitHub 倉庫進行如下設置：

創建 ENVID、SECRETID、SECRETKEY 三條 secret，其中 ENVID 在應用列表中可見，配置完成後如下所示：

接下來在項目的 .github/workflows 目錄下創建 deploy.yml 文件，內容如下：

name: 自動化部署

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: deploy
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Deploy to Tencent CloudBase
        uses: TencentCloudBase/cloudbase-action@v2
        with:
          secretId: ${{ secrets.SECRETID }}
          secretKey: ${{ secrets.SECRETKEY }}
          envId: ${{ secrets.ENVID }}

然後將你的項目程式碼 push 到 GitHub 就可以完成自動化部署了，之後就可以專心進行文檔編寫，無需關心伺服器維護這樣的事情了。

快樂搬磚~

總結

像騰訊雲 cloudbase 這樣的雲服務可以說真的方便了很多，可以直接部署自己的靜態部落格或者文檔等站點，一鍵部署，無需運維，豈不美哉。

前面說到筆者最近正在寫 lodash 源碼解析，地址是 lodash.lcs.show，GitHub 地址為 //github.com/jacob-lcs/lodash-source-code-analysis當然還處於剛開始的階段，大家有興趣的話歡迎關注~

Tags: 前端學習