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 所应用的所有概念、工具和常识。我晓得它十分密集并且有很多货色须要排汇。

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