时间戳

首页 > 解决方案 > 如何在 Azure 中托管的 React 应用程序中使用环境变量

reactjs - 如何在 Azure 中托管的 React 应用程序中使用环境变量

问题描述

我对 React 还很陌生，并且总体上也在探索 Azure。我有 ERP 背景，但该背景确实包括使用 VSTS 和 CI/CD 等工具。我非常依赖在 VSTS 中使用“库”来指定每个环境的变量，然后在部署时指定这些变量。

但！我一直在互联网上阅读并使用设置，但据我了解，我只能在 NPM 生成的实际代码中“嵌入”参数。这基本上意味着我需要为每个环境创建一个单独的构建，这是我不习惯的。我一直坚持（并告诉其他人）你交付到生产中的内容应该与预生产、暂存或......的内容完全相同。真的没有其他方法可以使用环境变量吗？我正在考虑使用 Azure 应用服务中的应用程序设置，但我什至无法让它们在控制台中弹出。VSTS 中的库，也没有找到如何在我的部署中使用它们，因为只有一步。

在https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables阅读文档并没有让我觉得将 .env 文件放入源代码管理中也很舒服。我什至尝试了将 {process.env.NODE_ENV} 放入我的代码的方法，但在 Azure 中它只显示为“开发”，而我什至执行 npm run build （应该是生产）......

所以，我在这里有点迷路了！如何在我的 React 应用中使用 Azure 应用服务中指定的环境变量？

谢谢！

标签： reactjsazureazure-devops

解决方案

好的选择

我也遇到了这个问题，您可以通过为您的环境使用不同的构建脚本来自定义使用哪些环境变量。找到这个 CRA 文档 https://create-react-app.dev/docs/deployment/#customizing-environment-variables-for-arbitrary-build-environments

您还可以在 YAML 中设置变量。https://docs.microsoft.com/en-us/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline

但是如果我需要一个单一的构建呢？

如果您对不同的环境（开发、登台、产品）使用单个构建和发布阶段，我还没有解决这个问题。由于一切都是构建的，因此 React 具有您在构建时提供的任何 env 变量。我考虑过的替代方案：

  1. 将 react 构建与 .NET 构建分开，这样您就可以对每个部署执行此操作
  2. 定义所有 env 变量并附加例如 REACT_APP_SOME_KEY_ 然后基于子域选择特定的 env 例如https://dev.yoursite.com https://yoursite.com，但这个选项似乎不规范。
  3. 可能是 React 需要为每个环境构建的限制。接受您需要单独的构建。

推荐阅读