乐趣区

关于前端:写给前端工程师的-CICD-知识

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

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

退出移动版