浅尝 gitlab + jenkins 自动化部署 React 项目

基于公司已有的 gitlab 和 jenkins 环境，配置 React 项目自动化部署

jenkins 配置

版本 2.346

首先新建一个 freestyle project

点击确定进入到配置页

1 配置源码仓库地址和用户信息，并指定分支

2 配置构建触发器

这里这个地址会用在 gitlab 的 webhook 下

这里不知道为什么 Filter branches by name 报错，但是还是生效的，目前没找到原因

Secret token 和 gitlab webhook url 需要填写在 gitlab webhook中，见下面 gitlab 配置

3 配置构建环境

我这里用的是 node14 ， 因为用了私库， 所以用了项目内配置的 .npmrc， 没用到的话，也可以使用淘宝镜像的地址

4 构建

执行构建命令

jenkins 环境变量中 默认 CI=true

这里的 CI=false 是因为项目使用 create-react-app搭建 build.js 里面有对 CI 环境的判断

当 CI=true，会将警告当成错误，从而阻止构建 项目管理比较松散，会出现警告的话，就设置一下

5 构建后操作

将构建完成之后的文件夹上传到服务器的 nginx 路径下

gitlab 配置

使用 jenkins 中生成的 Secret token 和 gitlab webhook url, 保存、测试。

---

jenkins 中插件的配置

nodeJS

安装 NodeJS plugin

全局安装多版本 nodeJS 需要 jenkins 服务器网络环境支持

DingTalk

这个项目下还使用了 钉钉机器人 插件，构建完成之后进行通知

安装完插件之后，项目的配置中会出现机器人的配置部分

在钉钉中创建群组，为群组添加机器人

jenkins 添加钉钉机器人， 将 webhook 和 token 写入

这里选择的通知时机为 构建成功和失败， 可以自由选择

指定通知人

---

才疏学浅，记录一下。