部署反应前端时如何注入 API 服务器 URL？

Question

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

我正在编写一个 React 前端，它将被部署以由某些云提供商静态提供服务，例如S3 或谷歌存储或其他任何东西。此前端与位于云中某处的多个 API 服务器交互，可能在同一个提供商中，也可能不在。此外，在开发 UI 或其一部分时，这些服务器的地址可能是本地或测试实例。

如何灵活地将 API 服务器 URL 注入到我的 react 应用程序中，以便我可以使用不同的地址在 dev、staging 或 prod 中进行部署？

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

• 使用.env.production 和.env.development 文件（确切名称）来存储变量REACT_APP_API_URI = 'host'
• 这是由 create-react-app 的构建脚手架自动获取的，并在 UI 代码中作为 process.env.REACT_APP_API_URI 提供

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

Answer 1

你可以试试这个：

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

Answer 2

使用这个包 https://github.com/toddbluhm/env-cmd 你可以为你的环境创建一个 env 文件

例如使用此代码创建 .env.staging 和 .env 文件

// .env.staging file   
API_URL=https://staging.url.com/api/

// .env file
API_URL=https://url.com/api/

如何使用 API_URL 从环境变量中获取：

fetch(process.env.API_URL)

然后你可以在你的 package.json 中添加一些额外的脚本：

{
  "scripts": {
    "build:staging": "env-cmd .env.staging yarn build",
    "build:prod": "env-cmd .env yarn build"
  }
}

Answer 3

如果 API 对于 development 或 production 环境是常量，您可以使用 .env 文件。在build 之后，您无法更改这些参数。

如果您想在构建后更改URL，请添加一个js 文件让我们说config.js

在index.html 中包含conf.js

在conf.js 中添加URL 喜欢

var URL1 = 'https://www.google.com'

你可以像这样访问参数：

export const {URL1} = window;

Answer 4

例如，您可以在构建步骤中使用环境变量来做到这一点。

您可以使用类似.env 的东西，例如，它允许您定义环境变量并将它们加载到您的 webpack 文件中（假设您使用 webpack）。但你真的可以将它与任何捆绑器一起使用。

.env 文件：

API=http://localhost:3000

在您的 webpack 上，您可以使用 DefinePlugin

来自文档的示例：添加您的 API 环境

    ...
    require('dotenv').config()
    ...

    new webpack.DefinePlugin({
      API_ENDPOINT: process.env.API,
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object')
    });

无论如何，这只是一种方式。我喜欢这种方式，因为它使我的项目可以为不同的环境定义 API 密钥和其他有用的东西。

注意：您甚至可以为本地、暂存和生产定义不同的 .env 文件，并根据构建类型将各自的文件加载到 webpack 中。