前端CI/CD落地实践
随着 nodejs 的兴起,前端开发也进入了 新的时代,webpack 的诞生,更是让其如虎添翼,构建出欣欣向荣的前端生态. 然而事物的发展总是在:发现问题->解决问题->引入新问题中往复。 webpack 给前端带来了一个新的高频操作就是打包,高频的打包会带来如下问题: 阻塞前端工作:前端必须等到打包完成,才能 进入后续工作,如果打包时间过长,这中间就会阻塞就会更加明显。 影响团队协作:当功能点开发完成后,未避免频繁打包,会将多个功能点合并在 一起打包,这样就会导致测试没有办法提前介入测试,如果测试出问题的功能点是在几天前开发的,对于代码已经有所遗忘,还需要阅读代码帮助找回记忆gg。 打断专注时间:如果前端正在专注的解决一个复杂问题,此时出现紧急问题需要打包,使得前端不得不从当前工作中抽身出来进行打包,打包完成后将需要一段时间的预热才可以像之前一样 专注的处理未完成的问题。 对于上述 问题完全可以通过工具构建出一套 CI/CD 方案交由计算机来解决,让前端工程师从打包解放出来。 工具 jenkens: 是一款由 JAVA 编写的开源的持续集成工具. gogs: 轻量级代码仓库 jenkins 与 gogs 的通讯是通过 Gogs plugin 通过 webhook 来通讯的。 方案 方案设计大致如下: 方案执行步骤: 前端工程师往代码仓库 push 代码 gogs 会调用 jenkins 的 webhook 地址触发 jenkins 工作流 jenkins 会将前端代码从代码仓库中拉取最新的代码,并执行构建流程 将构建好的代码上传到 dist 仓库(如果存在 CDN 则清除 CDN 缓存) push dist 仓库到 gogs 远程仓库 gogs 触发 dist 仓库的 webhook,将服务器代码更新到最新的打包文件 完成部署 测试人员执行测试用例(如果由缺陷,将缺陷反馈给前端开发人员) 好处 完成上述方案,前端工程师只需要将前端代码 push 到远程仓库,服务器会自动构建响应的包,并部署到测试服务器上供测试测试,前端可以缩小提交粒度并更快的将功能交付测试,也可以将问题尽早暴露尽早解决。...