小程序云开发环境部署静态网站托管的实战
静态网站托管简介
静态网站托管（Website Hosting，WH）是由云开发提供的便捷、稳定、高拓展性的托管服务，您无需自建服务器，即可一键部署网站应用，将静态网站发布到全网节点，轻松为您的业务增添稳定、高并发、快速访问等能力。此外，您还可以结合云开发的云函数、数据库等能力，将静态网站扩展为带有后台服务端的全栈网站，让您可极速提供网站应用。
在我最近的文章提及的“CMS内容管理系统”是一个React项目，其安装位置在“静态网站托管”的tcb-cms目录中。
这次我就想借助TencentCloudBase/cloudbase-action来完成 Web 端项目的持续集成工作。
云开发的环境设置
首先，我在小程序云开发有两套环境，在发布到web端也会有这两套环境。
development，对应着开发环境，其网址为 https://yzface.hi-our.comproduction，对应着生成环境，其网址为 https://face.hi-our.com
在我的 Taro 版仓库中，我配置了 SERVER_ENV 这个变量来设置当前输出的是什么环境。
// config.js
const env = process.env.SERVER_ENV || 'prod'
module.exports = {
env,
cloudEnv: env === 'prod' ? 'production-xxxxx' : 'development-xxxxx',
}
// app.js
if (process.env.TARO_ENV === 'h5') {
Taro.cloud = tcb.init({
env: config.cloudEnv
})
}
Taro 仓库的编译命令：
{
"scripts": {
"release:yzweb": "SERVER_ENV=yz NODE_ENV=production npm run build:h5",
"release:web": "SERVER_ENV=prod NODE_ENV=production npm run build:h5"
}
}
这里补充一些关于 Taro 的信息
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。
持续集成部署
在 TencentCloudBase/cloudbase-action 中说明了需要在 github action 中配置secretId、secretKey、envId这几个环境变量，但一个 action 配置显然无法完成开发、生产两套环境的持续集成。
我这里给出我的设置
1.x-stable分支：上线验证通过后的代码deploy/cloudbase-development分支：开发测试环境的代码，其action文件为cloudbase-development.ymldeploy/cloudbase-production分支： 正式生产环境的代码，其action文件为cloudbase-production.yml
name: deploy-cloudbase-development # Github Actions 显示的名称
on:
push:
branches: [ deploy/cloudbase-development ] # push到该分支后触发action
pull_request:
branches: [ deploy/cloudbase-development ] # pr到该分支后触发action
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x, 12.x]
steps:
- uses: actions/checkout@v2 # 拉取最新代码
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- run: cd taro/
- run: npm i
- run: npm run release:yzweb --if-present # 编译代码
- name: Deploy static to Tencent CloudBase # 部署到腾讯云云开发cloudBase的静态网站托管上
id: deployStatic
uses: TencentCloudBase/cloudbase-action@v1.1.0
with:
secretId: ${{ secrets.SECRET_ID }}
secretKey: ${{ secrets.SECRET_KEY }}
envId: ${{ secrets.ENV_ID_DEVELOPMENT }} # 注意环境ID为开发环境
staticSrcPath: taro/dist-h5/
绑定域名
绑定自定义域名
默认域名仅供测试使用，限制下行速度100KB/S。如您需要对外正式提供网站服务，请绑定您已备案的自定义域名。
development，对应着开发环境，其网址为 https://yzface.hi-our.comproduction，对应着生成环境，其网址为 https://face.hi-our.com
设置安全域名 在 “环境 => 安全设置 => WEB安全域名” 中绑定对应的测试域名及自定义域名。
文章相关内容：
我是 盛瀚钦，沪江 CCtalk 前端开发工程师，Taro 框架的 issue 维护志愿者，腾讯云云开发布道师，主要侧重于前端 UI 编写和团队文档建设。
最近组建了HiOur开源团队，主要开发Hi头像小程序及相关教程，与云开发 Cloudbase合作举行云开发月度挑战赛。