在

在 GitHub Actions 上为 React App 设置 CI/CD 工作流程（使用 GitHub Pages 和 Codecov）入门测试覆盖率报告生成在 GitHub Pages 上部署添加状态徽章奖励：缓存依赖项参考

2025-05-24

在 GitHub Actions 上为 React App 设置 CI/CD 工作流程（使用 GitHub Pages 和 Codecov）

入门

测试覆盖率报告生成

在 GitHub Pages 上部署

添加状态徽章

奖励：缓存依赖项

参考

在本教程中，我将向您展示如何使用 React 创建我在个人项目中使用的简单工作流程。

这个在GitHub Actions上创建的工作流程将负责自动测试源代码、生成测试覆盖率报告并将其上传到Codecov ，以及在GitHub Pages上构建和部署项目。所有这些作业都由 master 分支上的推送或拉取请求事件激活。

所有源代码都可以在这个存储库中找到：

GitHub 徽标 dyarleniber / react-workflow-gh-actions

文章源代码：在 GitHub Actions 上为 React App 设置 CI/CD 工作流程（使用 GitHub Pages 和 Codecov）

入门

GitHub Actions 允许您直接在 GitHub 存储库中自动化、自定义和执行软件开发工作流程。

工作流程是由一个或多个作业组成的可配置自动化流程。您可以将工作流程配置为在 GitHub 上发生特定活动时、在预定时间或 GitHub 外部发生事件时运行。

工作流配置由 YAML 文件定义。GitHub 提供了预配置的工作流模板。

首先，在您的 React App GitHub 存储库上，导航到存储库的主页面，单击“操作”。

然后，您将看到最适合您项目的 CI 模板建议。您可以使用工作流模板作为构建自定义工作流的起点。
在本例中，请点击模板名称“Node.js”下的“设置此工作流”。

GitHub 页面上的操作

最后，您将看到一个如下所示的默认 YAML 文件：



# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test
Enter fullscreen mode Exit fullscreen mode

有两个事件会在推送或拉取请求时触发工作流。用于运行工作流的虚拟环境是最新版本的 Ubuntu 计算机。

在步骤部分中，使用了 2 个操作和 3 个 NPM 脚本。第一个操作actions/checkout@v2是一个标准操作，当您的工作流需要复制存储库代码时，必须在其他操作之前将其包含在工作流中。第二个操作，顾名思义，是针对 Node.js 的设置，如您所见，该设置是在不同版本的 Node.js 中进行的，通过一个包含所有使用版本的数组进行设置。

除了这些操作之外，您还可以在GitHub Marketplace中浏览和搜索操作以在您的工作流程中使用。

GitHub Marketplace 是您查找 GitHub 社区创建的操作的中心位置。

测试覆盖率报告生成

让我们开始更改名称、Node.js 版本和工作流中使用的 NPM 脚本：



name: CI/CD

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test

    - name: Build
      run: npm run build
Enter fullscreen mode Exit fullscreen mode

设置 Node.js 后，现在我们正在安装依赖项、运行测试和构建应用程序。

您可以为每个步骤定义一个名称。

现在，我们将使用 Codecov 上传和比较测试覆盖率报告。Codecov 是最流行的代码覆盖率解决方案之一，并且对于开源项目来说完全免费。

首先，前往Codecov网站并创建一个账户，你可以使用你的GitHub账户进行注册。

接下来，访问网站上的帐户，单击“存储库”，然后单击“添加新存储库”并选择要使用的存储库。

Codecov接口

您将看到一个令牌，如果您的存储库是公共的，则该令牌将无用，否则，如果您的存储库是私有的，则必须复制它，因为您稍后需要使用它。

GitHub Marketplace 中有一个可用的操作，可以轻松地将报告上传到 Codecov，我们将使用它。

我们需要做的第一件事是更改npm test生成测试报告的命令：



- name: Run the tests and generate coverage report
  run: npm test -- --coverage
Enter fullscreen mode Exit fullscreen mode

之后，在工作流中包括以下操作：



- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v1
Enter fullscreen mode Exit fullscreen mode

如果你的仓库是私有的，则必须通过一个秘钥包含 codecov 令牌，该秘钥确保你的令牌在工作流中可被访问。像这样：



- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v1
  with:
    token: ${{ secrets.CODECOV_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

我们稍后会在 GitHub 上创建一个秘密以供部署。

在 GitHub Pages 上部署

我们将使用 GitHub Pages 来部署我们的应用程序。GitHub Pages 是通过 GitHub 托管和发布的公共页面。

在向工作流添加新步骤之前，我们需要在项目中安装并配置一个新包。

  1. 添加主页至package.json。

打开package.json您的项目并添加主页字段：



"homepage": "https://myusername.github.io/my-app",
Enter fullscreen mode Exit fullscreen mode
  1. 安装gh-pages并添加deploy到。scriptspackage.json

跑步：



$ npm install --save gh-pages
Enter fullscreen mode Exit fullscreen mode

在您的中添加以下脚本package.json：



"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Enter fullscreen mode Exit fullscreen mode

该脚本将在运行predeploy之前自动运行。deploy

现在我们将创建一个新的访问令牌，以便通过工作流部署我们的应用程序。

转到GitHub 个人资料的开发者设置中的个人访问令牌区域，然后单击生成新令牌。

创建个人访问令牌

填写注释（这个令牌是用来做什么的？）并在 repo 范围内仅选择前 4 个选项。

个人访问令牌范围

复制生成的令牌。

现在，为了在 GitHub Actions 上的工作流中使用此令牌，我们必须为我们的存储库创建一个秘密。

Secret 是加密的环境变量，可用于在仓库中存储敏感信息。您创建的 Secret 可在 GitHub Actions 工作流程中使用。

在 GitHub 上，导航到仓库主页，在仓库名称下，单击“设置”。在左侧边栏中，单击“机密”。最后，单击“添加新机密”。

替代文本

在名称输入框中输入您的秘密的名称，例如ACTIONS_DEPLOY_ACCESS_TOKEN。

输入您的秘密的值（应该是我们刚刚创建的个人访问令牌）。

单击添加机密。

最后，我们可以将脚本npm run deploy作为工作流程的最后一步。

但在此之前，我们应该在 Git 中进行一些配置，以确保它拥有部署应用程序所需的所有必要访问权限。

您的工作流程的最后一步应该是这样的：



- name: Deploy
  run: |
    git config --global user.name $user_name
    git config --global user.email $user_email
    git remote set-url origin https://${github_token}@github.com/${repository}
    npm run deploy
  env:
    user_name: 'github-actions[bot]'
    user_email: 'github-actions[bot]@users.noreply.github.com'
    github_token: ${{ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN }}
    repository: ${{ github.repository }}
Enter fullscreen mode Exit fullscreen mode

姓名和邮箱信息不一定是你的真实信息，必须替换ACTIONS_DEPLOY_ACCESS_TOKEN成你刚刚创建的 secret 的名称。

该github.repository变量将自动获取您的存储库的名称。

要了解有关 GitHub Actions 上的环境变量的更多信息，请阅读本文。

在工作流中添加部署命令后，单击“开始提交”，然后单击“提交新文件”。

工作流提交

您的最终工作流文件应如下所示：



name: CI/CD

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests and generate coverage report
      run: npm test -- --coverage

    - name: Upload coverage to Codecov
      uses: codecov/codecov-action@v1

    - name: Build
      run: npm run build

    - name: Deploy
      run: |
        git config --global user.name $user_name
        git config --global user.email $user_email
        git remote set-url origin https://${github_token}@github.com/${repository}
        npm run deploy
      env:
        user_name: 'github-actions[bot]'
        user_email: 'github-actions[bot]@users.noreply.github.com'
        github_token: ${{ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN }}
        repository: ${{ github.repository }}
Enter fullscreen mode Exit fullscreen mode

确保 GitHub 项目设置中的 GitHub Pages 选项设置为使用 gh-pages 分支：
gh-pages 分支

现在，在主分支上每次推送或拉取请求时，CI/CD 工作流都会被激活。您将能够看到所有步骤是否都已完成。

工作流执行

添加状态徽章

您还可以将工作流程状态徽章添加到您的仓库。状态徽章显示工作流程当前是失败还是通过。状态徽章的常见添加位置是README.md仓库文件中，但您也可以将其添加到任何您想要的网页上。

这是 GitHub Actions 提供的添加工作流状态徽章的默认 URL：



https://github.com/<OWNER>/<REPOSITORY>/workflows/<WORKFLOW_NAME>/badge.svg
Enter fullscreen mode Exit fullscreen mode

如果您的工作流使用 name 关键字，则必须通过名称引用该工作流。如果工作流名称包含空格，则需要将空格替换为 URL 编码字符串 %20。

有关 GitHub Actions 工作流状态徽章的更多信息，请阅读本文。

例如，这将是我放入README.md文件中的徽章：



![CI/CD](https://github.com/dyarleniber/react-workflow-gh-actions/workflows/CI/CD/badge.svg)
Enter fullscreen mode Exit fullscreen mode

Codecov 还提供了一个可以在项目中使用的徽章。以下是 URL 的示例：



[![codecov](https://codecov.io/gh/<OWNER>/<REPOSITORY>/branch/master/graph/badge.svg)](https://codecov.io/gh/<OWNER>/<REPOSITORY>)
Enter fullscreen mode Exit fullscreen mode

就我而言，我的 URL 将是：



[![codecov](https://codecov.io/gh/dyarleniber/react-workflow-gh-actions/branch/master/graph/badge.svg)](https://codecov.io/gh/dyarleniber/react-workflow-gh-actions)
Enter fullscreen mode Exit fullscreen mode

您还可以使用这个很棒的网站：Shields.io来自定义您的徽章。访问该网站后，您将看到许多可用的徽章类别选项，例如构建、代码覆盖率、大小、下载量、许可证等等。在每个类别中，您可以选择您正在使用的服务，填写存储库名称，根据您的喜好进行自定义，然后复制徽章链接。

例如，这将是我的自定义覆盖徽章：



[![Codecov](https://img.shields.io/codecov/c/github/dyarleniber/react-workflow-gh-actions)](https://codecov.io/gh/dyarleniber/react-workflow-gh-actions)
Enter fullscreen mode Exit fullscreen mode

我还附上了一张许可证徽章：



![License](https://img.shields.io/github/license/dyarleniber/react-workflow-gh-actions)
Enter fullscreen mode Exit fullscreen mode

您的文件中的这些徽章README.md应如下所示：

徽章

您可以浏览Shields.io网站并查看可用的不同徽章选项。

奖励：缓存依赖项

为了使您的工作流程更快、更高效，您可以为依赖项和其他常用的文件创建和使用缓存。

GitHub 可以缓存您在工作流程中经常使用的依赖项。GitHub 托管的运行器上的作业在干净的虚拟环境中启动，并且每次都必须下载依赖项，这会导致网络利用率增加、运行时间延长以及成本增加。

要缓存作业的依赖项，您需要使用 GitHub 的cache操作。该操作会检索由唯一键标识的缓存。更多信息请参阅actions/cache。

在我们的例子中，当文件中的软件包package-lock.json发生变化，或者运行器的操作系统发生变化时，我们可以创建一个新的缓存。缓存键使用上下文和表达式来生成一个包含运行器操作系统和文件 SHA-256 哈希值的键package-lock.json。

在安装依赖项之前，您应该包含以下代码片段：



    - name: Cache dependencies
      uses: actions/cache@v2
      with:
        path: |
          **/node_modules
        key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
Enter fullscreen mode Exit fullscreen mode

是key必需的。它是保存缓存时创建的键，也是用于搜索缓存的键。键的最大长度为 512 个字符。

是path必需的。它是运行器上要缓存或恢复的文件路径。可以是绝对路径，也可以是相对于工作目录的相对路径。路径输入必须是目录。您不能缓存单个文件。

是可选参数。它restore-keys是一个有序的备选键列表，用于在键未发生缓存命中时查找缓存。

该cache操作将尝试根据key您提供的路径还原缓存。当找到缓存时，它会将缓存文件还原到path您配置的路径。如果没有完全匹配，则该操作会在作业成功完成时创建一个新的缓存条目。新的缓存将使用key您提供的路径，并包含目录中的文件path。

参考

文章来源：https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp
Devto 翻译
PREV
CSS Flexbox 速查表 v3
NEXT
如何在 Visual Studio Code 中通过 Cline 或 Roo Code 免费使用 DeepSeek R1