我无法从我的 REACT 应用程序中读取 azure 应用程序服务配置中的环境变量

Posted 2023-02-27

【中文标题】我无法从我的 REACT 应用程序中读取 azure 应用程序服务配置中的环境变量

【英文标题】：I am unable to read environment variable from azure app service configuration from my REACT app

【发布时间】：2021-08-07 02:58:49

【问题描述】：

我已在 azure 应用服务配置中添加了我的变量，并尝试从我的 React 项目中读取它，但我每次都未定义。

Azure 应用服务：-

https://i.stack.imgur.com/NextN.png

反应代码：- console.log("PreviewMode>>" + process.env.REACT_APP_PREVIEWMODE)

【问题讨论】：

Azure 应用服务配置存在于 服务器端，而您的 React 应用包含在 浏览器 中执行的静态 javascript 文件。只有 Node.js 后端可以访问环境变量，浏览器中没有。

【参考方案1】：

您无法在 azure 应用服务配置中获取 appsettings。

React 客户端项目本质上是下载一段代码在客户端浏览器上运行，不会与 azure 应用程序设置相关。所以它的 process.env 无法读取任何 azure 环境变量。

但是你可以在你的项目中创建.env 文件。然后您可以通过process.env.REACT_APP_PREVIEWMODE 获取环境变量。 (我在windows平台下测试过。)

更多详情，请阅读以下帖子中的答案。

1. 404 Error when trying to fetch json file from public folder in deployed create-react-app

2. Azure WebApps React: the environment variables exist but are not present when I call process.env