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

标签 reactjs azure azure-devops

我对 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 应用服务中指定的环境变量?

谢谢!

最佳答案

好的选择

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

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

但是如果我需要单个构建怎么办?

如果您对不同的环境(开发、暂存、生产)使用单个构建和发布阶段,我还没有解决这个问题。由于一切都是构建的,React 具有您在构建时提供的任何环境变量。我考虑过的替代方案:

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

关于reactjs - 如何在Azure中托管的React应用程序中使用环境变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51313330/

相关文章:

javascript - 在 React 中映射数组 onClick 按钮

ASP.NET Core 2.0 Razor 与 Angular/React/等

azure - 本地缓存和不可变对象(immutable对象) - 零超时

powershell - Azure PowerShell 虚拟机警报电子邮件功能

azure - Rancher/k8/azure/Kubectl

azure-devops - 如何在 VSTS 中将多个参数传递给命令行

azure-devops - 根据标签从分支下载最新的管道工件

azure - 如何在 Azure Devops 部署中不使用基本身份验证

javascript - 如何解决 - 找不到模块 : Recursion in resolving - NPM

javascript - 从存储调用 api 并将数据绑定(bind)到 ReactJS/flux 中的组件状态