在GitHub Pages部署React应用时无法通过GitHub Secrets传递环境变量的问题求助

Let's break down why your GitHub Secrets aren't being passed correctly to your React app, and walk through reliable solutions to get your environment variables working in production.

Core Problem #

Your setup works when hardcoding values or passing variables directly in npm scripts, but fails when using GitHub Secrets because either the .env file isn't being created correctly, or the secret isn't being properly injected into the build process.

Solution 1: Skip .env – Inject Variables Directly in the Build Command #

This is the simplest and most reliable approach (you already confirmed this works with npm scripts, so we'll adapt it for GitHub Actions):

Instead of creating a .env file, inject the secret directly into the npm run build command. React will pick up the environment variable during the build process just like it does from a .env file.

Update your GitHub Actions YAML:

jobs:
  front-build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4 # Use the latest version for better reliability
      - name: Install dependencies
        run: |
          cd front-app
          npm install
      - name: Build app with production API URL
        run: |
          cd front-app
          # Inject the secret directly into the build command
          REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }} npm run build
      - name: Deploy to GitHub Pages
        ...

Solution 2: Fix .env File Creation (If You Prefer This Approach) #

If you want to keep using a .env file, the issue is likely with how you're writing the secret to the file. Here's the corrected setup with debugging to verify the secret is being written:

jobs:
  front-build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      - name: Create .env file with GitHub Secrets
        run: |
          cd front-app
          # Write the secret to .env (use > to overwrite, >> to append if needed)
          echo "REACT_APP_DEV_SERVER_URL=${{ secrets.DEV_SERVER_URL }}" > .env
          # Debug: Print the .env content to the Actions log to confirm the secret is present
          echo "=== Generated .env content ==="
          cat .env
      - name: Install dependencies
        run: |
          cd front-app
          npm install
      - name: Build app
        run: |
          cd front-app
          npm run build
      - name: Deploy to GitHub Pages
        ...

Critical Checks for This Approach #

1. Verify GitHub Secrets Setup:
   • Go to your repo's Settings > Secrets and variables > Actions
   • Confirm you have a secret named DEV_SERVER_URL with the correct value (e.g., https://username.cloudTech.com/ – don't forget the trailing slash to avoid URL issues)
   • Ensure the secret is a repository-level secret (or that your repo has access to any organization-level secret you're using)
2. Check Actions Logs:
   • After running the workflow, look at the output of the "Create .env file" step. The cat .env command will show you exactly what's in the file – if it's empty or missing the secret, there's a problem with your secret's permissions or name.

Handling Dev vs Production Environments #

To maintain separate configs for local development and production:

• Local Dev: Create a .env.development file in your front-app folder with:

  REACT_APP_DEV_SERVER_URL=http://127.0.0.1:5000/
  

  React will automatically use this file when you run npm start.
• Production: Use either of the solutions above to inject the GitHub Secret during the GitHub Actions build.

Why Your Previous Attempts Failed #

• Your initial .env creation command didn't use echo, so the shell tried to execute the variable assignment as a command instead of writing it to the file.
• Even after adding echo, missing quotes or incorrect redirection could have prevented the secret from being properly expanded and written.

内容的提问来源于stack exchange，提问作者Olex Nikonov