React 应用架构实战 0x8：配置 CI/CD 进行测试和部署
React 应用架构实战 0x8：配置 CI/CD 进行测试和部署
在本节中，我们将学习什么是 CI/CD 。然后，我们将学习 GitHub Actions 是什么以及 GitHub Actions 流水线的主要部分是什么。然后，我们将学习如何创建一个 CI/CD 流水线，将自动验证并将应用程序部署到 Vercel。
# 什么是 CI/CD
持续集成/持续部署（CI/CD）是一种自动化地向应用程序用户提供应用程序变更的方法。CI/CD 通常应包括以下几个部分：
- 持续集成是验证代码已经构建、测试并合并到仓库的自动化过程
- 持续交付是将更改交付到仓库的过程
- 持续部署是将更改发布到生产服务器，使更改可供用户使用的过程
现在，让我们考虑如何为应用程序实现 CI/CD 。我们已经拥有了所有必需的部分——只需要将它们组合起来。整个流程将如下所示：
- 运行应用程序的所有代码检查（单元测试和集成测试、linting、类型检查、格式检查等）
- 构建应用程序并运行端到端测试
- 如果两个过程都成功完成，我们可以部署我们的应用程序
这个过程将确保我们的应用程序始终处于最佳状态，并且更改可以频繁且轻松地发布到生产环境。当在较大的团队中工作时，每天都会引入许多更改，因此这尤其有用。
为了运行 CI/CD 流水线，我们需要适当的基础设施。由于我们将仓库放在 GitHub 上，因此我们可以使用 GitHub Actions 来处理 CI/CD。
# 使用 GitHub Actions
GitHub Actions 是一种 CI/CD 工具，它允许我们自动化、构建、测试和部署流水线。我们可以创建在仓库中的特定事件上运行的 workflow 。
# Workflow
workflow 是一个可以运行一个或多个任务（job）的过程。我们可以在 .github/workflows 文件夹中以 YAML 格式定义它们。workflow 会在触发指定事件（Event）时运行，我们还可以直接从 GitHub 手动重新运行 workflow。一个仓库可以有任意多个 workflow。
# Event
一个事件被触发时，将会引起 workflow 运行。GitHub 的活动可以触发事件，例如将代码推送到仓库或创建一个 pull 请求。此外，它们也可以定时启动或通过 HTTP POST 请求启动。
# Job
一个 job 定义了一系列在 workflow 中会执行的步骤。一个步骤可以是一个 action 或者可以被执行的脚本。一个 workflow 可以有多个 job，它们可以并行执行，或者在依赖的 job 执行完成后再开始执行。
# Action
Action 是在 GitHub Actions 上运行的应用程序，用于执行重复任务。我们可以使用已经构建好的 Action，它们可以在 https://github.com/marketplace?type=actions (opens new window) 上找到，或者我们可以自己创建。在我们的流程中，我们将使用一些预定义的 Actions。
# Runner
runner 是用于运行 workflow 的服务，它可以托管在 GitHub 上，但也可以自行托管。
现在我们已经熟悉了 GitHub Actions 的基础知识，可以开始创建我们的应用程序工作流程。
让我们创建 .github/workflows/main.yml 文件和初始代码：
name: CI/CD
on:
- push
jobs:
# add jobs here在上面的代码中，我们提供了工作流的名称，如果我们省略它，名称将被设置为工作流文件的名称。在这里，我们定义了 push 事件，这会使每当代码更改被推送到仓库时，工作流就会运行。
对于我们定义的每个 job，我们将提供以下内容：
name: Name of the job
runs-on: ubuntu-latest
这些属性将适用于所有 job：
name：设置运行作业的名称runs-on：设置将运行作业的运行程序
# 配置测试流水线
我们的测试流水线将包含两个 job，应该完成以下操作：
- 运行所有代码检查，如 linting，类型检查，单元测试和集成测试等
- 构建应用程序并运行端到端测试
# 代码检查
name: CI/CD
on:
- push
jobs:
code-checks:
name: Code Checks
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- run: mv .env.example .env
- run: npm install
- run: npm run test
- run: npm run lint
# E2E 测试
name: CI/CD
on:
- push
jobs:
# ...
e2e:
name: E2E Tests
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: mv .env.example .env
- uses: cypress-io/github-action@v4
with:
build: npm run build
start: npm run start
# 部署到 Vercel
Vercel 是一个平台，它与 GitHub 具有出色的集成性。这意味着每当我们推送更改到仓库时，应用程序的新版本将自动部署到 Vercel 上。但是，我们希望在部署步骤之前验证我们的应用程序是否按预期工作，以便我们可以从 CI/CD 流程中执行此任务。
要做到这一点，我们需要在 Vercel 中禁用 GitHub 集成。这可以通过创建包含以下内容的 vercel.json 文件来完成:
{
"github": {
"silent": true
}
}
现在，我们可以在 workflow 中添加部署步骤：
name: CI/CD
on:
- push
jobs:
deploy:
name: Deploy To Vercel
runs-on: ubuntu-latest
needs: [code-checks, e2e]
if: github.repository_owner == 'cellinlab'
permissions:
contents: read
deployments: write
steps:
- name: start deployment
uses: bobheadxi/deployments@v1
id: deployment
with:
step: start
token: ${{ secrets.GITHUB_TOKEN }}
env: ${{ fromJSON('["Production", "Preview"]')[github.ref != 'refs/heads/main'] }}
- uses: actions/checkout@v3
- run: mv .env.example .env
- uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-args: ${{ fromJSON('["--prod", ""]')[github.ref != 'refs/heads/main'] }}
vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}}
scope: ${{ secrets.VERCEL_ORG_ID}}
working-directory: ./
- name: update deployment status
uses: bobheadxi/deployments@v1
if: always()
with:
step: finish
token: ${{ secrets.GITHUB_TOKEN }}
status: ${{ job.status }}
env: ${{ steps.deployment.outputs.env }}
deployment_id: ${{ steps.deployment.outputs.deployment_id }}腾讯云开发者
