在 Cloud Run 中为我的 React 应用正确定义环境变量答案

【问题标题】：Properly defining environment variables in Cloud Run for my React App在 Cloud Run 中为我的 React 应用正确定义环境变量
【发布时间】：2022-01-04 12:35:52
【问题描述】：

我目前正在使用 Cloud Run 部署一个 React 应用程序（仅限前端），我已经为运行云构建创建了一个触发器，该触发器使用 Cloud Run 部署应用程序。

但是，当我尝试创建一些环境变量以使用云运行 UI 在我的组件中访问时，我无法访问它们，因为（根据我的理解）环境是在应用程序的实例中定义的，而不是用户的浏览器。

所以我的问题是 - 我应该如何正确处理这个问题？我可能尝试过构建某种“config.json”，但我找不到在不同环境中挂载文件的正确方法。

【问题讨论】：

你在使用create react app吗？
是的，我正在使用 CRA
这能回答你的问题吗？ How to use ENV Variables Declared on Google Cloud Run Dashboard in React
@LluísMuñoz 这描述了我的问题，是的，但是我没有设法在那里找到解决方案。我不明白云上的处理是什么意思？
据我了解，在 Cloud Run 部署中运行进程时会使用在 Cloud Run 控制台中声明的环境变量。由于您的应用程序只是前端，因此除了提供静态文件之外，您不会在 Cloud Run 中执行任何进程。因此，处理是在用户的浏览器中完成的，这是您的 React 应用程序正在寻找环境变量的地方，而不是您的 Cloud Run 部署。

标签： javascript reactjs google-cloud-platform create-react-app google-cloud-run

【解决方案1】：

您需要执行以下操作。一、安装https://www.npmjs.com/package/env-cmd

接下来，您可以根据您的环境指定要使用的 .env。下面的代码允许您以声明方式而不是命令方式指定配置。现在，当您说 process.env.REACT_APP_ENV1 process.env.REACT_APP_ENV2 process.env.REACT_APP_ENV3 时，将根据 env 透明地拾取正确的值。

"scripts": {
    "start": "env-cmd -f env_anotherenv.env react-scripts start",
    "start_vscode": "env-cmd -f env_vscode.env react-scripts start",
    "build_staging": "env-cmd -f env_staging.env react-scripts build --profile",
    "build_production": "env-cmd -f env_production.env react-scripts build --profile"
}

env_production.env 的示例将是

REACT_APP_ENV1 = someenv1
REACT_APP_ENV2 = someenv2
REACT_APP_ENV3 = someenv3

env_staging.env 的示例将是

REACT_APP_ENV1 = someotherenv1
REACT_APP_ENV2 = someotherenv2
REACT_APP_ENV3 = someotherenv3

【讨论】：

我想避免将 .env 文件推送到存储库，当我使用 cloud build + run 部署我的应用程序时，这将如何工作？

【解决方案2】：

我建议您在构建工件中加入环境变量，然后使用 process.env.VARIABLE_1 访问，如 here 所述。

使用多阶段 docker 构建。在您的构建阶段，在运行 npm run build 之前从 build-args 填充一个 .env 文件（例如使用 envsubst）。这是一个使用模板的示例，您可以将其推送到您的 git 存储库。

ARG VARIABLE_1
ARG VARIABLE_2
COPY .env.template .
RUN /bin/sh -c "envsubst '\$VARIABLE_1 \$VARIABLE_2' < .env.template > .env"

.env.template

VARIABLE_1=${VARIABLE_1}
VARIABLE_2=${VARIABLE_2}

根据您的云构建触发器set up 的方式，构建参数的值可以来自替换变量。最后阶段可以基于 nginx 镜像，这里你复制构建的静态文件包并使用 nginx 服务。查看完整的 docker 示例 here

这样你就不会暴露 .env 文件，也不需要从云运行端进行环境变量配置。

【讨论】：