为何process.env无法读取GitHub Actions配置的React环境变量？

问题分析 #

• 用echo写入$GITHUB_ENV无效：大概率是步骤顺序错误、变量名前缀不符合要求，或者语法书写有误
• 直接在build步骤env字段配置仅能访问仓库密钥：因为环境级别的secrets需要在workflow中指定对应的environment才能读取

正确配置方案 #

方案1：通过GITHUB_ENV注入（支持仓库/环境级secrets） #

确保写入环境变量的步骤在build步骤之前执行，语法正确；若使用环境级secrets，需指定对应环境：

name: build_and_deploy_dev

on:
  push:
    branches: [dev]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    # 指定环境，才能访问该环境下的专属secrets
    environment: dev
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      # 第一步：将环境变量写入GITHUB_ENV
      - name: Set Firebase env vars
        run: |
          echo "REACT_APP_FIREBASE_API_KEY_DEV=${{ secrets.FIREBASE_API_KEY_DEV }}" >> $GITHUB_ENV
          # 可按需添加其他Firebase相关变量
          echo "REACT_APP_FIREBASE_AUTH_DOMAIN_DEV=${{ secrets.FIREBASE_AUTH_DOMAIN_DEV }}" >> $GITHUB_ENV

      # 第二步：安装依赖并构建（此时环境变量已生效）
      - name: Install dependencies
        run: npm install

      - name: Build React app
        run: npm run build
        # 无需额外配置env，GITHUB_ENV中的变量会自动传入后续步骤

      # 后续部署步骤...

方案2：直接在build步骤配置env（支持环境级secrets，需指定environment） #

若偏好直接在build步骤配置，只需指定environment，即可访问对应环境的secrets：

name: build_and_deploy_dev

on:
  push:
    branches: [dev]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    environment: dev # 必须指定环境才能读取环境级secrets
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Install dependencies
        run: npm install

      - name: Build React app
        run: npm run build
        env:
          REACT_APP_FIREBASE_API_KEY_DEV: ${{ secrets.FIREBASE_API_KEY_DEV }}
          REACT_APP_FIREBASE_AUTH_DOMAIN_DEV: ${{ secrets.FIREBASE_AUTH_DOMAIN_DEV }}

      # 后续部署步骤...

关键注意事项 #

• React仅识别以REACT_APP_开头的环境变量，变量名必须严格遵守该规则
• 若使用环境级secrets（非仓库全局secrets），必须在job中添加environment: <你的环境名>，否则无法读取
• 确认secrets已正确添加到GitHub仓库的对应环境中（路径：仓库Settings → Environments → 选择目标环境 → Secrets）
• 用echo写入GITHUB_ENV时，步骤必须在npm run build之前执行，否则构建步骤无法读取到变量

内容的提问来源于stack exchange，提问作者Dilip Tarkhala