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