React + 腾讯云 COS 上传部署

随着 Web 应用的发展,运行在浏览器端的 Web 应用能够承担更多且更复杂的业务交互需求,催生了如 ReactVue 等单页应用框架,这些框架简化了开发流程,但对于 Web 应用的部署并没有统一的解决方案,许多项目团队中,前端开发者在提交代码后仍然需要人工通知项目经理、运维等相关同事进行手动或者繁琐的更新操作。而将持续集成的概念引入前端开发将是未来解决前端代码部署的可行性非常高的方案。

本文将介绍将介绍如何使用 CODING 实现 React Web 应用结合 腾讯云对象存储服务 (COS) 的持续集成与部署。

构建概览

本文配置的持续集成项目结构如下:

图片

由于 Web 应用通常由 htmlcssjs 和各种图片、视频等静态资源组成,我们选择了腾讯云对象存储服务 (COS) 来托管我们的静态资源文件。通过创建代码仓库并配置持续集成配置和触发规则。开发者只需要提交代码就可以完成构建、部署的自动化实现。

准备工具

git

node 8.16.0 或 >= 10.16.0

构建过程

在 CODING 中创建项目

项目示例地址:https://coding-public.coding.net/p/my-react-app/d/my-react-app/git (图中所涉及到的变量/名称等信息配图仅供参考,实际以该示例项目为准)

图片

创建完毕后,进入【代码仓库】 页面,获取代码仓库地址:

图片

注意,该阶段不建议进行任何初始化操作,我们将在下一阶段以使用命令行推送已存在的仓库的方式初完成始化。

创建你的 React 项目并推送到仓库

推荐使用 create-react-app 脚手架搭建,它集成了本地开发单元测试Webpack 构建功能,并且初始化了git基本配置,简化了 React 开发流程。

npm i -g create-react app
create-react-app my-react-app

安装成功后,进入my-react-app目录下,执行关联远程仓库命令并推送代码。

git remote add origin https://e.coding.net/coding-publilc/my-react-app.git
git push -u origin master

配置构建计划

点击左侧【持续集成】->【构建计划】菜单项进入构建计划页面,新建构建计划。

图片

我们选择【简易模板】,并且勾选【前往配置详情】,点击【确定】创建构建计划:

图片

注:这一步骤可以在【查看更多】选项中选择 Coding 内置的【React 构建并上传到腾讯云 COS】默认模板,实现一步到位的构建计划创建。

创建成功后,页面自动跳转到【构建设置】->【配置详情】页面,使用如下脚本覆盖原有的 Jenkinsfile 并点击【保存】:


pipeline {
  agent any
  stages {
​    stage('检出代码') {
​      steps {
​        checkout([$class: 'GitSCM',
​        branches: [[name: env.GIT_BUILD_REF]],
​        userRemoteConfigs: [[
​          url: env.GIT_REPO_URL,
​          credentialsId: env.CREDENTIALS_ID
​        ]]])
​      }
​    }
​    stage('安装依赖与测试') {
​      steps {
​        sh 'yarn'
​        sh 'yarn test --watchAll=false'
​      }
​    }

​    stage('构建') {
​      steps {
​        sh 'yarn build'
​      }
​    }
​    stage('上传到 COS Bucket') {
​      steps {
​        sh 'coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY} -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}'
​        sh 'coscmd upload -r ./build/ /'
​        echo "上传成功,访问 https://${env.COS_BUCKET_NAME}.cos.${env.COS_BUCKET_REGION}.myqcloud.com/index.html 预览效果"
​      }
​    }
  }
}

图片

配置腾讯云 COS 服务

上面的 Jenkinsfile 中我们引用了4个自定义变量,分别为:

COS_SECRET_ID - 腾讯云访问密钥 SecretId

COS_SECRET_KEY - 腾讯云访问密钥 SecretKey

COS_BUCKET_NAME - 腾讯云 COS 存储桶名称

COS_BUCKET_REGION - 腾讯云 COS 存储桶地区

我们需要COS来托管我们的 React 项目构建后生成的静态文件,而这些变量需要在 COS 服务中配置。

首先开通腾讯云对象存储服务

开通后,进入对象存储->存储桶列表 创建新的存储桶,并将访问权限设置为“公有读私有写”。

图片

创建后,进入存储桶详情页,可以获取存储桶名称存储桶地区

图片

配置腾讯云访问密钥

进入API密钥管理 点击【新建密钥】,生成 SecretIdSecretKey

图片

配置环境变量

回到 CODING 构建计划,在配置详情中切换到【变量与缓存】视图,新建这4个环境变量。

图片

出于安全考虑,COS_SECRET_IDCOS_SECRET_KEY 需要设置为【保密】。
配置完成后,别忘了点击【保存】。

图片

触发构建

根据 CODING 持续集成默认触发规则: 当代码推送到 master 分支后,自动触发持续集成,我们对代码仓库稍作修改并更新 master 分支,进入【持续集成->构建】页面,可以看到构建计划被触发:

图片

查看构建成果

点击构建计划,进入构建详情页,可以看到当前构建的过程、快照等信息。

构建完成后,点击构建可视化视图中【上传到COS BUCKET】 ->【Print Message】步骤,查看构建完成后打印的消息。

图片

点击打印消息中的 COS 地址,即可跳转到我们构建完毕的 React Web 应用。图片

配置域名

一个完整的前后端分离应用,前端配置独立域名有利于与后端服务解耦,下面我们介绍如何配置 CDN 加速域名。
访问腾讯云 COS ,进入存储桶配置,点击默认 CDN 加速域名的【编辑】,开启加速域名配置 :

图片

保持默认选项即可。由于我们配置了公有读的存储桶,无需回源鉴权。

图片

点击保存,等待腾讯云部署完毕,即可从域名 one-minute-react-1252867045.file.myqcloud.com 访问我们的 React 项目。

上一篇构建 Python + Flask 应用
最近更新
感谢反馈有用
感谢反馈没用