Skip to main content

CI/CD Integration with Git Platform

As frontend projects grow increasingly complex, automated deployment has become a critical component for enhancing development efficiency and ensuring code quality. The static hosting service provided by Tencent Cloud CloudBase (Cloud Development), combined with its powerful CLI tool, enables rapid deployment of frontend projects with ease. This article details how to leverage the CloudBase CLI tool alongside the pipeline capabilities of mainstream Git platforms like GitHub Actions, GitLab CI/CD, and Gitee Go to automate the deployment of frontend projects from Git repositories to the CloudBase static hosting service.

1. Overview of CloudBase Static Hosting and CLI Tool​

CloudBase Static Hosting: CloudBase provides high-performance, highly available static website hosting services, supporting features such as custom domains, CDN acceleration, HTTPS, etc., making it highly suitable for deploying frontend SPA applications, blogs, documentation sites, and more.

CloudBase CLI tool: CloudBase CLI (cloudbase-cli) is a command-line tool for managing CloudBase resources, performing local development and deployment. Among them, static hosting-related commands are key to achieving automated deployment.

Before you begin, ensure you have:

  1. Created an available CloudBase environment. You can create one at the CloudBase console.
  2. Installed the Node.js environment.
  3. Globally installed CloudBase CLI: npm install -g @cloudbase/cli
  4. Logged in to CloudBase CLI: tcb login

2. Core Deployment Commands​

The core command for automated deployment is tcb hosting deploy. This command is used to deploy local files to CloudBase static hosting.

Basic usage:

tcb hosting deploy [filePath] --envId [envId] --containerPath [containerPath]
  • filePath: The local folder path to deploy, usually the dist or build directory of a frontend project.
  • --envId: Your CloudBase environment ID.
  • --containerPath: The path for deployment to CloudBase static hosting, defaulting to /, which indicates deployment to the root directory.

Example: Deploy the dist folder in the current directory to the root directory of static hosting in the specified environment:

tcb hosting deploy dist --envId your-env-id

3. CI/CD Integration with Git Platform​

The following describes how to integrate with GitHub, GitLab, and Gitee CI/CD pipelines.

1. GitHub Actions​

GitHub Actions is a CI/CD service provided by GitHub, allowing workflows to be configured directly in GitHub repositories.

Step 1: Obtain the CloudBase Secret Key

To enable GitHub Actions to deploy to your CloudBase environment, you need to obtain the Tencent Cloud API key (SecretId and SecretKey).

Step 2: Add Secrets to the GitHub Repository

In your GitHub repository, navigate to "Settings" -> "Secrets and variables" -> "Actions" -> "New repository secret". Add the following two Secrets:

  • TCB_SECRET_ID: Your Tencent Cloud SecretId
  • TCB_SECRET_KEY: Your Tencent Cloud SecretKey
  • TCB_ENV_ID: Your CloudBase environment ID

Step 3: Create a GitHub Actions Workflow File

Create a .github/workflows/deploy.yml file in your project root directory with the following content:

name: Deploy to CloudBase Static Hosting

on:
  push:
    branches:
      - main # or master, depending on your main branch name

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v4

    - name: Set up Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '18' # Select Node.js version based on your project requirements

    - name: Install dependencies
      run: npm install

    - name: Build project
      run: npm run build # Replace with your project build command

    - name: Install CloudBase CLI
      run: npm install -g @cloudbase/cli

    - name: Deploy to CloudBase Static Hosting
      env:
        # TCB_SECRET_ID and TCB_SECRET_KEY will be automatically recognized by the CLI
        TCB_SECRET_ID: ${{ secrets.TCB_SECRET_ID }}
        TCB_SECRET_KEY: ${{ secrets.TCB_SECRET_KEY }}
      run: |
        tcb hosting deploy ./dist --envId ${{ secrets.TCB_ENV_ID }} --containerPath / # Replace ./dist with your build output directory

Note:

  • on: push: branches: [main]: Triggers the workflow when there is a new push to the main branch.
  • npm run build: Replace with your project's actual build command, such as yarn build, pnpm build, etc.
  • ./dist: Replace with your project's build output directory, typically build, dist, etc.

2. GitLab CI/CD​

GitLab CI/CD is GitLab's built-in CI/CD service, configured via the .gitlab-ci.yml file.

Step 1: Obtain the CloudBase Secret Key

Similar to GitHub Actions, obtain your Tencent Cloud API key (SecretId and SecretKey).

Step 2: Add CI/CD Variables in the GitLab Project

In your GitLab project, navigate to "Settings" -> "CI/CD" -> "Variables" -> "Add variable". Add the following variables:

  • TCB_SECRET_ID: Your Tencent Cloud SecretId (select Variable for the type)
  • TCB_SECRET_KEY: Your Tencent Cloud SecretKey (select Variable for the type)
  • TCB_ENV_ID: Your CloudBase environment ID (select Variable for the type) It is recommended to mark them as "Protected" and "Masked" for enhanced security.

Step 3: Create the .gitlab-ci.yml file

Create the .gitlab-ci.yml file in the root directory of your project with the following content:

stages:
  - build
  - deploy

variables:
  # Setting the Node.js version
  NODE_VERSION: '18'

build_project:
  stage: build
  image: node:${NODE_VERSION}-slim # Using the Node.js image
  script:
    - npm install
    - npm run build # Replace with your project build command
  artifacts:
    paths:
      - dist/ # Cache build artifacts for use in the deployment stage
    expire_in: 1 day # Cache expiration time

deploy_to_cloudbase:
  stage: deploy
  image: node:${NODE_VERSION}-slim # Using the Node.js image
  before_script:
    - npm install -g @cloudbase/cli
  script:
    - tcb hosting deploy ./dist --envId $TCB_ENV_ID --containerPath / # Replace ./dist with your build output directory
  only:
    - main # or master, depending on your main branch name

Note:

  • stages: defines two stages, build and deploy.
  • build_project: responsible for installing dependencies, building the project, and caching the build artifacts.
  • deploy_to_cloudbase: responsible for installing the CloudBase CLI and executing deployment commands.
  • $TCB_SECRET_ID and $TCB_SECRET_KEY will be automatically recognized by the CLI, eliminating the need to explicitly pass them in the command.
  • only: - main: Only pushes to the main branch will trigger the deployment.

3. Gitee Go​

Gitee Go is a CI/CD service provided by Gitee, with a configuration method similar to GitLab CI/CD, using YAML files in the .gitee/workflows/ directory.

Step 1: Obtain the CloudBase Secret Key

Similar to GitHub Actions, obtain your Tencent Cloud API key (SecretId and SecretKey).

Step 2: Add Environment Variables in the Gitee Project

Navigate to "Manage" -> "WebHooks" -> "Gitee Go" -> "Environment Variables" in your Gitee repository. Add the following environment variables:

  • TCB_SECRET_ID: Your Tencent Cloud SecretId
  • TCB_SECRET_KEY: Your Tencent Cloud SecretKey
  • TCB_ENV_ID: Your CloudBase environment ID Check "Sensitive Information" to protect your secret key.

Step 3: Create a Gitee Go Workflow File

Create a .gitee/workflows/deploy.yml file in your project root directory with the following content:

name: Deploy to CloudBase Static Hosting

on:
  push:
    branches:
      - master # or main, depending on your main branch name

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '18' # Select Node.js version based on your project requirements

    - name: Install dependencies
      run: npm install

    - name: Build project
      run: npm run build # Replace with your project build command

    - name: Install CloudBase CLI
      run: npm install -g @cloudbase/cli

    - name: Deploy to CloudBase Static Hosting
      env:
        TCB_SECRET_ID: ${{ secrets.TCB_SECRET_ID }}
        TCB_SECRET_KEY: ${{ secrets.TCB_SECRET_KEY }}
        TCB_ENV_ID: ${{ secrets.TCB_ENV_ID }}
      run: |
        tcb hosting deploy ./dist --envId ${{ secrets.TCB_ENV_ID }} --containerPath / # Replace ./dist with your build output directory

Note:

  • The syntax of Gitee Go is very similar to GitHub Actions.
  • Environment variables can be directly accessed via secrets.TCB_SECRET_ID and similar methods, but must be configured in Gitee Go's environment variables.
  • Modify npm run build and ./dist according to your actual project requirements.

4. Frequently Asked Questions and Precautions​

  1. Build output directory: Ensure that you confirm the static files output directory after building your frontend project. For example, Vue CLI typically uses dist, while Create React App uses build.
  2. Node.js version: Select the appropriate Node.js version based on your project requirements.
  3. Cache dependencies: In the CI/CD process, consider caching node_modules to accelerate subsequent builds. For example, caching can be configured in both GitHub Actions and GitLab CI/CD.
  4. Environment variable security: Configure sensitive information such as API keys as Secrets or Protected Variables in your CI/CD platform, and never write them directly into the code repository.
  5. Deployment failure troubleshooting: If the deployment fails, check the log output of the CI/CD pipeline, which usually contains detailed error messages. Inspect the CloudBase CLI output, network connectivity, permission settings, etc.
  6. containerPath: If your project needs to be deployed to a subdirectory of static hosting, correctly set the --containerPath parameter. For example, to deploy to the /my-app directory: tcb hosting deploy ./dist --envId your-env-id --containerPath /my-app.
  7. CloudBase CLI version: Ensure the CloudBase CLI version installed in your CI/CD environment is the latest to access the newest features and bug fixes.
  8. Parallel deployment: If your CI/CD triggers too frequently, it may cause excessive updates to CloudBase static hosting. For production environments, it is recommended to trigger deployments only after PRs are merged into the main branch.