本文首发于微信公众号:前端徐徐。欢迎关注,获取更多前端技能分享。
大家好,我是徐徐。今天跟大家聊聊前端研发链路中的 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这么重要?
- 减少错误:经常检查,问题不容易积累。
- 加快速度:自动化流程,省去了很多手动操作。
- 降低风险:小步快跑,每次改动都不会太大。
- 团队协作更顺畅:大家的代码经常合在一起,减少冲突。
前端开发的CI/CD是怎么运作的?
下面画了一个大概的CI/CD的运作流程图,仅供参考。
1. 提交代码
- 用Git管理代码,就像是给你的积木拍照片,记录每一次改动。
- 使用分支策略,相当于在不同的桌子上搭积木,互不影响。
2. 自动构建
- 用工具(如Webpack)把你的代码积木变成一个完整的作品。
3. 自动测试
- 单元测试:检查每个小零件是否正常工作。
- 集成测试:检查零件组合在一起是否正常。
- E2E测试:模拟用户操作,看看整个作品是否正常运转。
4. 代码质量检查
- 用工具检查代码是否整洁、是否有明显的错误。
- 确保所有人的代码风格一致,就像确保所有积木的颜色和形状匹配。
5. 自动部署
- 把检查通过的作品自动放到展示台上(测试服务器、预发布服务器、正式服务器)。
当然,上面提到的至少一些核心的步骤,最主要的还是根据自己的需要,自定义多种脚本去满足自己的发布需求。
常用的CI/CD工具
下面列举一些常用的CI/CD工具,每个工具都有自己的特点,大家可以各取所需。
- Jenkins:像是一个勤劳的助手,帮你完成各种自动化任务。
- GitLab CI/CD:直接集成在GitLab代码仓库中的自动化工具。
- Travis CI:云端的CI服务,特别适合开源项目。
- CircleCI:另一个流行的云端CI/CD平台。
- GitHub Actions:GitHub自家的CI/CD服务,与GitHub无缝集成。
小贴士
说了这么多,来点我日常开发的一些小技巧吧。
- 经常提交小改动,不要攒一大堆再提交。
- 能自动化的就自动化,省时省力。
- 保证快速反馈,CI/CD过程要够快。
- 把CI/CD的配置文件也放在代码仓库里管理。
- 确保开发、测试和生产环境尽可能一致,避免"我这里能运行"的问题。
- 在CI/CD过程中加入安全检查,防患于未然。
总结
在前端开发中使用CI/CD,就像是给自己找了一个得力助手。它帮你自动完成很多繁琐的工作,让你可以专注于创造性的任务。通过自动化的构建、测试和部署,你和你的团队可以更快地交付高质量的产品,同时还能降低出错的风险。
所以,如果你还没有在你的前端开发流程中引入CI/CD,不妨试试看,你会发现开发工作变得更加轻松和高效,个人觉得 GitHub Actions 真的非常好用,欢迎和我探讨。