如何在运行 React with Azure API 管理时配置 REST URL

Question

我有一个reactjs前端，它通过休息调用从spring启动后端获取数据。

在本地运行，其代码如下所示：

axios.defaults.baseURL = 'http://localhost:8080/api';
axios.get('/devices').then((resp) => {
  this.setState({devices: resp.data});
}).catch(() => {
  console.log('Failed to retrieve device details');
});

当我构建要使用 npm run build 部署的代码时，我仍然localhost作为 url。

如何构建它，以便在本地开发它使用 localhost，但部署它使用不同的 url？

进入 Azure 后，我将有一个前端和多个后端，需要根据登录者指向这些前端和多个后端。

如何配置 API 管理层以根据登录者将调用路由到正确的后端(使用 AD 进行身份验证(？

由于我使用 APIM 进行路由，baseURL应该是什么？

Answer 1

在配置文件中管理这些变量并根据环境进行加载。

本地值可以直接在配置文件中对局部变量进行硬编码

生产价值- 保留占位符并从构建管道或设置它们- 硬编码它们也

例如：

配置.js

const serverVars = {
  authUrl: '#{authUrl}#',
  apiUrl: '#{apiUrl}#',
};
const localVars = {
  authUrl: 'local_auth_url',
  apiUrl: 'local_api_url',
};
export function getConfiguration() {
  if (process.env.NODE_ENV === 'production') {
    return serverVars;
  }
  return localVars;
}

当您调用 apiUrl 时

import axios from 'axios';
import { getConfiguration } from 'config';
axios.defaults.baseURL = getConfiguration().apiUrl;

Answer 2

一种方法可以是使用环境变量。您可以根据环境变量使用不同的 URL。另一种方法是从基本URL中删除域，但这仅在后端和前端域和端口相同时才有效。