Deployment Methods

Static website hosting supports four deployment methods: uploading code packages/folders, creating from official templates, Git repository deployment, and CLI command deployment. This document introduces how to use these deployment methods, configure build commands, set deployment paths, and deployment solutions for common frontend frameworks.

Quick Start

Deployment Entry

Go to CloudBase Console - Static Website Hosting

Deployment Methods

Method 1: Upload Code Package/Folder

Use case: You already have project code locally and want to deploy quickly.

Upload Code Package

Prepare code package:

Supports uploading code packages in the following formats:

• .zip format (recommended)

Code package requirements:

• The code package should contain the complete frontend project source code

Deployment steps:

1. On the "Static Website Hosting" page, click "New Deployment"
2. Select "Upload Code Package"
3. Click "Select File" to upload a local ZIP file
4. Configure build parameters See below for details
5. Click "Deploy"

Upload Folder

Deployment steps:

1. On the "Static Website Hosting" page, click "New Deployment"
2. Select "Upload Folder"
3. Select the local project folder
4. Configure build parameters (see below for details)
5. Click "Start Deployment"

Tip

Before uploading the code package, you can delete common unnecessary directories such as node_modules, .git, etc., to avoid excessively large uploads that may cause upload failures.

Method 2: Create from Official Template

Use case: Quickly create new projects and develop based on best practice templates.

Supported official templates:

The four mainstream frontend tech stacks are now covered. Developers can quickly create projects based on their team's technical preferences:

• React Web Application Template: Standard React project created based on Create React App, suitable for SPA applications, admin systems, etc.
• Vue Web Application Template: Standard Vue 3 project created based on Vue CLI, suitable for SPA applications, mid/back-office systems, etc.
• Nextjs Web Application Template: SSG static site template based on Next.js, React, and CloudBase, suitable for corporate websites, blogs, documentation sites, etc.
• Nuxt Web Application Template: SSG static site template based on Nuxt 3, Vue 3, and CloudBase, suitable for content websites, marketing landing pages, etc.

Deployment steps:

1. On the "Static Website Hosting" page, click "New Deployment"
2. Select "Create from Template"
3. Select template type (React / Vue / Next.js / Nuxt)
4. Configure build parameters See below for details
5. Click "Deploy"

Template features:

• ✅ Ready to use out of the box, no configuration needed
• ✅ CloudBase SDK integrated for quick access to CloudBase capabilities
• ✅ Integrated best practices
• ✅ Automatically configured build commands
• ✅ Supports online modification and redeployment

Method 3: Git Repository Deployment

Use case: Continuous integration, automatically trigger deployment when code is updated.

Personal Repository (Recommended)

Supports direct deployment from your Git repository:

• GitHub
• GitLab
• Gitee (码云)
• 腾讯工蜂

Deployment steps:

1. On the "Static Website Hosting" page, click "New Deployment"
2. Select "Git Repository"
3. Select "Personal Repository"
4. Authorize access to your Git platform account
5. Select the repository and branch to deploy
6. Configure build parameters
7. Click "Deploy"

Public Repository

Supports deployment from any public Git repository:

Deployment steps:

1. On the "Static Website Hosting" page, click "New Deployment"
2. Select "Git Repository"
3. Select "Public Repository"
4. Enter the repository URL (e.g., https://github.com/username/repo.git)
5. Select branch (default main or master)
6. Configure build parameters
7. Click "Deploy"

Method 4: Deploy via CLI Commands

Use case: Local development, CI/CD pipeline automated deployment, and scenarios requiring rapid iteration via the command line.

v3.0.0+

The tcb app command is available from CloudBase CLI v3.0.0+. The CLI automatically completes the full workflow: install dependencies → build → upload artifacts → bind routes, with no manual file operations required.

Prerequisites

Install CloudBase CLI globally and log in:

npm i -g @cloudbase/cli
tcb login

For more installation options (yarn / pnpm), login methods (API key / CI environment / temporary key, etc.), and network troubleshooting, refer to the CLI Installation Guide →

Deployment Steps

Run any of the following equivalent commands in the project root directory:

# Full command (recommended)
tcb app deploy --framework vite -e my-env-id

# Top-level alias
tcb deploy --framework vite -e my-env-id

# Bare command: interactive guided deployment
tcb

Common parameter examples:

# Next.js project, specify build output directory
tcb app deploy --framework next --output-dir .next -e my-env-id

# Monorepo scenario: specify project subdirectory
tcb app deploy --cwd ./frontend --framework react -e my-env-id

# Pure static project (skip build)
tcb app deploy --framework static --build-command "" --output-dir ./public -e my-env-id

# CI/CD scenario: skip confirmation, overwrite existing application
tcb app deploy --framework react --force -e my-env-id

Zero-parameter Deployment via cloudbaserc.json

Configure cloudbaserc.json in your project root, then simply run tcb for subsequent deployments:

{
  "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"
    }
  }
}

Auto-save configuration

After the first successful deployment, the CLI automatically writes the deployment parameters back to cloudbaserc.json, so subsequent deployments require no repeated input.

Supported Framework Types

--framework supports the following values: react / vue / vite / next / nuxt / angular / static. When not specified, the CLI auto-detects in this priority order: Next.js > Nuxt > Angular > Vite > Vue CLI > React > Static HTML.

Related Commands

Command	Description
tcb app list	View the application list in the current environment
tcb app info <serviceName>	View application details (status, version, access domain)
tcb app versions list <serviceName>	View deployment version history
tcb app delete <serviceName>	Delete application record

For full command parameters, configuration field priorities, version management, and more, see CLI Application Deployment Documentation →