为了账号安全,请及时绑定邮箱和手机立即绑定

GitHub Actions:教程

我们正在继续我们系列的改进GitHub工作流的内容。我们已经讨论过基本的GitHub工作流。现在,让我们来看看GitHub Actions。

GitHub Actions 初看之下似乎很复杂,但实际上它们非常有帮助。它让你可以在工作流程中设置自动化任务,这会让工作变得更轻松、更有条理。

你可能在想——

  • GitHub Actions究竟是什么?
  • 它真的那么重要吗?
  • 怎么用它呢?

别着急!别担心,本文会一一解答这些问题。我们会告诉你什么是 GitHub Actions,它的主要部分,它为什么有用,以及如何开始使用。

zh: 此处省略

GitHub Actions 是什么?

GitHub 操作是一个工具,可帮助你构建更优质的软件,不限于特定语言或平台,它是一个功能,可让你的工作流程自动化,比如自动构建、测试和部署你的项目,并将它们集成到仓库中,因此你可以将它与你的仓库一起使用,以实现自动化。


GitHub Actions 组件:

GitHub Actions Workflow diagram

你可以配置 GitHub Actions 工作流程,使其在你的仓库中发生某个 事件类型 时触发,例如有人打开一个拉取请求或创建一个问题。你的工作流程包含一个或多个 作业,这些作业可以按顺序执行,也可以并行执行。每个作业将在自己的虚拟机 运行器实例 中运行,或者在容器中运行,并包含一个或多个 步骤,这些步骤要么运行你定义的脚本或命令,要么运行一个 操作,这是一个可重用的扩展,可以简化你的工作流程。

  1. 工作流程
  • 工作流是一组在 YAML 文件中描述的自动化任务。通常,它会被放置在仓库根目录下的 .github/workflows 目录中。它描述了一个或多个可以由如代码推送、拉取请求等事件触发的任务。比如,你可以设置一个工作流,每当有新的拉取请求时就自动运行测试。

  • yaml 文件:是一种人类可读的数据序列化标准,可以与所有编程语言配合使用,并且经常用于编写配置文件。

  • .github 目录:是用来存放仓库配置文件的一个特殊目录,用于存储 GitHub Actions 工作流、问题模板和其他配置文件。
    1. 步骤
      步骤是可以在工作流中重复使用的代码单元,可以是一个命令或脚本。步骤可以用来自动化您的工作流,比如构建、测试和部署您的代码。
  1. 事件
    事件是在仓库中触发工作流运行的具体活动之一。例如,推送代码、创建拉取请求或发布新版本。

  2. 运行器
    运行器是在你的工作流被触发时运行这些工作流的虚拟机。你可以配置工作流在特定的虚拟机上运行,比如 Ubuntu、Windows 或 macOS。

  3. 工作和步骤
    一个工作流程由一个或多个任务组成,每个任务包含多个步骤。每个步骤要么是一个将执行的 shell 脚本,要么是一个将执行的操作。例如,你可以先构建应用程序,接着运行测试。

  4. Secrets :
    Secrets 是加密后的环境变量,您可以在工作流中使用它们。您可以使用 Secrets 来存储敏感信息,例如 API 密钥、密码和令牌。例如,如果您想使用 VERCEL_TOKEN 将您的应用部署到 Vercel,您可以将此令牌作为仓库中的秘密存储,并在工作流中使用它。

zh: zh: (此处省略)

让我们一起创建一个简单的 GitHub Actions 流程

我们要创建一个简单的GitHub Actions工作流,在每次推送代码到仓库时运行Eslint。下面来告诉你怎么做:

在你的 GitHub 仓库中,在 .github/workflows 目录下新建一个文件,创建一个工作流配置文件。你可以给文件起任何你喜欢的名字,但文件应该有 .yml 扩展名。比如说,可以命名为 main.yml

可以在 main.yml 文件里加上这些代码:

    name: Eslint 检查 # 名称: Eslint 检查
    on: [push] # 触发工作流的事件
    jobs: 
      eslint: # 作业名称
        runs-on: ubuntu-latest # 使用运行器
        steps: 
          - name: 启动作业 # 步骤名称
            run: echo "🚀 启动作业" # 要运行的命令

          - name: 检出代码
            uses: actions/checkout@v3 # 检出代码

          - name: 安装依赖
            run: npm ci # ci 用于更快地安装依赖

          - name: 运行 Eslint
            run: npx eslint .
  1. 提交更改并推送到您的代码库。

  2. 查看工作流程结果。

  3. 在你的 GitHub 仓库中,点击操作选项卡。
  4. 你应该能看到你的工作流程正在运行或已经完成。GitHub 操作摘要

就这样吧!你已经创建了你的第一个 GitHub Actions 工作流。现在,每当你推送代码时,Eslint 会自动运行检测你的代码。

让我们来创建一个更复杂一点的版本

我们的第二个任务是创建一个工作流程,在每次向主分支推送代码或提交拉取请求时运行Eslint和Prettier检查,然后构建应用程序。

    name: Eslint, Prettier 及 构建

    on:
      push:
        branches:
          - main
      pull_request:
        branches:
          - main

    jobs:
      eslint:
        name: Eslint 检查
        runs-on: ubuntu-latest

        steps:
          - name: 检出代码
            uses: actions/checkout@v3

          - name: 配置 node 环境
            uses: actions/setup-node@v3
            with:
              node-version: '18'

          - name: 安装依赖项
            run: npm ci

          - name: 运行 Eslint
            run: npx eslint .

      prettier:
        name: Prettier 检查
        runs-on: ubuntu-latest

        steps:
          - name: 检出代码
            uses: actions/checkout@v3

          - name: 配置 node 环境
            uses: actions/setup-node@v3
            with:
              node-version: '18'

          - name: 安装依赖项
            run: npm ci

          - name: 运行 Prettier
            run: npx prettier --check .

      build:
        name: 构建应用程序
        runs-on: ubuntu-latest

        needs: # 这表示此作业依赖于前面的作业
          - eslint
          - prettier

        steps:
          - name: 检出代码
            uses: actions/checkout@v3

          - name: 配置 node 环境
            uses: actions/setup-node@v3
            with:
              node-version: '18'

          - name: 安装依赖项
            run: npm ci

          - name: 执行 npm run build
            run: npm run build

全屏模式 退出全屏

咱们来创建我们的第三个也是最复杂的工作流

我们的第二个任务是创建一个工作流程,在每次向主分支提交拉取请求时自动运行Eslint和Prettier检查我们的代码,运行类型检查,构建应用程序并运行测试。

name: Eslint, Prettier, Typescript, Build, and Test

on:
  pull_request:
    branches:
      - master

jobs:
  eslint-prettier:
    name: Eslint 和 Prettier 检测
    runs-on: ubuntu-latest

    steps:
      - name: 进行代码检出
        uses: actions/checkout@v3

      - name: 设置 node 环境
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: 安装依赖
        run: npm ci

      - name: 运行 Eslint
        run: npx eslint .

      - name: 运行 Prettier
        run: npx prettier --check .

  typescript:
    name: Typescript 检测
    runs-on: ubuntu-latest

    needs:
      - eslint-prettier
      - typescript

    steps:
      - name: 进行代码检出
        uses: actions/checkout@v3

      - name: 设置 node 环境
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: 安装依赖
        run: npm ci

      - name: 运行 Typescript 检测
        run: npx tsc --noEmit

  build:
    name: 构建应用
    runs-on: ubuntu-latest

    needs:
      - eslint-prettier
      - typescript

    steps:
      - name: 进行代码检出
        uses: actions/checkout@v3

      - name: 设置 node 环境
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: 安装依赖
        run: npm ci

      - name: 构建应用
        run: npm run build

  test:
    name: 运行测试
    runs-on: ubuntu-latest

    needs: build

    steps:
      - name: 进行代码检出
        uses: actions/checkout@v3

      - name: 设置 node 环境
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: 安装依赖
        run: npm ci

      - name: 运行测试
        run: npm test

全屏模式 退出全屏

这里的工作流程是这样的:

GitHub Actions Workflow
GitHub Actions 工作流图示

(点击这里查看 GitHub Actions 工作流图示)


最后:

GitHub Actions 是一个强大的工具,帮助你自动化你的工作流程,让你的工作更轻松且更有条理。它让你设置自动任务,例如构建、测试和部署代码。你可以用它来自动化重复的任务,节省时间。

在这篇文章中,我们解释了什么是 GitHub Actions,它的主要部分,为什么它有用,以及怎样开始使用它。我们还共同创建了两个简单的 GitHub Actions 工作流程。希望这篇文章能帮助你更好地了解 GitHub Actions,并了解如何使用它来优化你的工作流程。


资源:

文章列表:

视频来啦!

这些链接指向视频中的特定时间点,可以观看相关内容。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消