GitHub Actions入门：自动化你的工作流

嘿，开发者朋友们！你是不是也曾被重复的打包、测试、部署流程搞得焦头烂额？想不想让这些繁琐的工作自动化，把宝贵的精力和时间投入到更具创造性的编码中去？

今天，我们就来聊聊 GitHub Actions 这个神器，它能帮你轻松实现工作流自动化，让你的开发效率“嗖嗖”往上涨！

什么是 GitHub Actions？

简单来说，GitHub Actions 是 GitHub 自带的一套持续集成和持续交付（CI/CD）平台。 你可以在你的 GitHub 仓库中创建自定义的自动化流程，来构建、测试、打包、发布你的项目。 以后，每当你推送代码或创建拉取请求时，这些流程就会被自动触发，就像拥有了一个不知疲倦的机器人助手。

核心概念：几分钟让你上手

在开始之前，我们先来了解几个 GitHub Actions 的核心概念，别担心，非常简单：

• Workflow（工作流）： 整个自动化过程的“总剧本”。一个仓库可以有多个工作流，比如一个用于测试，一个用于发布。
• Job（任务）： 工作流由一个或多个任务组成。默认情况下，多个任务会并行执行，当然你也可以设置它们的依赖关系，让它们按顺序执行。
• Step（步骤）： 每个任务都包含一系列按顺序执行的步骤。步骤可以是运行一条命令，也可以是使用一个现成的 action。
• Action（动作）： 这是工作流中的最小单位，是一个可复用的代码块。你可以使用官方或社区提供的 action，也可以自己编写。这正是 GitHub Actions 强大的地方，你不必事事都亲力亲 hề，可以直接“站在巨人的肩膀上”。
• Runner（运行器）： 执行工作流的虚拟机环境。GitHub 提供了 Windows、Linux、macOS 等多种环境供你选择。

理解了这些，你就已经掌握了 GitHub Actions 的半壁江山！

实战演练：自动化构建一个简单的 React 应用

光说不练假把式，我们来动手实践一下。假设我们有一个 React 项目，希望每次向 main 分支推送代码时，都能自动完成依赖安装和项目构建。

第一步：创建 Workflow 文件

首先，你需要在你的项目根目录下创建一个 .github/workflows 目录。 然后，在这个目录里新建一个 .yml 文件，文件名可以任意取，比如 build-react-app.yml。

# .github/workflows/build-react-app.yml

name: Build React App # 工作流的名称

on:
  push:
    branches: [ main ] # 触发条件：当有代码推送到 main 分支时

jobs:
  build:
    runs-on: ubuntu-latest # 运行环境：使用最新的 Ubuntu 系统

    steps:
      - name: Checkout code # 步骤一：检出代码
        uses: actions/checkout@v3

      - name: Setup Node.js # 步骤二：设置 Node.js 环境
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install dependencies # 步骤三：安装依赖
        run: npm install

      - name: Build project # 步骤四：构建项目
        run: npm run build

第二步：代码解析

让我们逐行解析一下这个文件的内容：

• name: 定义了这个工作流的名称，它会显示在你的仓库的 “Actions” 标签页里。
• on: 定义了触发工作流的事件。这里我们设置的是 push 事件，并且限定了只有 main 分支的 push 才会触发。
• jobs: 定义了工作流中包含的任务。我们这里只有一个名为 build 的任务。
• runs-on: 指定了任务运行的虚拟机环境。我们选择了 ubuntu-latest。
• steps: 定义了任务中的各个步骤。
  • uses: actions/checkout@v3: 这是一个官方提供的 action，它的作用是将你的仓库代码克隆到虚拟机中，以便后续步骤可以访问。
  • uses: actions/setup-node@v3: 这是另一个官方 action，用于安装指定版本的 Node.js。
  • run: npm install 和 run: npm run build: run 关键字用来执行命令行脚本。这两行代码分别执行了安装依赖和构建项目的命令。

第三步：见证奇迹

将这个文件保存并推送到你的 GitHub 仓库的 main 分支。然后，点击仓库上方的 “Actions” 标签页，你就能看到你的工作流正在运行了！

（这是一个示例图片，实际效果请在你的仓库中查看）

你可以点进去查看详细的运行日志，看到每一步的执行情况。 如果一切顺利，你会看到所有步骤都成功完成。从此以后，每次你向 main 分支推送代码，GitHub Actions 都会自动为你执行这一套构建流程，是不是很酷？

更多玩法：部署到 GitHub Pages

自动化构建只是开胃菜，GitHub Actions 还能帮你自动部署。一个常见的场景是将构建好的静态网站部署到 GitHub Pages。

我们可以对上面的例子进行扩展，增加一个部署的步骤。这里我们会用到一个社区提供的非常方便的 action：JamesIves/github-pages-deploy-action。

# .github/workflows/build-and-deploy.yml

name: Build and Deploy

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install and Build
        run: |
          npm install
          npm run build

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # 部署到的分支
          folder: build # 需要部署的文件夹

在这个例子中，我们在构建完成后，增加了一个名为 “Deploy to GitHub Pages” 的步骤。这个步骤使用了 JamesIves/github-pages-deploy-action 这个 action，并配置了两个参数：

• branch: 指定要将构建产物部署到哪个分支，通常是 gh-pages。
• folder: 指定包含构建产物的文件夹，对于 React 项目来说，通常是 build 目录。

当你推送这段代码后，GitHub Actions 会自动构建你的项目，并将 build 目录下的所有文件推送到 gh-pages 分支。然后你只需要在仓库的设置中开启 GitHub Pages 功能，并选择 gh-pages 分支作为源，你的网站就成功上线了！

总结

通过今天的介绍，相信你已经对 GitHub Actions 有了一个基本的了解，并掌握了如何通过一个简单的例子来自动化你的工作流。当然，GitHub Actions 的功能远不止于此，它还可以用来发送通知、发布 npm 包、构建 Docker 镜像等等，拥有无限的可能性。

现在就动手，在你的项目中加入 GitHub Actions，告别重复劳动，拥抱自动化吧！