浅谈前端研发链路之 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 真的非常好用,欢迎和我探讨。

相关推荐
光影少年3 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_4 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189116 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾8 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu10 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym15 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫16 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫20 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat21 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js