写给前端工程师的 CI/CD 知识

CI / CD 是持续集成 (Continuous Integration) 和持续部署 (Continuous Delivery) 的缩写。CI / CD 是一种软件开发实践，通过自动化的方式将代码集成到一个共享的代码库中，并将其部署到生产环境。CI / CD 可以帮助软件开发团队提高开发效率、降低错误率、缩短发布周期。

正如标题所示，以下内容是为前端开发人员编写的，因为这是我最了解的领域，尤其是在工具方面。

基本介绍

当你想了解或者为你的团队做 CI/CD 之前。你应该先有一个基本的认识。

当代码被推送到 git 存储库时，它会触发自动构建和测试过程。运行单元测试用例来验证代码。如果测试通过，代码可以自动部署到登台/生产环境。

下图展示一个， 我理解的完整的 CI/CD 的开发管理流程。

CI 持续集成部分

持续集成 (CI) 自动执行构建、测试和合并过程。只要提交代码，它就会运行测试以尽早检测集成问题。这鼓励频繁的代码提交和快速反馈。

Lint 与 格式化

Linting 和格式化对于保持代码库一致和干净至关重要。每个团队成员在编写代码时都应遵循相同的规则和约定。代码库本身的一致性至关重要。

对于这一步，我希望我的工具快速且可靠。只需 几秒钟 即可检查并格式化我的代码库。

我所使用的工具：

• ESlint 用于 linting，它附带了一组用于编写正确 Javascript 的规则，并且可以根据您自己的团队的需求定制这些规则。此外，如果您需要更具体的东西，您可以构建自己的 ESLint 规则，我在这里写过，这是一个涉及抽象语法树（AST）的有趣练习。
• Prettier 用于格式化。在过去的几年里，它成为 Javascript 开发人员事实上的格式化工具。我在我的项目和编辑器中设置它，保存文件会自动为我格式化。
• Husky 提交前校验。 正如之前说到的，我们期望这一步非常快。 所以，我们在代码提交前，使用husky 来保证，代码已经被格式化好了。

单元测试

我非常喜欢单元测试，因为它们可以作为项目的健全性检查，以确保其各个部分随着时间的推移以非常有效的方式（快速、可靠）按预期工作。 额， 但是，实际开发中，除了开源类作品，很少有完整的单元测试。

因为我日常使用Vue 开发。 所以我的单元测试工具如下：

• @vue/test-utils 测试套件。 @vue/test-utils 旨在简化测试 Vue.js 组件的过程。它提供了一组用于编写测试的API，可以模拟用户与组件的交互，以确保组件在各种情况下都能按预期工作。 并且不依赖于特定的测试框架（jest , mocha, vitest）。
• vitest 测试框架。 Vitest 是一个强大的JavaScript测试框架，专为Vue.js应用程序设计。它支持单元测试和端到端测试，具有易用性和灵活性，适用于各种测试需求。Vitest使您能够轻松编写和运行Vue.js应用程序的测试，确保代码的质量和可靠性。
• @pinia/testing 是一个用于测试Pinia状态管理库的官方测试工具库。它提供了用于模拟Pinia应用程序中的状态和行为的API，以便进行单元测试和集成测试，确保状态管理的正确性和可靠性。

如果您不会使用。可以看我之前的关于vue 单元测试的文章。

CD 持续部署

持续交付 (CD) 可自动执行基础架构更改和部署等发布流程。它确保可以通过自动化工作流程随时可靠地发布软件。 CD 还可以自动执行生产部署之前所需的手动测试和批准步骤。

当我们完成前边的 CI 集成过程， 系统就会进入CD 部署过程。 我们可以选择使用Docker 也可以直接通过系统将我们的素材资源部署到 nginx 配置的项目目录里。

当完成部署过程之后，我们可以通过 企业微信或者钉钉的机器人 进行对测试团队人员的 一个消息推送。 以达到，及时的测试流程接入。

总结

本文包含CI/CD 所使用的所有概念、工具和知识。我知道它非常密集并且有很多东西需要吸收。

但实际上，一旦你的开始使用，我敢保证对你和团队来说，获益无穷。