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
新增如下三個:
新增完成後如下圖所示
推送配置檔案
接下來只需要將main.yml檔案推送到Github上即可
git add .github
git commit -m "chore: 新增main.yml檔案"
git push
檢視Action進度
此時開啟倉庫就能看見commit 資訊旁邊有個點
在Action皮膚中也能看見任務的執行狀態,點選可檢視詳細進度
執行完成後如下圖所示