与Git平台CI/CD集成
随着前端项目的日益复杂，自动化部署成为了提升开发效率、保证代码质量的关键一环。腾讯云CloudBase（云开发）提供的静态托管服务，结合其强大的CLI工具，可以轻松实现前端项目的快速部署。
本文将详细介绍如何利用CloudBase CLI工具，配合GitHub Actions、GitLab CI/CD和Gitee Go等主流Git平台的流水线能力，实现Git仓库中前端项目的自动部署到CloudBase静态托管服务。
前置准备
安装CLI工具
# 全局安装（推荐）
npm install -g @cloudbase/cli
# 验证安装
tcb --version
💡 提示：如果尚未安装，请参考 CLI安装指南
获取API密钥
- 登录 腾讯云控制台/访问管理/API密钥管理
- 创建或获取现有的
SecretId和SecretKey - 记录您的云开发环境ID（在云开发控制台可查看）
⚠️ 安全提醒：请妥善保管您的API密钥，不要在代码中硬编码，务必使用CI/CD平台的密钥管理功能
准备项目配置
确保您的项目具备以下条件：
- ✅ 项目根目录包含构建脚本（如
npm run build） - ✅ 构建后生成静态文件目录（如
dist/、build/等） - ✅ 项目可以在CI/CD环境中正常构建
- ✅ 已配置正确的Node.js版本
平台集成指南
GitHub Actions
GitHub Actions是GitHub提供的CI/CD服务，可以直接在GitHub仓库中配置工作流。
步骤1：配置GitHub Secrets
在您的GitHub仓库中，依次点击 Settings → Secrets and variables → Actions → New repository secret。
添加以下Secrets：
TCB_SECRET_ID: 您的腾讯云SecretIdTCB_SECRET_KEY: 您的腾讯云SecretKeyTCB_ENV_ID: 您的云开发环境ID
💡 多环境提示：建议为不同环境创建不同的Secrets，如
TCB_ENV_ID_DEV、TCB_ENV_ID_PROD
步骤2：创建工作流文件
在项目根目录创建 .github/workflows/deploy.yml ：
示例参考：
name: Deploy to CloudBase Static Hosting
on:
push:
branches:
- main # 主分支推送时触发
pull_request:
branches:
- main # PR时触发（可选）
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '18'
cache: 'npm' # 启用npm缓存加速构建
- name: Install dependencies
run: npm ci # 使用npm ci替代npm install，更适合CI环境
- name: Build project
run: npm run build
- name: Install CloudBase CLI
run: npm install -g @cloudbase/cli
- name: Login CloudBase CLI
run: tcb login --apiKeyId ${{ secrets.TCB_SECRET_ID }} --apiKey ${{ secrets.TCB_SECRET_KEY }}
- name: Deploy to CloudBase Static Hosting
run: tcb hosting deploy ./dist /home -e ${{ secrets.TCB_ENV_ID }}
配置参数说明
静态托管命令具体参考：CLI管理
| 参数 | 说明 | 示例 |
|---|---|---|
./dist | 构建产物目录 | ./build 、 ./public |
/home | 云端目标路径 | / 、 /static |
GitLab CI/CD
GitLab CI/CD是GitLab内置的CI/CD服务，通过 .gitlab-ci.yml 文件进行配置。
步骤1：配置CI/CD变量
在GitLab项目中，依次点击 Settings → CI/CD → Variables → Add variable。
添加以下变量：
TCB_SECRET_ID: 您的腾讯云SecretIdTCB_SECRET_KEY: 您的腾讯云SecretKeyTCB_ENV_ID: 您的云开发环境ID
🔒 安全建议：将变量标记为 "Protected" 和 "Masked" 以增加安全性
步骤2：创建 .gitlab-ci.yml 文件
在项目根目录创建 .gitlab-ci.yml ：
示例参考：
stages:
- build
- deploy
variables:
NODE_VERSION: "18"
CACHE_KEY: "$CI_COMMIT_REF_SLUG-$CI_PROJECT_DIR"
# 缓存配置
cache:
key: ${CACHE_KEY}
paths:
- node_modules/
- .npm/
build:
stage: build
image: node:18-alpine
before_script:
- npm config set cache .npm
- npm ci
script:
- npm run build
artifacts:
paths:
- dist/
expire_in: 1 hour
only:
- main
- merge_requests
deploy:
stage: deploy
image: node:18-alpine
dependencies:
- build
before_script:
- npm install -g @cloudbase/cli
script:
- tcb login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY
- tcb hosting deploy ./dist /home -e $TCB_ENV_ID
only:
- main
when: on_success
GitLab CI/CD 特性
- Pipeline缓存：自动缓存
node_modules和.npm目录 - Artifacts管理：构建产物在stages间传递
- 环境管理：支持多环境部署和环境变量
- 条件部署：基于分支的条件部署
Gitee Go
Gitee Go是Gitee（码云）提供的CI/CD服务，语法与GitHub Actions相似。
步骤1：配置环境变量
在Gitee仓库中，依次点击 管理 → WebHooks → Gitee Go → 环境变量。
添加以下环境变量：
TCB_SECRET_ID: 您的腾讯云SecretIdTCB_SECRET_KEY: 您的腾讯云SecretKeyTCB_ENV_ID: 您的云开发环境ID
🔐 安全提示：勾选"敏感信息"以保护您的密钥
步骤2：创建工作流文件
在项目根目录创建 .gitee/workflows/deploy.yml ：
示例参考：
name: Deploy to CloudBase Static Hosting
on:
push:
branches:
- main # 主分支推送时触发
pull_request:
branches:
- main # PR时触发（可选）
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: 检出代码
uses: actions/checkout@v3
- name: 设置 Node.js 环境
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm' # 启用npm缓存加速构建
- name: 安装依赖
run: npm ci # 使用npm ci替代npm install，更适合CI环境
- name: 构建项目
run: npm run build
- name: 安装 CloudBase CLI
run: npm install -g @cloudbase/cli
- name: 登录 CloudBase CLI
run: tcb login --apiKeyId ${{ secrets.TCB_SECRET_ID }} --apiKey ${{ secrets.TCB_SECRET_KEY }}
- name: 部署到 CloudBase 静态托管
run: tcb hosting deploy ./dist /home -e ${{ secrets.TCB_ENV_ID }}
- name: 部署成功通知
if: success()
run: echo "🎉 部署成功！项目已发布到 CloudBase 静态托管"
- name: 部署失败通知
if: failure()
run: echo "❌ 部署失败，请检查配置和日志"