reactjs - 部署React前端时如何注入(inject)API服务器URL？

Question

免责声明:我是一个 React 菜鸟，所以也许我想做的不是 React 方式

我正在编写一个 React 前端，该前端将部署为由某些云提供商静态提供服务，例如S3 或 Google Storage 或其他什么。该前端与位于云中某个位置的多个 API 服务器进行交互，这些服务器可能在同一个提供商中，也可能不在同一提供商中。此外，在开发 UI 或其一部分时，这些服务器的地址可能是本地或测试实例。

如何将 API 服务器 URL 灵活地注入(inject)到我的 React 应用程序中，以便我可以使用不同的地址在开发、登台或生产中部署？

解决方案:我最终使用了建议的解决方案组合:

• 使用 .env.development 和 .env.development 文件(确切名称)来存储变量 REACT_APP_API_URI = 'host'<
• 这会被 create-react-app 的构建脚手架自动获取，并在 UI 代码中以 process.env.REACT_APP_API_URI 的形式提供

请注意，这有点违背 12 Factor Apps 中的原则，例如将环境变量存储在版本控制的文件中，但它完成 ATM 的工作。

Answer 1

你可以试试这个:

// http.js
const getBaseUrl = () => {
  let url;
  switch(process.env.NODE_ENV) {
    case 'production':
      url = 'https://stackoverflow.com';
      break;
    case 'development':
    default:
      url = 'https://google.com';
  }

  return url;
}

export default axios.create({
  baseURL: getBaseUrl(),
});