最佳实践集 / 一分钟开始持续集成之旅 / React + 腾讯云 COS 完成上传部署

React + 腾讯云 COS 上传部署

文章内容

构建概览
准备工具
构建过程

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

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

构建概览

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

由于 Web 应用通常由 html 、 css 、 js 和各种图片、视频等静态资源组成，我们选择了腾讯云对象存储服务 (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 预览效果"
      }
    }
  }
}