Gitlab CI 自动化部署

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持

本文使用了create-react-app创建了一个 React 应用，并把该应用部署到腾讯云的静态网站托管。

作者介绍

钟炜达，任职于腾讯在线教育部 IMWEB 团队，是一名前端开发工程师。有丰富 Web 应用开发经验和在前端工程化方面有较多的实践。

GitLab 中创建 test-cra 项目

到 GitLab 首页，点击NewProject创建新的工程

Project Name和Project Slug都填上test-cra，点击Create Project

创建 web 应用

在本地环境通过create-react-app创建了一个名为test-cra的项目


yarn create react-app test-cra

设置 git 相关设置，并上传应用到 GitLab


cd test-cra

git init

# 这里需要注意username为你的gitlab账户名

git remote add origin git@gitlab.com:username/test-cra.git

git add .

git commit -m "Initial commit"

git push -u origin master

接下来到腾讯云中创建云开发环境

创建云开发环境

输入网址：https://console.cloud.tencent.com/tcb/env/index，如果没有授权会弹出以下画面。

点击访问管理，进入授权。

创建一个云开发环境。这里命名环境为test-cra。

设置 SecretId 和 SecretKey

输入网址：https://console.cloud.tencent.com/cam/capi点击新建秘钥即可。

GitLab CI 设置

SecretId 和 SecretKey 属于敏感数据，不应该直接写到 CI 配置文件中。

回到刚刚创建的 GitLab 项目，找到 Settings->CI/CD

找到 Variables 项如图新建 3 个 key，SecretId、SecretKey 和 EnvId。并输入对应的 value 值。注意必须要开启protected和masked，这样能有效保证数据保密和安全。

在云开发面板中，找到环境设置中的环境 ID。EnvId 的 value 为环境 ID

创建.gitlab-ci.yml 配置文件

在本地工程test-cra的根目录中创建.gitlab-ci.yml文件

.gitlab-ci.yml配置文件如下，这里可查看更多的gitlab ci 配置


image: node:12.16.2

stages:

  - build

  - deploy


build:

  stage: build

  script:

    - npm i

    - npm run build

  artifacts:

    paths:

      - ./build/

  only:

    - maste


deploy:

  stage: deploy

  script:

    - cd ./build

    - npm i -g @cloudbase/cli

    - tcb login --apiKeyId $SecretId --apiKey $SecretKey

    - tcb hosting:deploy -e $EnvId

  only:

    - master

使用 node12 的镜像作为基础环境
整个 CI 流程有 2 个stage

构建阶段（build）：生成构建产物，并把构建产物进行存档（artifacts 操作）
部署阶段（deploy）：
1. 需要使用腾讯云提供的 cli 工具（@cloudbase/cli）
2. 使用 API 秘钥直接登录，这里需要使用到上一步的SecretId和SecretKey环境变量
3. 进入构建产物目录（这里为./build目录），执行全量部署。这里需要使用上一步的EnvId环境变量。