示例06 静态托管发布与调试

示例06 静态托管发布与调试

对应教程：第 6 章 · 静态托管：前后端一体化部署

1. 初始化托管项目

# 安装 CloudBase CLI
npm install -g @cloudbase/cli

# 登录
tcb login

# 初始化项目
tcb init
​

2. cloudbaserc.json 配置

{
  "envId": "your-env-id",
  "framework": {
    "name": "vue",
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/"
        }
      }
    }
  }
}
​

3. 一键部署

# 构建 + 部署
tcb framework deploy

# 仅部署静态资源
tcb hosting deploy ./dist /
​

4. 前端 SDK 初始化（托管环境下）

import cloudbase from '@cloudbase/js-sdk'

// 托管环境下可省略 env，自动注入
const app = cloudbase.init({
  env: process.env.TCB_ENV || 'your-env-id'
})

// 验证
const db = app.database()
const { data } = await db.collection('articles').limit(1).get()
console.log('数据库连通，获取到:', data.length, '条记录')
​

5. 自定义域名与 HTTPS

# CLI 绑定自定义域名
tcb hosting detail

# 在控制台操作：
# 1. 静态托管 → 设置 → 自定义域名
# 2. 添加域名 → CNAME 解析到平台分配地址
# 3. 申请免费 SSL 证书 → 开启 HTTPS
​