­

Serverless實踐-靜態網站託管

Serverless實踐-靜態網站託管

超多圖預警！！！

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

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

包含使用Github Action實現持續集成的步驟，綁定自定義域名等等

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

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

準備工作

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

very very very cheap === free

創建雲開發環境

進入控制檯面板，通常在首頁右上角

圖片

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

圖片

然後你能看到如下的界面

圖片

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

圖片

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

填寫完成後點擊下一步

圖片

點擊立即開通

圖片

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

圖片

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

線上訪問地址

點擊創建完成的卡片

圖片

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

圖片

這裡能看到模板項目部署在線上的生產環境代碼與提供的線上域名

例如圖中的：//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": "//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": "//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

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

圖片

示例訪問地址：//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

圖片

圖片

添加如下三個：

圖片

添加完成後如下圖所示

圖片

推送配置文件

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

git add .github

git commit -m "chore: 添加main.yml文件"

git push

查看Action進度

此時打開倉庫就能看見commit 信息旁邊有個點

圖片

在Action面板中也能看見任務的執行狀態，點擊可查看詳細進度

圖片

執行完成後如下圖所示

圖片

參考資料

Tags:

VirMach 便宜 VPS

QNews

QNews