【一箭双雕】使用 CODING CI 同时在云开发和 CODING 上部署 React 应用
「云开发静态托管」是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。在过去的几个月中，越来越多的用户支持了静态托管能力，众多开发者也给予了越来越多的关注。 「CODING 静态网站」（原 CODING Pages 服务）是一个面向境外用户的静态网站托管服务，可在中国境外网络下正常访问，但不能确保境内网络正常访问。 云开发的静态网站托管能力，可以为国内用户提供一个非常快速的访问空间，而 CODING 静态网站托管服务对境外用户访问又比较友好，我们为了集两者之优势，会选择把网站部署到两个平台上。 传统的部署方式需要我们进行两次部署操作，费时费力，今天我来介绍一种方法，使用 CODING CI 能力“一箭双雕”，将静态网站同时部署到云开发和 CODING 静态网站托管服务上。 本文将以部署 React 应用为例进行演示操作。
工作流梳理
因为需要使用到 CODING CI，构建一条持续集成流水线是少不了的，第一步我们需要梳理一下工作流。
[图片: 工作流程梳理]
https://static.txisfine.cn/upload/20200620133538.png/pkwatermark
用户推送 React 应用源码后，触发流水线拉取代码，对 React 应用进行构建，并生成构建产物，随后进入“部署”阶段，这个阶段有两个并行的步骤，即 Git 推送到 CODING 静态网站仓库和使用 tcb-cli 推送到云开发。当 CODING 静态网站仓库代码变更后触发持续部署到 CODING 静态网站服务。这样就完成了“一次推送部署两地”这种“一箭双雕”的操作。
在 CODING 中创建 DevOps 项目
通过网址 https://e.coding.net 登录 CODING 工作台，进入全部项目模块，新建一个项目。
[图片: CODING 工作台]
https://static.txisfine.cn/upload/20200522132558.png/pkwatermark
[图片: 选择 DevOps 模板]
https://static.txisfine.cn/upload/20200522132015.png/pkwatermark
[图片: 创建项目]
https://static.txisfine.cn/upload/20200620141051.png/pkwatermark
[图片: 创建新仓库]
https://static.txisfine.cn/upload/20200620143608.png/pkwatermark
pages。
[图片: 创建 pages 仓库]
https://static.txisfine.cn/upload/20200620143642.png/pkwatermark
[图片: 快速初始化仓库]
https://static.txisfine.cn/upload/20200620163721.png/pkwatermark
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 登录云开发控制台，如果没有授权会弹出以下画面。
[图片: 登录授权]
https://static.txisfine.cn/upload/20200522133420.png/pkwatermark
mytest。
[图片: 创建云开发环境]
https://static.txisfine.cn/upload/20200522133654.png/pkwatermark
设置 SecretId 和 SecretKey
在流水线中，一般不会使用特权账号的 SecretKey（主账号的最高权限 SecretKey，拥有腾讯云控制台的所有权），都是按需授权，所以需要对 SecretKey 的权限进行访问控制。 使用主账号登录 https://console.cloud.tencent.com/cam/capi，根据提示创建子用户，选择自定义创建，选择类型为可访问资源并接收消息。 填写用户信息，选择访问方式为编程访问。
[图片: 填写用户信息]
https://static.txisfine.cn/upload/20200522140636.png/pkwatermark
[图片: 设置用户权限]
https://static.txisfine.cn/upload/20200522151542.png/pkwatermark
[图片: 完成用户的创建]
https://static.txisfine.cn/upload/20200522144606.png/pkwatermark
CODING CI 设置
凭证和令牌
SecretId 和 SecretKey 信息属于敏感信息，我们需要以 CODING 凭据的形式保存在项目配置中，使用凭据后你的敏感信息将不会出现在构建日志和 Jenkinsfile 中，这样会更加安全。 进入项目，依次选择项目设置、开发者选项、凭据管理，录入一个凭据。
[图片: 凭据管理]
https://static.txisfine.cn/upload/20200522144117.png/pkwatermark
[图片: 录入云 API 凭据]
https://static.txisfine.cn/upload/20200522144535.png/pkwatermark
[图片: 新建项目令牌]
https://static.txisfine.cn/upload/20200620150755.png/pkwatermark
[图片: 两条凭据信息]
https://static.txisfine.cn/upload/20200620151313.png/pkwatermark
创建构建计划
接下来我们回到项目，选择构建计划模块，创建一个持续集成任务。
[图片: 创建构建计划]
https://static.txisfine.cn/upload/20200620151519.png/pkwatermark
[图片: 选择构建计划模板]
https://static.txisfine.cn/upload/20200620151736.png/pkwatermark
[图片: 构建计划配置]
https://static.txisfine.cn/upload/20200620152433.png/pkwatermark
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） |
添加完毕后，应该是这个样子的。
[图片: 添加环境变量]
https://static.txisfine.cn/upload/20200620162204.png/pkwatermark
CODING 静态网站设置
进入项目，依次选择持续部署、静态网站。此模块需要“团队所有者”身份进行实名认证。请先完成实名认证。
[图片: 静态网站]
https://static.txisfine.cn/upload/20200620164403.png/pkwatermark
pages 仓库），其他维持默认即可，保存。
[图片: 新建静态网站]
https://static.txisfine.cn/upload/20200620165120.png/pkwatermark
测试与验证
通过以上步骤，我们已经构建好了流水线，我们可以使用 push 代码来触发流水线自动部署静态网站到云开发和 CODING。 在 CODING 项目的构建计划中可以看到每一次的构建任务的运行状态。
[图片: 构建计划]
https://static.txisfine.cn/upload/20200620170041.png/pkwatermark
[图片: 构建成功]
https://static.txisfine.cn/upload/20200620170508.png/pkwatermark
[图片: 该网页是部署在云开发上的]
https://static.txisfine.cn/upload/20200620171311.png/pkwatermark
[图片: 该网页是部署在 CODING 上的]
https://static.txisfine.cn/upload/20200620171627.png/pkwatermark
