前端项目发布自动打tag实践

背景

公司内部的前端项目发布,采用的是容器化部署的方式,运维需要在每次发布的时候指定一个类似版本号的东西,可以做管理,例如回滚之类的,之前的方式是每次在发布线上环境之前,代码仓库中手动打一个tag,在jenkins中获取到所有tag,拿最新的那个tag最为版本号。

这样的流程存在一些缺点,例如

  • 需要发布者手动打tag,tag的规则又比较依赖发布者的手动输入
  • 经常会遗忘打tag的操作,导致发布的时候前面的步骤执行完成,到最后的发布才报错,在发布的时候比较浪费时间
  • PR的步骤和打tag的步骤比较割裂,如果发现上述没有打tag的报错,又需要重新提PR发布,流程上相对繁琐

优化思路

根据上面提到的缺点,可以用新的思路来做这个事情,总体思路就是PR合并之后自动生成tag并推到远程,不再手动打tag

原先的流程:

手动在代码仓库打tag => 提PR => PR通过 => jenkins触发执行流水线 => 安装依赖 => 构建产物 => 更新镜像容器

新的流程:

提PR => PR通过 => jenkins触发执行流水线 => 安装依赖 => 运行命令生成版本更新commit和tag => 推送到远程仓库 => 构建产物 => 更新镜像容器

代码改动

这里我们需要用到新的包来做自动生成版本号的操作,在 package.json 中新增下面新增包和命令

json 复制代码
"scripts": { 
    ... 
    "release": "standard-version" 
}, 
"devDependencies": { 
    ...
    "standard-version": "^9.5.0" 
}

如果是旧的项目,就把package.json中的versions设置为同代码仓库中最新的tag一致,例如1.1.0, 如果是没有上线过的项目 ,直接设置为1.0.0即可。设置完成之后,执行npm i, 这样会更新package-lock.json

执行relase命令之后会自动生成commit,这一步不需要前端去修改什么,只要了解这个做了什么即可

  • 自动打了tag
  • 更新了package.json中的verison,同tag一致
  • 更新了CHANGELOG.md
  • 更新了package-lock.json

jenkins调整

只修改jenkins中对应的任务重调整命令,如果某个环境不需要,就无需调整 调整命令,在install和build阶段增加两个命令,对应上面的两个步骤,运行relase命令,将生成出来的commit推送到远程,把tag也推送到远程,保证更新同步

arduino 复制代码
npm install
npm run release
git push origin HEAD:master
git push --tags
npm run build

权限设置

因为上面的流程是需要推送到commit还有tag到远程分支的,一般线上环境我们都是指定用master分支,会设置为protect,这时候我们需要给jenkins中执行的账号开通权限,允许其可以往master中推送commit和tag

相关推荐
陈随易41 分钟前
在 VSCode 里,把项目一键部署到服务器
前端·后端·程序员
Highcharts.js1 小时前
教程:基于 React + Highcharts 构建一个单页应用程序、按需数据拉取与图表渲染
开发语言·前端·数据结构·react.js·前端框架·highcharts·页面应用
To_OC1 小时前
我被 useState 坑了两次之后,终于把它的脾气摸透了
前端·javascript·react.js
鱼樱前端1 小时前
我用 Claude Code 后,编码效率翻 3 倍。但更值钱的是别的。
前端·后端·ai编程
_lucas2 小时前
给知识库网站接入AI问答
前端·ai编程·全栈
煎饼学大模型2 小时前
Agent 的“大脑-手“解耦架构:当推理层和工具执行层各自独立演进
数据库·人工智能·oracle·架构·agent
前端糕手2 小时前
前端面试题大全:JavaScript + Vue3 + React + TypeScript + 工程化 + 性能优化
前端
我不叫武4 小时前
一个用 Rust 写的离线编码查询桌面工具
前端
Web4Browser5 小时前
指纹浏览器 API 自动化怎么接:启动 Profile、获取 CDP 端点并连接自动化框架
前端·网络·typescript·自动化
Patrick_Wilson5 小时前
从 React 到 Flutter:写给前端的一张跨端知识地图
前端·flutter·react.js