静态产物托管
直接托管 HTML、CSS、JavaScript、图片与下载文件，适合 SPA、官网、文档站与静态资源。
不止构建前端，
更要可靠交付。
托管 SPA、官网、文档站和静态资源，用 CDN 与 HTTPS 提供访问，再通过自定义域名和路由规则形成正式站点。
Build · Hosting · CDN
01 · Build
npm run build
Docusaurus · 148 pages
→
02 · Upload
Static artifacts
HTML · CSS · JS · Images
→
03 · Deliver
Custom domain
HTTPS · CDN · Route rewrite
assetcachestate
/index.htmlno-cachepublished
/assets/app.8f31.jsimmutableedge ready
/products/database/html200
From commit to edge
构建、检查、部署进入同一条发布路径
流水线先产出可复现的静态文件，再把同一份产物部署到目标环境；域名和 CDN 只负责交付经过验证的结果。
01 · Commit
前端代码进入主干
Git push · CI trigger
→
02 · Verify
安装、构建与检查
npm ci · npm run build
→
03 · Publish
部署静态产物
Hosting · CDN · Domain
jobresultstate
build:websitezh-Hans · enpassed
broken-links0 errorspassed
deploy:hostingdist → /published
前端上线所需的交付原语
从静态文件到用户域名，覆盖构建产物、路由、证书、缓存与自动化发布。
CDN 与 HTTPS
资源缓存在 CDN 边缘节点，默认访问入口内置 HTTP 与 HTTPS，无需运行 Web 服务器。
自定义域名
绑定业务域名并配置对应 CDN 类型、证书与 DNS，让用户通过稳定入口访问站点。
SPA 路由回退
React Router 或 Vue Router 使用 history 模式时，把未命中文件的路径重写到 index.html。
前端框架构建
React、Vue、Angular、VitePress、Astro 等框架可以在线构建；Next.js 仅限静态导出场景。
CLI 与 CI/CD
在本地上传既有产物，或在持续集成中完成依赖安装、构建、检查与部署。
“
静态托管不是把文件‘丢上去’，而是让每次构建都有清晰产物、固定入口和可重复的交付过程。产品设计原则
A domain is the product entrance
域名、HTTPS、CDN 与路由一起设计
先确定根路径与子路径的产品边界，再配置域名、缓存和重写，避免页面做好后才补路由模型。
查看自定义域名REQUEST ROUTE
domain自定义域名
transportHTTP / HTTPS
deliveryCDN 边缘缓存
fallbackSPA 路由重写
从本地构建，到流水线发布
示例只描述现有托管和 CLI 能力；当前官网仓库的正式流水线仍留到上线阶段单独创建。
Reproducible build
先让框架产出确定的静态目录
Vite 的 base 必须和部署路径一致；其他静态生成器也应显式固定输出目录与资源前缀。
- 根路径部署时 base 使用 /
- 子路径部署时前后斜杠都要保留
- SSR 或服务端进程改用 CloudRun
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
base: '/',
build: {
outDir: 'dist'
}
})
// npm run build
// dist/index.html + dist/assets/*CLI deployment
把已验证产物上传到目标环境
hosting deploy 不负责安装和构建，只上传指定目录；因此流水线可以在部署前执行自己的质量门禁。
- 目标环境通过 -e 显式指定
- 可选 cloudPath 部署到子路径
- 域名切换不应替代产物验证
# 登录并选择目标环境
tcb login
# 构建由项目自己的脚本完成
npm ci
npm run build
# 将静态产物部署到根路径
tcb hosting deploy dist -e <env-id>Continuous delivery
在 CI 中固定 Node、构建与部署步骤
凭据从流水线 Secret 注入，不写入仓库；示例展示能力结构，不会在本地阶段创建真实部署任务。
- npm ci 保持依赖可复现
- 先构建并检查，再安装 CLI 部署
- 开发、预发与生产使用独立环境变量
name: deploy-website
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
cache: npm
- run: npm ci
- run: npm run build
- run: npm install -g @cloudbase/cli
- run: tcb hosting deploy dist -e "$TCB_ENV_ID"Frontend ecosystem
一个托管入口，服务多种静态前端
只要最终产物是静态文件，就可以进入同一套构建与交付流程。
单页应用
React、Vue、Angular 与其他 SPA。
内容站点
Docusaurus、VitePress、Hugo 与 Hexo。
产品站点
官网、活动页、组件文档与下载资源。
ReactVueAngularViteDocusaurusVitePressAstroHugoHexoStatic ExportCDNHTTPSCustom DomainCI/CD