React應用持續集成工作流構建

React 應用的持續集成（CI）工作流構建可以幫助你自動化測試、構建和部署過程，從而提高開發效率和代碼質量。以下是一個基本的 React 應用 CI 工作流構建示例，使用 GitHub Actions 作為 CI 工具：

1. 創建 GitHub 倉庫

首先，確保你有一個 GitHub 倉庫來存儲你的 React 項目。

2. 設置 GitHub Actions 工作流

在你的 GitHub 倉庫中，創建一個 .github/workflows 文件夾，并在其中創建一個 YAML 文件來定義你的 CI 工作流。例如，創建一個名為 ci.yml 的文件。

name: React CI Workflow

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

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

    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm ci

    - name: Run tests
      run: npm test

    - name: Build project
      run: npm run build

    - name: Deploy to GitHub Pages
      if: github.ref == 'refs/heads/main'
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./build

3. 配置 npm 腳本

在你的 package.json 文件中，確保你有以下腳本：

{
  "scripts": {
    "test": "react-scripts test",
    "build": "react-scripts build"
  }
}

4. 解釋工作流

• Checkout code: 克隆你的代碼倉庫。
• Set up Node.js: 設置 Node.js 環境。
• Install dependencies: 使用 npm ci 安裝依賴，這比 npm install 更快且更可靠。
• Run tests: 運行你的測試套件。
• Build project: 構建你的 React 項目。
• Deploy to GitHub Pages: 如果推送到 main 分支，則將構建的靜態文件部署到 GitHub Pages。

5. 提交并推送

將 .github/workflows/ci.yml 文件提交并推送到你的 GitHub 倉庫。這樣，每當你推送代碼到 main 分支或創建 Pull Request 時，GitHub Actions 都會自動觸發 CI 工作流。

6. 查看 CI 狀態

你可以在 GitHub 倉庫的 “Actions” 標簽頁中查看 CI 工作的狀態和歷史記錄。

通過以上步驟，你可以設置一個基本的 React 應用 CI 工作流，自動化測試、構建和部署過程。根據你的具體需求，你可以進一步定制和擴展這個工作流。