使用 GitHub Actions 自动化您的构建

目录

先决条件

完成本指南的所有前面章节，从容器化 React.js 应用程序开始。

您还必须拥有

概述

在本节中，您将使用 GitHub Actions 设置一个 CI/CD 管道，以自动执行以下操作：

  • 在 Docker 容器中构建您的 React.js 应用程序。
  • 在一致的环境中运行测试。
  • 将生产就绪镜像推送到 Docker Hub。

将您的 GitHub 仓库连接到 Docker Hub

要让 GitHub Actions 能够构建和推送 Docker 镜像，您需要将 Docker Hub 凭据安全地存储在新 GitHub 仓库中。

步骤 1：将您的 GitHub 仓库连接到 Docker Hub

  1. 从 Docker Hub 创建个人访问令牌 (PAT)

    1. 转到您的 Docker Hub 账户 → 账户设置 → 安全。
    2. 生成一个具有读/写权限的新访问令牌。
    3. 将其命名为类似 docker-reactjs-sample 的名称。
    4. 复制并保存令牌 — 您将在步骤 4 中用到它。

  2. 在 Docker Hub 中创建仓库

    1. 转到您的 Docker Hub 账户 → 创建仓库。
    2. 仓库名称请使用描述性名称 — 例如：reactjs-sample。
    3. 创建后，复制并保存仓库名称 — 您将在步骤 4 中用到它。

  3. 为您的 React.js 项目创建一个新的 GitHub 仓库

  4. 将 Docker Hub 凭据添加为 GitHub 仓库机密

    在您新创建的 GitHub 仓库中

    1. 导航到：设置 → 机密和变量 → 操作 → 新建仓库机密。

    2. 添加以下机密

    名称值
    DOCKER_USERNAME您的 Docker Hub 用户名
    DOCKERHUB_TOKEN您的 Docker Hub 访问令牌（在步骤 1 中创建）
    DOCKERHUB_PROJECT_NAME您的 Docker 项目名称（在步骤 2 中创建）

    这些机密允许 GitHub Actions 在自动化工作流程期间安全地向 Docker Hub 进行身份验证。

  5. 将您的本地项目连接到 GitHub

    从您的项目根目录运行以下命令，将您的本地项目 docker-reactjs-sample 链接到您刚刚创建的 GitHub 仓库

       $ git remote set-url origin https://github.com/{your-username}/{your-repository-name}.git
    重要

    将 {your-username} 和 {your-repository} 替换为您的实际 GitHub 用户名和仓库名称。

    要确认您的本地项目已正确连接到远程 GitHub 仓库，请运行

    $ git remote -v

    您应该看到类似于以下的输出

    origin  https://github.com/{your-username}/{your-repository-name}.git (fetch)
origin  https://github.com/{your-username}/{your-repository-name}.git (push)

    这确认您的本地仓库已正确链接并准备好将源代码推送到 GitHub。

  6. 将您的源代码推送到 GitHub

    按照以下步骤将您的本地项目提交并推送到您的 GitHub 仓库

    1. 暂存所有文件以进行提交。

      $ git add -A

      此命令暂存所有更改——包括新建、修改和删除的文件——为提交做准备。

    2. 提交您的更改。

      $ git commit -m "Initial commit"

      此命令创建一个提交，其中包含带有描述性消息的暂存更改快照。

    3. 将代码推送到 main 分支。

      $ git push -u origin main

      此命令将您的本地提交推送到远程 GitHub 仓库的 main 分支，并设置上游分支。

完成后，您的代码将在 GitHub 上可用，并且您配置的任何 GitHub Actions 工作流程都将自动运行。

注意

了解有关此步骤中使用的 Git 命令的更多信息

  • Git add – 暂存更改（新建、修改、删除）以进行提交
  • Git commit – 保存暂存更改的快照
  • Git push – 将本地提交上传到您的 GitHub 仓库
  • Git remote – 查看和管理远程仓库 URL

步骤 2：设置工作流程

现在，您将创建一个 GitHub Actions 工作流程，用于构建您的 Docker 镜像、运行测试并将镜像推送到 Docker Hub。

  1. 转到您在 GitHub 上的仓库，并在顶部菜单中选择Actions选项卡。

  2. 出现提示时选择Set up a workflow yourself。

    这将打开一个内联编辑器以创建新的工作流程文件。默认情况下，它将保存到：.github/workflows/main.yml

  3. 将以下工作流程配置添加到新文件

name: CI/CD – React.js Application with Docker

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
    types: [opened, synchronize, reopened]

jobs:
  build-test-push:
    name: Build, Test and Push Docker Image
    runs-on: ubuntu-latest

    steps:
      # 1. Checkout source code
      - name: Checkout source code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Fetches full history for better caching/context

      # 2. Set up Docker Buildx
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      # 3. Cache Docker layers
      - name: Cache Docker layers
        uses: actions/cache@v4
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: ${{ runner.os }}-buildx-

      # 4. Cache npm dependencies
      - name: Cache npm dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
          restore-keys: ${{ runner.os }}-npm-

      # 5. Extract metadata
      - name: Extract metadata
        id: meta
        run: |
          echo "REPO_NAME=${GITHUB_REPOSITORY##*/}" >> "$GITHUB_OUTPUT"
          echo "SHORT_SHA=${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"

      # 6. Build dev Docker image
      - name: Build Docker image for tests
        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile.dev
          tags: ${{ steps.meta.outputs.REPO_NAME }}-dev:latest
          load: true # Load to local Docker daemon for testing
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max

      # 7. Run Vitest tests
      - name: Run Vitest tests and generate report
        run: |
          docker run --rm \
            --workdir /app \
            --entrypoint "" \
            ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
            sh -c "npm ci && npx vitest run --reporter=verbose"
        env:
          CI: true
          NODE_ENV: test
        timeout-minutes: 10

      # 8. Login to Docker Hub
      - name: Log in to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      # 9. Build and push prod image
      - name: Build and push production image
        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile
          push: true
          platforms: linux/amd64,linux/arm64
          tags: |
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:latest
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:${{ steps.meta.outputs.SHORT_SHA }}
          cache-from: type=local,src=/tmp/.buildx-cache

此工作流程为您的 React.js 应用程序执行以下任务

  • 在每次针对 main 分支的 push 或 pull request 时触发。
  • 使用 Dockerfile.dev 构建一个开发 Docker 镜像，该镜像已针对测试进行了优化。
  • 在干净的容器化环境中，使用 Vitest 执行单元测试以确保一致性。
  • 如果任何测试失败，则立即停止工作流程 — 强制执行代码质量。
  • 缓存 Docker 构建层和 npm 依赖项，以加快 CI 运行速度。
  • 使用 GitHub 仓库机密安全地向 Docker Hub 进行身份验证。
  • 使用 Dockerfile 中的 prod 阶段构建生产就绪镜像。
  • 使用 latest 和短 SHA 标签标记最终镜像并推送到 Docker Hub，以实现可追溯性。
注意

有关 docker/build-push-action 的更多信息，请参阅 GitHub Action README。

步骤 3：运行工作流程

添加工作流程文件后，是时候触发并观察 CI/CD 过程的实际运行了。

  1. 提交并推送您的工作流程文件

    在 GitHub 编辑器中选择“Commit changes...”。

    • 此推送将自动触发 GitHub Actions 管道。

  2. 监控工作流程执行

    1. 转到您的 GitHub 仓库中的 Actions 选项卡。
    2. 点击工作流程运行以跟踪每个步骤：构建、测试和（如果成功）推送。

  3. 在 Docker Hub 上验证 Docker 镜像

    • 成功完成工作流程运行后，请访问您的 Docker Hub 仓库。
    • 您应该在您的仓库下看到一个新镜像，其中包含
      • 仓库名称：${your-repository-name}
      • 标签包括
        • latest – 表示最近一次成功的构建；非常适合快速测试或部署。
        • <short-sha> – 基于提交哈希的唯一标识符，有助于版本跟踪、回滚和可追溯性。
提示

要保持代码质量并防止意外的直接推送，请启用分支保护规则

  • 导航到您的 GitHub 仓库 → 设置 → 分支。
  • 在分支保护规则下，点击添加规则。
  • 将 main 指定为分支名称。
  • 启用以下选项
    • 在合并之前需要拉取请求.
    • 在合并之前需要通过状态检查.

这确保只有经过测试和审查的代码才能合并到 main 分支中。

摘要

在本节中，您使用 GitHub Actions 为您的容器化 React.js 应用程序设置了一个完整的 CI/CD 管道。

以下是您完成的工作

  • 为您的项目创建了一个新的 GitHub 仓库。
  • 生成了一个安全的 Docker Hub 访问令牌并将其作为机密添加到 GitHub。
  • 定义了一个 GitHub Actions 工作流程以
    • 在 Docker 容器中构建您的应用程序。
    • 在一致的容器化环境中运行测试。
    • 如果测试通过，则将生产就绪镜像推送到 Docker Hub。
  • 通过 GitHub Actions 触发并验证了工作流程执行。
  • 确认您的镜像已成功发布到 Docker Hub。

通过此设置，您的 React.js 应用程序现在可以进行跨环境的自动化测试和部署 — 从而提高信心、一致性和团队生产力。

加深您对自动化和容器化应用程序最佳实践的理解

后续步骤

接下来，了解如何在部署之前在 Kubernetes 上本地测试和调试您的 React.js 工作负载。这有助于您确保应用程序在类似生产的环境中按预期运行，从而减少部署期间的意外情况。

测试您的 React.js 部署 »
© . This site is unofficial and not affiliated with Kubernetes or Docker Inc.