在本地运行开发 API 时，在开发过程中设置 API 引用的正确方法是什么？

Question

>背景

我正在设置一个新的前端 Web 项目。 我正在开发的应用程序也是一个新的Visual Studio ASP.Net Core Web API。我的所有 UI 工作都是同一个 git 存储库的一部分，但不包含在 Web API 解决方案中。

对于开发，我在 Visual Studio 中运行 API，以便可以轻松地启动/停止和中断代码，并使用npm从 VS Code 启动和运行我的 UI 应用程序。

问题

显然，我需要在我的应用程序中进行 API 调用。 为此，我可以拨打如下电话：

fetch('http://localhost:55555/api/test')

明显的问题是http://localhost:55555是一个本地地址，这显然需要发布到服务器以进行开发和暂存以及生产。 相反，我应该定义某种类型的环境变量，该变量将用正确的根地址替换硬编码地址，并且我的代码应该引用该配置值

最终，我们将为该项目设置一个 CI 管道，因此我需要确保我正在设置的配置设置类型也因发布应用程序的服务器而异。也就是说，我的谷歌搜索并没有帮助我找到在环境变量或配置文件中定义 Web API 地址的正确方法，我可以在我的代码中访问这些地址。

如何设置 npm/React 应用程序，以便它可以访问配置定义的 API 地址，以后可以根据它发布的环境轻松更改该地址？

Answer 1

在src中创建config.js...在那里做这样的事情：

export const API_BASE_URL =
process.env.REACT_APP_API_BASE_URL || 'http://localhost:55555/api';

然后，无论您在哪里需要它，您都可以像这样导入和使用它：

import { API_BASE_URL } from './config';

像这样：

fetch(`${API_BASE_URL}/auth/etc...`)

编辑：

试试这个：

import React from 'react';
function App() {
return <div>{process.env.NODE_ENV}</div>; // (if in developement should say development)
}
export default App;

让我知道它是否说development