React 中的环境变量问题 - URL 中未定义

Question

.env

REACT_APP_BASE_URL=https://mysite.azurewebsites.net/

.js

const baseUrl = process.env.REACT_APP_BASE_URL;
const url = `${baseUrl}WP/SiteLoginAPI/`;
console.log('Constructed URL:', url);

问题

构造的URL包含未定义，导致404错误：

https://mysite.azurewebsites.net/undefinedWP/SiteLoginAPI/

什么可能导致 process.env.REACT_APP_BASE_URL 在服务器上未定义，如何确保其设置正确？

这一定是我所缺少的简单的东西。但我一直没能弄清楚。

我发现了一个类似的问题here，但它也没有帮助。

Answer 1

我尝试了示例反应应用程序来获取Azure应用程序服务中的环境变量。

• 如果您通过 GitHub 或 DevOps 进行部署，请验证部署脚本或管道是否不会覆盖或忽略

  .env

  文件。
• 确保

  .env

  文件位于应用服务项目的根目录中。

• 检查

  .env

  文件中或访问代码中的变量时是否存在任何多余空格、缺失字符或任何其他拼写错误。

使用以下命令安装 dotenv 包。

pip install dotenv

下面是用于获取环境变量的代码。

App.js：

import React from 'react';
function App() {
  const baseUrl = process.env.REACT_APP_BASE_URL;
  const url = `${baseUrl}WP/SiteLoginAPI/`;
  console.log('Constructed URL:', url);
  return (
    <div>
      <h1>Environment Variable Example</h1>
      <p>Constructed URL: {url}</p>
    </div>
  );
}
export default App;

对于生产使用.env.生产，不同的环境（开发、测试、生产）通常需要不同的配置。

.env.production

中的环境变量可以通过部署管道或秘密管理工具进行管理。

.env：

REACT_APP_BASE_URL=https://<AzureWebAppName>.azurewebsites.net/

process.env

用于访问已在

.env

文件中定义或在构建过程中设置的环境变量。

Azure 应用服务输出：

如果您仍然面临本地配置问题，请在 Azure 应用服务的环境变量中添加键值，如下所示。