React 的 GitHub Actions CI/CD
在每次推送时，通过 GitHub Actions 工作流自动执行代码检查、测试、构建和部署步骤
React 的 GitHub Actions CI/CD 是 CoddyKit 上的免费 React Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
什么是 GitHub Actions
GitHub Actions 是集成在 GitHub 中的持续集成与持续交付平台。在 .github/workflows/ 下的 YAML 文件中定义工作流，使其在推送、拉取请求或定时事件发生时运行。
基础持续集成工作流
一个最小化的工作流：每次推送和拉取请求时安装依赖项、运行代码检查并运行测试。
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm'
- run: npm ci
- run: npm run lint
- run: npm test -- --coverage缓存 node_modules
缓存 ~/.npm（npm 缓存，而不是 node_modules），以加快依赖项安装。actions/setup-node 会通过 cache 选项处理此操作。
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm' # caches ~/.npm based on package-lock.json hash构建步骤
在测试之后添加构建步骤，以验证项目能够无错误地编译。
- name: Build
run: npm run build
# For Next.js — catch TypeScript errors:
- name: Type Check
run: npx tsc --noEmit合并时部署到 Vercel
使用工作流中的 Vercel CLI，在推送到 main 分支时部署到 Vercel。
- name: Deploy to Vercel
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
run: |
npm install -g vercel
vercel pull --yes --environment=production --token=$VERCEL_TOKEN
vercel build --prod --token=$VERCEL_TOKEN
vercel deploy --prebuilt --prod --token=$VERCEL_TOKEN合并时部署到 S3
将构建产物同步到 S3，并在 main 分支构建成功后使 CloudFront 缓存失效。
- name: Deploy to S3
if: github.ref == 'refs/heads/main'
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
aws s3 sync dist/ s3://my-bucket/ --delete
aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"持续集成中的 Playwright E2E
构建完成后，在持续集成中运行 Playwright E2E 测试。通过专用步骤安装浏览器二进制文件。
- name: Install Playwright Browsers
run: npx playwright install --with-deps chromium
- name: Run E2E Tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: failure()
with:
name: playwright-report
path: playwright-report/并行矩阵作业
使用矩阵策略，在多个 Node.js 版本或环境中并行运行测试。
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18, 20, 22]
steps:
- uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}密钥管理
将敏感值（API 密钥、部署令牌）存储为 GitHub Secrets（代码库 → 设置 → 密钥）。在工作流中通过 ${{ secrets.MY_SECRET }} 访问它们。
条件步骤
使用 if: 条件，仅在特定分支、拉取请求事件发生时，或前面的步骤成功后运行步骤。
- name: Deploy
if: github.ref == 'refs/heads/main' && github.event_name == 'push'
run: npm run deploy状态徽章
将构建状态徽章添加到 README，以便一眼查看持续集成状态。
<!-- README.md -->
快速检查
GitHub Actions 的哪项功能可以同时在多种配置（例如不同的 Node.js 版本）下运行同一作业？
回顾
在 .github/workflows/ 中使用 YAML 定义持续集成工作流。将 actions/setup-node 与 cache: 'npm' 搭配使用，以加快安装速度。添加代码检查、类型检查、测试和构建步骤。在推送到 main 分支时有条件地部署。将密钥存储在 GitHub Secrets 中，并使用矩阵构建进行多版本测试。
常见问题解答
「React 的 GitHub Actions CI/CD」课时是免费的吗？
是的 — 「React 的 GitHub Actions CI/CD」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「React 的 GitHub Actions CI/CD」这节课中我会学到什么？
在每次推送时，通过 GitHub Actions 工作流自动执行代码检查、测试、构建和部署步骤 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「React 的 GitHub Actions CI/CD」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 部署到 Vercel：零配置与预览 URL
- 在 AWS S3 与 CloudFront 上托管 React SPA
- 将 React/Next.js 应用容器化
- React 的 GitHub Actions CI/CD