【一箭双雕】使用 CODING CI 同时在云开发和 CODING 上部署 React 应用

「云开发静态托管」是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。在过去的几个月中，越来越多的用户支持了静态托管能力，众多开发者也给予了越来越多的关注。
「CODING 静态网站」（原 CODING Pages 服务）是一个面向境外用户的静态网站托管服务，可在中国境外网络下正常访问，但不能确保境内网络正常访问。
云开发的静态网站托管能力，可以为国内用户提供一个非常快速的访问空间，而 CODING 静态网站托管服务对境外用户访问又比较友好，我们为了集两者之优势，会选择把网站部署到两个平台上。
传统的部署方式需要我们进行两次部署操作，费时费力，今天我来介绍一种方法，使用 CODING CI 能力“一箭双雕”，将静态网站同时部署到云开发和 CODING 静态网站托管服务上。
本文将以部署 React 应用为例进行演示操作。

工作流梳理

因为需要使用到 CODING CI，构建一条持续集成流水线是少不了的，第一步我们需要梳理一下工作流。

通过工作流程梳理，我们会发现使用到了两个 Git 仓库，一个是源码仓库，用来存储 React 应用源码，一个是 CODING 静态网站仓库，用来存储 React 打包后产出的构建产物。

用户推送 React 应用源码后，触发流水线拉取代码，对 React 应用进行构建，并生成构建产物，随后进入“部署”阶段，这个阶段有两个并行的步骤，即 Git 推送到 CODING 静态网站仓库和使用 tcb-cli 推送到云开发。当 CODING 静态网站仓库代码变更后触发持续部署到 CODING 静态网站服务。这样就完成了“一次推送部署两地”这种“一箭双雕”的操作。

在 CODING 中创建 DevOps 项目

通过网址 https://e.coding.net 登录 CODING 工作台，进入全部项目模块，新建一个项目。

选择新建项目时的所用到的模板，这里选择 DevOps 模板，进入下一步。

填写项目名称、项目描述，完成创建。

进入项目，创建一个代码仓库用来存储 React 的构建产物（即 CODING 静态网站仓库）。

这里我用来存放 React 构建产物的仓库叫 pages。

通过快速初始化仓库功能，对该仓库进行初始化。

这样我们就在一个项目中有了两个代码仓库。test-cra 用来存储 React 应用源码，pages 用来存储 React 的构建产物。

创建 web 应用

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

yarn create react-app test-cra

设置 git 相关设置，并上传应用到 CODING 源码仓库：

cd test-cra
git init
# 可以点击CODING代码仓库右上角的克隆按钮查看仓库地址
git remote add origin git@e.coding.net:username/test-cra/pages.git
git add .
git commit -m "React Initial commit"
git push -u origin master

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

创建云开发环境

通过网址 https://console.cloud.tencent.com/tcb/env/index 登录云开发控制台，如果没有授权会弹出以下画面。

点击访问管理，进入授权。
创建一个云开发环境，这里命名环境为 mytest。

注意
目前云开发静态网页托管能力仅在腾讯云云开发控制台支持。
仅有付费方式为按量付费的环境可开通静态网页托管能力。
云开发的静态网页托管能力，目前在开通环境时，静态网页托管服务不会直接开通，而是需要您在环境中单独开通。

在云开发控制台，依次点击基础服务、静态网站托管，开通静态网站托管服务。

设置 SecretId 和 SecretKey

在流水线中，一般不会使用特权账号的 SecretKey（主账号的最高权限 SecretKey，拥有腾讯云控制台的所有权），都是按需授权，所以需要对 SecretKey 的权限进行访问控制。
使用主账号登录 https://console.cloud.tencent.com/cam/capi，根据提示创建子用户，选择自定义创建，选择类型为可访问资源并接收消息。
填写用户信息，选择访问方式为编程访问。

对子用户进行权限策略关联，对于云开发产品的访问控制有一个预设策略名字叫 QcloudAccessForTCBRole，对账号授权该策略，将拥有云开发（TCB）对云资源的访问权限。直接在搜索框中搜索该策略即可。

下一步，完成子用户的创建，请保存好 SecretId 和 SecretKey 信息。

CODING CI 设置

凭证和令牌

SecretId 和 SecretKey 信息属于敏感信息，我们需要以 CODING 凭据的形式保存在项目配置中，使用凭据后你的敏感信息将不会出现在构建日志和 Jenkinsfile 中，这样会更加安全。
进入项目，依次选择项目设置、开发者选项、凭据管理，录入一个凭据。

CODING 为我们提供了原生调用腾讯云产品的能力，在这里我们选择凭据类型为云 API 秘钥，填写好凭据名称、SecretId 和 SecretKey 信息，授权在持续集成中使用凭据。

由于我们需要在流水线中执行 Git 推送的操作，我们还需要新建一个用户，授权他推送权限。
进入项目，依次选择项目设置、开发者选项、项目令牌，新建一个项目令牌。

同样的，我们也将这个项目令牌添加到凭据管理中。在这里我们选择凭据类型为“用户名 + 密码”，填写好凭据名称、用户名和密码（与项目令牌的用户名密码对应），授权在持续集成中使用凭据。
添加完毕后，应该可以看到两条凭据信息。

创建构建计划

接下来我们回到项目，选择构建计划模块，创建一个持续集成任务。

选择构建计划模板，CODING 为我们提供了多种模板，这里我们找到基础标签，选择自定义构建过程。

填写计划名称，选择代码源为 CODING 代码仓库，配置来源使用静态配置的 Jenkinsfile。

根据前面我们梳理的流程，开始撰写 Jenkinsfile 文件，这里我们需要选择文本编辑器。

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        echo '[检出]正在从目标代码库检出最新源码...'
        checkout([
          $class: 'GitSCM', branches: [[name: env.GIT_BUILD_REF]],
          userRemoteConfigs: [[
            url: env.GIT_REPO_URL,
            credentialsId: env.CREDENTIALS_ID
          ]]
        ])
        echo '[检出]检出源码成功.'
      }
    }
    stage('构建') {
      steps {
        echo '[构建]react building...'
        sh '''npm install -g
npm run build'''
        echo '[构建]构建完成.'
      }
    }
    stage('推送') {
      parallel {
        stage('推送至CODING') {
          steps {
            echo '[推送]准备将静态文件推送至CODING-Pages仓库...'
            dir('./build') {
              sh '''git init
git add -A
git commit -m "${GIT_COMMIT}"'''
              withCredentials([ usernamePassword(credentialsId:env.GIT_USER,usernameVariable:'GIT_USERNAME',passwordVariable:'GIT_PASSWORD')
                          ]) {
                sh 'git push -u "https://${GIT_USERNAME}:${GIT_PASSWORD}@${CODING_PAGES_REPOSITORY_URL}" master --force'
              }

            }

            echo '[推送]推送至CODING完成.'
          }
        }
        stage('推送至TCB') {
          steps {
            echo '[推送]准备将静态文件推送至TCB.'
            sh 'npm i -g @cloudbase/cli'
            withCredentials([ cloudApi(credentialsId:env.CLOUDAPI_CREDENTIALS,secretIdVariable:'CLOUD_API_SECRET_ID',secretKeyVariable:'CLOUD_API_SECRET_KEY')
                                                                                             ]) {
              sh 'tcb login --apiKeyId "${CLOUD_API_SECRET_ID}" --apiKey "${CLOUD_API_SECRET_KEY}"'
            }
            sh 'tcb hosting:deploy build -e "${TCB_ENV_ID}"'
            echo '[推送]推送至TCB完成.'
          }
        }
      }
    }
    stage('事件消息') {
      steps {
        echo '[事件消息]流水线任务结束.'
      }
    }
  }
}

对 Jenkinsfile 文件进行保存。

流程环境变量配置

点击变量与缓存选项卡，添加构建计划的环境变量。变量名和 Jenkinsfile 文件相对应，请按下表进行添加。

变量名	类别	默认值（备注）
CLOUDAPI_CREDENTIALS	Coding 凭据	云 API 凭据
GIT_USER	Coding 凭据	用户名密码凭据
TCB_ENV_ID	字符串	填写云开发环境 ID
CODING_PAGES_REPOSITORY_URL	字符串	React 构建产物仓库 URL（不带 https）

添加完毕后，应该是这个样子的。

CODING 静态网站设置

进入项目，依次选择持续部署、静态网站。此模块需要“团队所有者”身份进行实名认证。请先完成实名认证。

立即发布静态网站，填写网站名称，选择部署来源为本项目仓库，选择仓库为 React 构建产物仓库（这里我的是 pages 仓库），其他维持默认即可，保存。

测试与验证

通过以上步骤，我们已经构建好了流水线，我们可以使用 push 代码来触发流水线自动部署静态网站到云开发和 CODING。
在 CODING 项目的构建计划中可以看到每一次的构建任务的运行状态。

点击构建任务，进入到任务详情，点击每一个步骤都可以看到日志详情。
我们看到整个流水线已经跑完，状态正常，在日志中也看到部署到云开发和 CODING 的步骤均提示成功。

打开云开发控制台，选择静态网站托管、基础配置，通过默认域名查看静态网站部署情况。

打开 CODING 项目，选择持续部署、静态网站，查看部署记录，并通过访问地址访问网页。