Serverless實踐-靜態網站託管

Serverless實踐-靜態網站託管

超多圖預警！！！

本文旨在幫助不懂運維/網路/伺服器知識的小白，在不租用雲伺服器的情況下，實現Web站點的上線部署

適合邊看文章邊跟著動手做

包含使用Github Action實現持續整合的步驟，繫結自定義域名等等

該手把手Serverless實踐系列預計會出幾篇包含靜態站點，雲函式，後端服務等等

如有表述不清，內容錯誤等還請評論區斧正

準備工作

這裡採用騰訊雲提供的Serveless服務

very very very cheap === free

• 註冊騰訊雲賬號

建立雲開發環境

進入控制檯皮膚，通常在首頁右上角

然後在左上角的雲產品列表中找到雲開發CloudBase

然後你能看到如下的介面

點選新建，可以看見有很多模板可供選擇，我們們這裡選擇Vue應用，當然你也可以選擇其它模板，我們主要是獲得其生成的一個cloudbaserc.json檔案，後文會詳細介紹這個配置檔案

填寫環境名稱，選擇按量計費（非常非常便宜），勾上同意，能勾上免費就勾上免費資源

填寫完成後點選下一步

點選立即開通

接下來你能在當前頁面看到剛剛建立的應用，記住這個環境id 後面會用上

賴心等待幾分鐘就建立完成了

線上訪問地址

點選建立完成的卡片

選擇左側選單中的靜態網站託管

這裡能看到模板專案部署線上上的生產環境程式碼與提供的線上域名

例如圖中的：http://kerno-photo-0got9tjdb1cb34fe-1256505457.tcloudbaseapp.com/vue/

模板的原始碼

所有的模板原始碼均在Github：CloudBase Templates

我們們上面的Vue專案模板原始碼在此處

在專案原始碼中我們就可以看到cloudbaserc.json檔案

cloudbaserc.json配置檔案示例

完整的配置項示例參考$schema

配置檔案需要自己修改/關注的欄位如下：

• envId：環境id，上文有說到獲取的位置
• region：環境所在地區，上海（ap-shanghai）,廣州（ap-guangzhou）
• framework
  • name:應用名稱
  • plugins/client/inputs
    • installCommand:安裝依賴的指令
    • buildCommand:構建專案指令
    • outputPath:用於部署的本地靜態檔案目錄
    • cloudPath：線上訪問的基礎路徑

在我們們專案的根目錄下建立這個cloudbaserc.json檔案

最簡單專案

目錄如下

.
├── cloudbaserc.json
└── index.html

這裡用到的最簡單的cloudbaserc.json如下

{
    "version": "2.0",
    "envId": "kerno-photo-0got9tjdb1cb34fe",
    "region": "ap-shanghai",
    "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
    "functionRoot": "cloudfunctions",
    "framework": {
      "name": "kerno-photo-web",
      "plugins": {
        "client": {
          "use": "@cloudbase/framework-plugin-website",
          "inputs": {
            "outputPath": "/",
            "cloudPath": "/"
          }
        },
        "auth": {
          "use": "@cloudbase/framework-plugin-auth",
          "inputs": {
            "configs": [
              {
                "platform": "NONLOGIN",
                "status": "ENABLE"
              }
            ]
          }
        }
      }
    }
  }

運用了構建工具的專案

推薦的cloudbaserc.json內容如下

{
    "version": "2.0",
    "envId": "kerno-photo-0got9tjdb1cb34fe",// 環境id
    "region": "ap-shanghai",  // 環境所在地區
    "$schema": "https://framework-1258016615.tcloudbaseapp.com/schema/latest.json",
    "functionRoot": "cloudfunctions",
    "framework": {
      "name": "kerno-photo-web",// 應用名稱
      "plugins": {
        "client": {
          "use": "@cloudbase/framework-plugin-website",
          "inputs": {
            "installCommand": "yarn install --prefer-offline --no-audit --progress=false", // 安裝依賴的指令
            "buildCommand": "npm run build",    // 構建專案指令
            "outputPath": "dist",   // 用於部署的靜態檔案目錄
            "cloudPath": "/",   // 線上的基礎路徑
            "envVariables": {
              "VUE_APP_ENV_ID": "{{env.ENV_ID}}"
            }
          }
        },
        "auth": {
          "use": "@cloudbase/framework-plugin-auth",
          "inputs": {
            "configs": [
              {
                "platform": "NONLOGIN",
                "status": "ENABLE"
              }
            ]
          }
        }
      }
    }
  }

部署上線

前置環境

• Node.js

確保電腦上有Node.js環境，沒有可參考菜鳥教程：Node.js 安裝

開啟你的終端工具檢視是否擁有Node環境

node -v

@cloudbase/cli

安裝@cloudbase/cli工具

npm install -g @cloudbase/cli

驗證是否安裝完成

tcb -v

部署

例專案目錄：

.
├── cloudbaserc.json
└── index.html

在專案跟路徑依次執行如下指令：

登入

tcb login

部署

tcb framework deploy

此時靜靜等待幾秒，出現此圖說明部署成功

示例訪問地址：https://kerno-photo-0got9tjdb1cb34fe-1256505457.tcloudbaseapp.com/

可以看到我們的Hello World已經上去了

到此從0-1的建立應用到部署上線的流程都走完了

後續將會補充一些額外的內容，需要有一些相關知識的基礎

繫結自定義域名

申請SSL證書

首先為域名申請SSL證書

選擇免費的

然後下一步填寫必要的資訊

選擇DNS驗證

按要求新增一條解析規則

我這裡域名是在阿里雲上購買的

按要求新增解析

新增完成後，點選查詢域名驗證狀態即可，申請完成後如下圖所示

繫結域名

在靜態網站託管tab 基礎配置中新增自定義域名

彈窗中輸入剛剛申請證書用的域名

根據要求新增CName

上述新增解析步驟一樣

到此為止自定義域名就搞定了

我們訪問一下試試：photo.kerno.sugarat.top

SPA單頁應用的額外配置

需要新增一條404的重定向配置，配置地方如下

接入Github Action持續整合

建立main.yml

根目錄下建立.github/workflows/main.yml檔案

.github
└── workflows
    └── main.yml

main.yml檔案內容如下

# This is a basic workflow to help you get started with Actions

name: prod-CI

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the master branch
  push:
    branches: [ main ] # push到main分支上時觸發
  pull_request:
    types: [ assigned ]
    branches: [ main ] # 合併pr到main分支上時觸發

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      # 配置rsa金鑰自動登陸
      - name: Deploy to Tencent CloudBase
        uses: TencentCloudBase/cloudbase-action@v2
        with:
          secretId: ${{secrets.SECRET_ID}}
          secretKey: ${{secrets.SECRET_KEY}}
          envId: ${{secrets.ENV_ID}}

倉庫中配置Secrets

在倉庫的Settings->Secrets 皮膚中新建secret

新增如下三個：

• SECRET_ID:獲取地址或參看下圖
• SECRET_KEY:獲取地址或參看下圖
• ENV_ID:應用的envid

新增完成後如下圖所示

推送配置檔案

接下來只需要將main.yml檔案推送到Github上即可

git add .github

git commit -m "chore: 新增main.yml檔案"

git push

檢視Action進度

此時開啟倉庫就能看見commit 資訊旁邊有個點

在Action皮膚中也能看見任務的執行狀態，點選可檢視詳細進度

執行完成後如下圖所示

參考資料

• 文件:雲開發 CloudBase