React應(yīng)用部署自動化工作流

React 應(yīng)用部署自動化工作流可以幫助你更高效地將應(yīng)用從開發(fā)環(huán)境部署到生產(chǎn)環(huán)境。以下是一個基本的自動化工作流示例，使用 GitHub Actions 和 Heroku：

1. 創(chuàng)建 GitHub 倉庫

首先，確保你已經(jīng)有一個 GitHub 倉庫來托管你的 React 應(yīng)用。

2. 創(chuàng)建 Heroku 應(yīng)用

在 Heroku 上創(chuàng)建一個新的應(yīng)用。你可以通過 Heroku 的 CLI 工具來完成這一步。

heroku create your-app-name

3. 配置 GitHub Actions 工作流

在你的 GitHub 倉庫中創(chuàng)建一個新的 .github/workflows 目錄，并在其中創(chuàng)建一個 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 倉庫的設(shè)置中，導(dǎo)航到 Secrets 部分，添加一個名為 HEROKU_API_KEY 的密鑰，并將其值設(shè)置為你的 Heroku API 密鑰。

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

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

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

6. 觸發(fā)部署

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

7. 驗證部署

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

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