浅谈前端研发链路之 CI/CD

大家好,我是徐徐。今天跟大家聊聊前端研发链路中的 CI/CD。

前言

在现代的前端开发工程体系中,CI/CD 在里面扮演着重要的角色,它的出现改变了前端发布的方式,为构建大型应用提供了有利的基础设施,本片文章将分别从CI/CD产生的背景及意义,以及其运作方式和常用的工具来简单探讨一下,希望可以给你带来帮助。

CI/CD是从哪里来的?

从前的软件开发

想象一下,你在搭积木。以前的软件开发就像是你先设计好整个城堡,然后从底到顶一块块搭建,直到全部完成才能看到成果。这种方式叫"瀑布式"开发,就像水从高处流到低处,一步接一步。

新的玩法:敏捷开发

后来,人们发现这样做太慢了,而且容易出错。于是就有了新的玩法,叫"敏捷开发"。这就像是你搭一小部分,玩一下,觉得不好就快速调整,不断重复这个过程。这样做更灵活,也更容易适应变化。

CI的诞生

在敏捷开发中,有个聪明人(Martin Fowler)想到:为什么不经常把大家的积木拼在一起看看呢?这样可以早点发现哪里不对劲。这个想法就是CI(持续集成)的开始。

从CI到CD

CI让大家更容易发现问题,但是把积木(程序)搬到展示台(服务器)上还是很麻烦。于是人们又想到,能不能让这个过程也自动化呢?这就是CD(持续交付/部署)的由来。

云计算和DevOps推波助澜

随着云计算的出现,以及开发人员和运维人员开始更好地合作(DevOps),CI/CD变得更加容易实现和普及。

前端开发也要用CI/CD

现在的网页越来越复杂,就像是从搭简单的小房子变成了搭复杂的城堡。这时,CI/CD在前端开发中就显得特别重要了。它帮助开发人员更容易地管理这些复杂的"城堡"。

CI/CD到底是什么?

简单说说CI/CD

  • CI(持续集成):就像是经常检查你的作业,及时发现并改正错误。
  • CD(持续部署):把检查过的作业自动交给老师(上传到服务器)。

为什么CI/CD这么重要?

  1. 减少错误:经常检查,问题不容易积累。
  2. 加快速度:自动化流程,省去了很多手动操作。
  3. 降低风险:小步快跑,每次改动都不会太大。
  4. 团队协作更顺畅:大家的代码经常合在一起,减少冲突。

前端开发的CI/CD是怎么运作的?

下面画了一个大概的CI/CD的运作流程图,仅供参考。

1. 提交代码

  • 用Git管理代码,就像是给你的积木拍照片,记录每一次改动。
  • 使用分支策略,相当于在不同的桌子上搭积木,互不影响。

2. 自动构建

  • 用工具(如Webpack)把你的代码积木变成一个完整的作品。

3. 自动测试

  • 单元测试:检查每个小零件是否正常工作。
  • 集成测试:检查零件组合在一起是否正常。
  • E2E测试:模拟用户操作,看看整个作品是否正常运转。

4. 代码质量检查

  • 用工具检查代码是否整洁、是否有明显的错误。
  • 确保所有人的代码风格一致,就像确保所有积木的颜色和形状匹配。

5. 自动部署

  • 把检查通过的作品自动放到展示台上(测试服务器、预发布服务器、正式服务器)。

当然,上面提到的至少一些核心的步骤,最主要的还是根据自己的需要,自定义多种脚本去满足自己的发布需求。

常用的CI/CD工具

下面列举一些常用的CI/CD工具,每个工具都有自己的特点,大家可以各取所需。

  1. Jenkins:像是一个勤劳的助手,帮你完成各种自动化任务。
  2. GitLab CI/CD:直接集成在GitLab代码仓库中的自动化工具。
  3. Travis CI:云端的CI服务,特别适合开源项目。
  4. CircleCI:另一个流行的云端CI/CD平台。
  5. GitHub Actions:GitHub自家的CI/CD服务,与GitHub无缝集成。

小贴士

说了这么多,来点我日常开发的一些小技巧吧。

  1. 经常提交小改动,不要攒一大堆再提交。
  2. 能自动化的就自动化,省时省力。
  3. 保证快速反馈,CI/CD过程要够快。
  4. 把CI/CD的配置文件也放在代码仓库里管理。
  5. 确保开发、测试和生产环境尽可能一致,避免"我这里能运行"的问题。
  6. 在CI/CD过程中加入安全检查,防患于未然。

总结

在前端开发中使用CI/CD,就像是给自己找了一个得力助手。它帮你自动完成很多繁琐的工作,让你可以专注于创造性的任务。通过自动化的构建、测试和部署,你和你的团队可以更快地交付高质量的产品,同时还能降低出错的风险。

所以,如果你还没有在你的前端开发流程中引入CI/CD,不妨试试看,你会发现开发工作变得更加轻松和高效,个人觉得 GitHub Actions 真的非常好用,欢迎和我探讨。

相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐7 小时前
前端图像处理(一)
前端