[Jenkins进阶]-前端CI/CD
文章图片
什么是前端自动化
前端自动化不是指自动生成代码,而是自动化构建项目。
如果没有自动化, 我们的前端从开发到提测工作流程可能如下:
1.本地机器上写代码
2.在命令行输入 npm run unit/lint,查看单元测试/eslint校验结果
3.提交代码,push 到 git 远程仓库
4.执行 npm run build,构建项目
5.ssh/ftp发包至测试服务器等各种方式
这个流程中,每一个步骤都要重复人工操作,很大增加了时间成本,不能保证操作的准确性。对于 unit 或者 build 的结果,没有一个自动的反馈机制,需要人工 check 运行结果,最后部署也是人工登录服务器执行脚本,非常繁琐。
引入自动化以后,整个流程变成:
1.本地机器上写代码
2.提交代码,push 到 git 远程仓库
3.git hook 触发 jenkins 的构建 job
4.jenkins job 中拉取项目代码,运行 npm run unit/lint 和 npm run build。
5.jenkins job 中执行测试服务器的部署脚本
在 自动化流程中,只有步骤1和步骤2需要人工操作,其他步骤都是自动运行,是一个非常标准化的流程,减少了人工操作的风险,省去了重复性工作,增强了项目的可见性。
效果图
实现
流程图
文章图片
- 开发人员提交代码至代码库
- 触发jenki构建任务
- 构建成功,发包至nginx服务器,更新完毕
- 构建失败,通过钉钉通知/企业微信/邮箱等等方式提醒开发人员代码构建失败
git
项目:https://github.com/wzc570738205/frontproject.git准备
钉钉群
(用来接收CI/CD结果通知):35669766准备安装了
jenkins的云服务器
:这里自行购买,安装参考在linux服务器上安装Jenkins2.接入代码提交通知 当你在往代码库推送了代码,通过git的webhook自动给钉钉发送消息
2.1添加钉钉群机器人(智能群助手)
文章图片
复制webhook,接下来会用到
文章图片
2.2将钉钉webhook添加至github对应相应的webhook里
文章图片
2.3 测试代码提交通知
配置完成,我们提交下代码进行测试
文章图片
至此,代码提交通知配置完成
3.接入项目CI 当我们提交完代码后,我们需要校验下此次代码合并有没有致命性错误,这里我们采取简单的方法即允许
npm run build
,如果运行没有报错,那么说明此次提交是通过的。失败则说明代码有致命错误,需要进行修改3.1 jenkins新建项目
这里为简要步骤,详情请参考使用jenkins自动构建github项目
- 创建一个
构建一个自由风格的软件项目
的job - 源码管理器选择git,并填入地址以及凭证(没有就新建一个)
- 构建触发器选择:GitHub hook trigger for GITScm polling
文章图片
- 添加node环境:系统管理/全局工具配置-新增nodejs,版本选择合适的即可
文章图片
- 构建环境选择node,勾选刚才下载的node
- 构建选择
执行shell
:
npm install -g cnpm --registry=https://registry.npm.taobao.org&& cnpm install&& npm run build
文章图片
- 构建后操作(可选):
文章图片
jenkins
job的执行成功与失败来确定CI是否成功3.1.1 测试 再次提交代码,成功触发jenkins的job
文章图片
构建成功
文章图片
3.2 接入构建状态钉钉通知
- 配置钉钉自定义机器人,并选择安全设置自定义关键词,这里设置
#
即可
文章图片
- 下载jenkins插件
DingTalk
,用来进行钉钉通知
文章图片
- 配置插件=>系统管理选择钉钉,填入刚才的自定义机器人webhook地址
文章图片
文章图片
- 项目里开启机器人通知
文章图片
- 点击开始构建,进行测试
文章图片
等待CI结束
文章图片
失败提醒
文章图片
4.接入CD 在上面的步骤里我们实现了CI的操作,也就是用是否能打包生成环境的包来进行建议测试代码有没有致命性错误。这一步通过后我们需要把部署包发至
nginx
服务器4.1 发包至服务器
- 安装jenkins插件
Publish Over SSH
- 设置里配置插件,填入服务器ip,高级里使用密码,设置远程服务器文件夹
/
文章图片
点击测试连通性
文章图片
- 项目配置
- 修改构建shell,添加压缩
npm install -g cnpm --registry=https://registry.npm.taobao.org&& cnpm install&& rm -rf dist&& npm run build&& cd ./dist&& tar -zcvf dist.tar.gz *
- 添加构建后操作
Send build artifacts over SSH
文章图片
- 服务器配置
nginx
location /testPage{ alias/home/test; indexindex.html; }
至此,CD整合完毕,现在只需要提交代码,即可实现自动打包,自动部署。
结语 【[Jenkins进阶]-前端CI/CD】后续我会继续编写如何接入gitee、gitlab、svn。
更多问题欢迎加入前端交流群交流749539640
推荐阅读
- 推荐系统论文进阶|CTR预估 论文精读(十一)--Deep Interest Evolution Network(DIEN)
- Jsr303做前端数据校验
- 普通人进阶的三个过程-很多人都知道,但却本末倒置
- 易效能进阶课程笔记29
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- C语言进阶栈帧示例详解教程
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01
- js保留自定义小数点