搭建Vue3组件库:第九章 持续集成CI:基于GitHub的Action回归验证

简介: 本章介绍一下github的工作流的持续集成服务。

持续集成可以认为是一种优秀的开发实践,它可以在代码变更的时候及时反映代码状态。持续集成需要服务器的支持,可以考虑通过 gitlib ci 或者 jenkins 自己搭建持续集成服务器,更好的办法是使用第三方的持续集成服务,目前比较流行的有:

对于开源项目来讲由于代码无需闭源,完全可以使用第三方持续集成服务。


本章任务

  • 创建工作流 Workflow
  • 创建 Job
  • 运行 CI 服务;

Github Action 是一个集成服务,你可以认为它是一台远程运行的服务器。为了让同一台服务器为不同用户提供独立的配置,互不干扰,需要通过容器化技术实现虚拟机。也就是说使用 Github Action,其实就是在使用虚拟机。更准确地讲,其实就是在配置一个容器,它的配置非常类似于配置 Docker 容器配置。


task1】创建工作流 workflow

Github Action 的配置文件需要放在项目根目录下的 .github/workflows 中,每一个配置文件是一个工作流 Workflow 。一个工作流是可以配置多个自动化任务 (Job) 的。

比如,组件库的持续集成分为两个任务 (Job) 。一个任务是运行单元测试进行回归校验,另外一个是自动运行 lint 脚本校验代码风格。 这两个任务之间并没有先后关系,而且可以并行运行。这个时候就可以新建一个工作流并且配置两个任务。

首先创建一个 yaml 文件(文件名随意),编写 name 属性,name 属性最终会被显示到 Action 的执行界面中。

在这里插入图片描述

然后是确定触发器。所谓的触发器是指什么时候运行这个工作流 (Workflow),比如设置 pushpull_request 时触发,就是在 Github 收到 push 代码时和 pull_request 请求时触发。

我这里文件命名:main.yml, 路径:.github/workflows/main.yml

name: CI
on:
  push:
    branches: [ master ] // github默认分支是main,我这里是master
  pull_request:
    branches: [ master ] // github默认分支是main,我这里是master
jobs:
  Lint:
    # Lint任务
  UnitTest:
    # 单元测试任务

task2】创建 Job

下面来具体配置每一个Job。 Job 其实是一个运行任务,我们以 UnitTest 单元测试任务举例。

首先需要确定 Job 的 name,这个也会显示在执行界面中。

在这里插入图片描述

设定 runs-on 属性

run-on 是为了指定运行环境(Linux or Mac),其实你可以认为是这个任务虚拟机的环境,Github 可用的虚拟机有:

  • windows-(xxx version)
  • ubuntu-(xxx version)
  • Macos-(xxx version)

设置job的执行步骤

每一个 job 又包含多个 step, 每一个 step 是串行执行的。

你可以假定,在一个空的操作系统上,如果你想进行单元测试,则需要完成如下任务:

  • 安装 git 软件;
  • 检出 checkout 项目代码;
  • 安装 pnpm 软件;
  • 使用 pnpm 安装项目代码的依赖库;
  • 运行 pnpm run test

编写 step 可以使用下面三个方式:

  • run: 执行 shell 命令行命令;
  • env: 设置环境变量;
  • uses: 运行第三方 Action 脚本。

示例:

命令行是一种最好理解的执行方式,比如运行测试:

pnpm run test:run

你可以这样设置:

    - name: Run Test
      run: pnpm run test:run
但是对于一些比较复杂过程,自己配置起来就比较繁琐了,比如安装git。

首先要考虑不同系统,也需要确定是否有比如 apt-get 或 yum 等包管理工具。还需要运行安装并配置相应的环境变量。好在这些复杂操作大多数还是通用过程,这个时候就会用到 uses 来显神威了。

uses 可以用于Action。Action 可以认为是Github 提前写好的一些常用的脚本,当然这些脚本也支持自己定义。

marketplace

在这里插入图片描述

常见的通用操作包括:

  • 部署 (AWS 、App Engine 等各种云);
  • 代码 Review ;
  • 代码质量检测;
  • 监控;
  • 通知 (短信、飞书通知、钉钉)。

每个项目都遇到的常用操作,比如 checkout 检出代码、安装 pnpm 依赖等等,这些步骤显然不需要自己编写,直接使用脚本就可以了。

name: CI
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]
jobs:
  # Lint:
    # Lint任务
  UnitTest:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest
    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      - uses: actions/checkout@v2
      - uses: pnpm/action-setup@v2.1.0
        with:
          version: 7.2.1
      - name: Install modules
        run: pnpm install
      - name: Run Test
        run: pnpm run test:run

其中运行单元测试的命令还进行了一些修改,因为 vitest 是默认伺服模式,也就是说,它不会在运行完成后退出,所以就需要增加一个非伺服模式的命令。

"scripts": {
    "test:run": "vitest run",
  },

task3】运行 CI 服务

运行 GitHub Action 比较简单,只需要将工作流配置文件提交并且 pushGithub 就可以了。

根据触发器的配置,持续集成脚本会在每次提交 push 代码的时候触发。

在这里插入图片描述
在这里插入图片描述
运行成功的话会显示绿色对钩。

如果失败,那么就会显示 ❌ 并且自动发送邮件通知。

相关文章
|
2月前
|
对象存储
一个通过 GitHub Action 将 GitHub 仓库与阿里云 OSS 完全同步的脚本
一种将 GitHub 仓库完全同步到阿里云 OSS 的方法。
|
3月前
|
存储 中间件 API
ThinkPHP 集成 jwt 技术 token 验证
本文介绍了在ThinkPHP框架中集成JWT技术进行token验证的流程,包括安装JWT扩展、创建Token服务类、编写中间件进行Token校验、配置路由中间件以及测试Token验证的步骤和代码示例。
ThinkPHP 集成 jwt 技术 token 验证
|
2月前
|
存储 前端开发 JavaScript
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
本文介绍了10个极具价值的GitHub存储库,旨在帮助各级JavaScript开发人员提升技能。这些资源涵盖了从基本概念到高级算法、编码风格指南、面试准备等各个方面,包括经典书籍、实用工具和面试手册。无论您是刚入门的新手还是有经验的开发者,这些存储库都能为您提供丰富的学习资源,助您在JavaScript领域更进一步。探索这些资源,开启您的学习之旅吧!
66 0
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
|
4月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
115 1
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
4月前
|
Java Spring 传感器
AI 浪潮席卷,Spring 框架配置文件管理与环境感知,为软件稳定护航,你还在等什么?
【8月更文挑战第31天】在软件开发中,配置文件管理至关重要。Spring框架提供强大支持,便于应对不同环境需求,如电商项目的开发、测试与生产环境。它支持多种格式的配置文件(如properties和YAML),并能根据环境加载不同配置,如数据库连接信息。通过`@Profile`注解可指定特定环境下的配置生效,同时支持通过命令行参数或环境变量覆盖配置值,确保应用稳定性和可靠性。
68 0
|
4月前
|
jenkins 持续交付
jenkins学习笔记之九:jenkins认证集成github
jenkins学习笔记之九:jenkins认证集成github
|
4月前
|
Devops 持续交付 开发者
.NET自动化之旅:是Azure DevOps还是GitHub Actions能够打造完美的CI/CD流水线?
【8月更文挑战第28天】在现代软件开发中,持续集成(CI)与持续部署(CD)是提升代码质量和加速交付的关键实践。对于 .NET 应用,Azure DevOps 和 GitHub Actions 等工具可高效构建 CI/CD 流水线,提升开发效率并确保软件稳定可靠。Azure DevOps 提供一站式全流程管理,支持 YAML 定义的自动化构建、测试和部署;GitHub Actions 则以简洁灵活著称,适用于 .NET 项目的自动化流程。选择合适的工具可显著提高开发效率并确保高质量标准。
28 0
|
4月前
|
Linux C++ Docker
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
|
4月前
|
数据安全/隐私保护
【Azure Developer】Github Action使用Azure/login@v1插件登录遇见错误的替代方案
【Azure Developer】Github Action使用Azure/login@v1插件登录遇见错误的替代方案
|
4月前
|
Linux 网络安全 API
【Azure 应用服务】App Service For Linux 环境中,如何从App Service中获取GitHub私有库(Private Repos)的Deploy Key(RSA key)呢?
【Azure 应用服务】App Service For Linux 环境中,如何从App Service中获取GitHub私有库(Private Repos)的Deploy Key(RSA key)呢?
下一篇
DataWorks