React應用部署自動化工作流

React 應用部署自動化工作流可以幫助你更高效地將應用從開發環境部署到生產環境。以下是一個基本的自動化工作流示例，使用 GitHub Actions 和 Heroku：

1. 創建 GitHub 倉庫

首先，確保你已經有一個 GitHub 倉庫來托管你的 React 應用。

2. 創建 Heroku 應用

在 Heroku 上創建一個新的應用。你可以通過 Heroku 的 CLI 工具來完成這一步。

heroku create your-app-name

3. 配置 GitHub Actions 工作流

在你的 GitHub 倉庫中創建一個新的 .github/workflows 目錄，并在其中創建一個 YAML 文件，例如 deploy.yml。

name: Deploy React App

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

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

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

    - name: Install dependencies
      run: npm install

    - name: Build the application
      run: npm run build

    - name: Create a temporary directory for Heroku deployment
      run: mkdir .tmp

    - name: Copy build files to temporary directory
      run: cp -r build/. .tmp/

    - name: Deploy to Heroku
      env:
        HEROKU_API_KEY: ${{ secrets.HEROKU_API_KEY }}
      run: |
        git remote add heroku https://git.heroku.com/your-app-name.git
        git push heroku main --force
        cd .tmp
        git init
        git add .
        git commit -m "Deployed React app"
        git remote add heroku https://git.heroku.com/your-app-name.git
        git push heroku main
        cd ..
        rm -rf .tmp

4. 添加 Heroku API 密鑰

在 GitHub 倉庫的設置中，導航到 Secrets 部分，添加一個名為 HEROKU_API_KEY 的密鑰，并將其值設置為你的 Heroku API 密鑰。

5. 提交并推送工作流文件

將 deploy.yml 文件提交并推送到 GitHub 倉庫。

git add .github/workflows/deploy.yml
git commit -m "Add deploy workflow"
git push origin main

6. 觸發部署

每當你向 main 分支推送更改時，GitHub Actions 工作流將自動觸發并部署你的 React 應用到 Heroku。

7. 驗證部署

你可以通過訪問 https://your-app-name.herokuapp.com 來驗證應用是否已成功部署。

這個示例工作流涵蓋了從代碼推送到 Heroku 的整個流程，包括構建和部署。你可以根據自己的需求對其進行擴展和定制。