跳到主要内容
支持地域：上海

部署方式

静态网站托管支持三种部署方式：上传代码包/文件夹、从官方模板创建、Git 仓库部署。本文档介绍如何使用这些部署方式，配置构建命令、设置部署路径，以及常见前端框架的部署方案。

部署入口​

前往 云开发控制台 - 静态网站托管

部署方式​

方式一：上传代码包/文件夹​

适用场景：本地已有项目代码，希望快速部署。

上传代码包​

准备代码包：

支持上传以下格式的代码包：

  • .zip 格式（推荐）

代码包要求：

  • 代码包应包含完整的前端项目源代码

部署步骤：

  1. 在「静态网站托管」页面，点击「新建部署」
  2. 选择「上传代码包」
  3. 点击「选择文件」，上传本地 ZIP 文件
  4. 配置构建参数 详见下文
  5. 点击「部署」

上传文件夹​

部署步骤：

  1. 在「静态网站托管」页面，点击「新建部署」
  2. 选择「上传文件夹」
  3. 选择本地项目文件夹
  4. 配置构建参数（详见下文）
  5. 点击「开始部署」
提示

上传代码包之前，可以先删除 node_modules、.git 等常见的非必要目录，避免上传文件过大，发生上传失败的情况。

方式二：从官方模板创建​

适用场景：快速创建新项目，基于最佳实践模板开发。

支持的官方模板：

目前已覆盖四大主流前端技术栈，开发者可根据团队技术偏好快速创建项目：

  • React Web 应用模板：基于 Create React App 创建的标准 React 项目，适用于 SPA 应用、后台管理系统等场景
  • Vue Web 应用模板：基于 Vue CLI 创建的标准 Vue 3 项目，适用于 SPA 应用、中后台系统等场景
  • Nextjs Web 应用模板：基于 Next.js、React 和云开发 CloudBase 的 SSG 静态站点模板，适用于企业官网、博客、文档站等场景
  • Nuxt Web 应用模板：基于 Nuxt 3、Vue 3 和云开发 CloudBase 的 SSG 静态站点模板，适用于内容型网站、营销落地页等场景

部署步骤：

  1. 在「静态网站托管」页面，点击「新建部署」
  2. 选择「从模板创建」
  3. 选择模板类型（React / Vue / Next.js / Nuxt）
  4. 配置构建参数 详见下文
  5. 点击「部署」

模板特点：

  • ✅ 开箱即用，无需配置
  • ✅ 集成 CloudBase SDK，快速调用云开发能力
  • ✅ 集成最佳实践
  • ✅ 自动配置构建命令
  • ✅ 更新部署

方式三：Git 仓库部署​

适用场景：持续集成，代码更新自动触发部署。

个人仓库（推荐）​

支持从您的 Git 仓库直接部署：

  • GitHub
  • GitLab
  • Gitee（码云）
  • 腾讯工蜂

部署步骤：

  1. 在「静态网站托管」页面，点击「新建部署」
  2. 选择「Git 仓库」
  3. 选择「个人仓库」
  4. 授权访问您的 Git 平台账号
  5. 选择要部署的仓库和分支
  6. 配置构建参数
  7. 点击「部署」

公开仓库​

支持从任意公开的 Git 仓库部署：

部署步骤：

  1. 在「静态网站托管」页面，点击「新建部署」
  2. 选择「Git 仓库」
  3. 选择「公开仓库」
  4. 输入仓库 URL（如 https://github.com/username/repo.git）
  5. 选择分支（默认 main 或 master）
  6. 配置构建参数
  7. 点击「部署」

方式四：使用 CLI 命令部署​

前置条件​

全局安装 CloudBase CLI 并登录：

npm i -g @cloudbase/cli
tcb login

更多安装方式（yarn / pnpm）、登录方式（API 密钥 / CI 环境 / 临时密钥等）及网络问题排查，请参考 CLI 安装文档 →

部署步骤​

在项目根目录执行以下任意一种等价命令：

# 完整命令（推荐）
tcb app deploy --framework vite -e my-env-id

# 顶层别名
tcb deploy --framework vite -e my-env-id

# 裸命令：交互式引导部署
tcb

常用参数示例：

# Next.js 项目，指定构建产物目录
tcb app deploy --framework next --output-dir .next -e my-env-id

# Monorepo 场景：指定项目子目录
tcb app deploy --cwd ./frontend --framework react -e my-env-id

# 纯静态项目（跳过构建）
tcb app deploy --framework static --build-command "" --output-dir ./public -e my-env-id

# CI/CD 场景：跳过确认，覆盖已有应用
tcb app deploy --framework react --force -e my-env-id

通过 cloudbaserc.json 零参数部署​

在项目根目录配置 cloudbaserc.json，后续只需执行 tcb 即可完成部署：

{
  "version": "2.0",
  "envId": "my-env-id",
  "app": {
    "serviceName": "my-app",
    "framework": "react",
    "installCommand": "npm install",
    "buildCommand": "npm run build",
    "outputDir": "build",
    "deployPath": "/my-app",
    "envVariables": {
      "API_URL": "https://api.example.com"
    }
  }
}
自动保存配置

首次部署成功后，CLI 会自动将本次部署参数写回 cloudbaserc.json，后续部署无需重复输入。

支持的框架类型​

--framework 支持以下取值：react / vue / vite / next / nuxt / angular / static。未指定时 CLI 会按 Next.js > Nuxt > Angular > Vite > Vue CLI > React > 静态 HTML 顺序自动检测。

相关命令​

命令说明
tcb app list查看当前环境的应用列表
tcb app info <serviceName>查看应用详情（状态、版本、访问域名）
tcb app versions list <serviceName>查看历史部署版本
tcb app delete <serviceName>删除应用记录

完整命令参数、配置字段优先级、版本管理等详见 CLI 应用部署文档 →