Google App Engine：为 React Production Build 设置环境变量答案

【问题标题】：Google App Engine: Setting environment variables for React Production BuildGoogle App Engine：为 React Production Build 设置环境变量
【发布时间】：2020-07-24 14:49:24
【问题描述】：

我正在 App Engine 上运行基本的 create-react-app 生产构建，但我无法访问我的预定义环境变量。我缺少任何额外的步骤吗？我猜它与构建过程和提供生产构建有关，但我不确定在这种情况下在哪里设置变量。

app.yaml：

service: client-dev
runtime: nodejs10
env_variables:
  TEST: "development"

package.json:

"scripts": {
    "start": "serve -s build",
    "start-dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },


console.log(process.env.TEST) //undefined

【问题讨论】：

我无法确认这是 GAE 上发生的问题，还是只是 React 方面的问题。我发现这个post 有类似的问题，我还发现这个post 关于如何使用 GAE 和 Node.js 访问 process.env 变量。尽管如此，我会尝试复制这个问题，看看是否有任何解决方法或可能的解释。我希望它有所帮助。

标签： node.js reactjs google-app-engine google-cloud-platform create-react-app

【解决方案1】：

根据CRA documentation，环境变量在构建期间嵌入到 React 应用程序中。它们在运行时对静态文件不可用。

在 App Engine 中，app.yaml 的内容在 React 完成构建之后发生的部署期间使用。

要在构建期间使环境变量可用，您可以：

如果您通过yarn build 或npm run build 手动触发构建过程，请将它们包含在项目根目录的.env 文件中。
将它们包含在 cloudbuild.yaml 文件中，以便使用 Cloud Build 等持续开发平台自动构建。

请注意，上面引用的 CRA 文档建议每个自定义环境变量都以 REACT_APP_ 开头。例如，您的变量应添加为 REACT_APP_TEST=development。

【讨论】：