使用GitHub Actions部署React网站后无法访问.env变量怎么办？

React 项目中以 REACT_APP_ 开头的环境变量是在构建阶段被静态替换到代码中的，而非运行时读取。你的 GitHub Actions 工作流执行 npm run build 时，没有将环境变量传递给构建进程，导致最终生成的 build 文件中完全没有这些变量的值，因此浏览器中会显示 process.env.REACT_APP_API_URL 为 undefined。

针对你有10多个环境变量的情况，提供两种可行方案：

方案一：在 Build 步骤直接注入环境变量 #

修改工作流中 Run build 步骤，通过 env 块将所有需要的环境变量从 GitHub Secrets 中传入构建进程：

- name: Run build
  run: npm run build --if-present
  env:
    REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
    REACT_APP_AUTH_KEY: ${{ secrets.REACT_APP_AUTH_KEY }}
    REACT_APP_BASE_PATH: ${{ secrets.REACT_APP_BASE_PATH }}
    # 依次添加所有需要的 REACT_APP_* 变量

方案二：自动生成 .env.production 文件（适合大量变量） #

在构建前自动生成 .env.production 文件，将所有环境变量写入其中，React 的构建命令会自动加载该文件。在 Install dependencies 步骤之后、Run build 步骤之前新增一个步骤：

- name: Generate .env.production
  run: |
    echo "REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }}" >> .env.production
    echo "REACT_APP_AUTH_KEY=${{ secrets.REACT_APP_AUTH_KEY }}" >> .env.production
    echo "REACT_APP_BASE_PATH=${{ secrets.REACT_APP_BASE_PATH }}" >> .env.production
    # 继续添加剩余的所有 REACT_APP_* 变量

• 所有需要注入的环境变量必须以 REACT_APP_ 开头，否则 React 构建工具会忽略它们。
• 确保所有变量已经提前添加到 GitHub 仓库的 Settings -> Secrets and variables -> Actions 中，命名与代码中使用的一致。
• 构建完成后，build 文件夹中的文件已经包含了静态替换后的变量值，部署到服务器时无需再上传 .env 文件。

内容的提问来源于stack exchange，提问作者Youth Dream