reactjs - React SPA动态环境配置

Question

我正在使用 create-react-app 从头开始​​构建 React SPA 应用程序，并为我的 SPA 的 API 服务器设置 uri 地址。根据官方文档建议的方法是为此类需求创建环境 .env 文件。我使用持续交付作为开发工作流程的一部分。部署后，React SPA 应用程序将进入一个 Docker 容器，而 API 将进入另一个容器。这些容器部署在单独的服务器中，我不知道 API 的 uri 是什么，因此无法为每个部署创建单独的 .env 文件。是否有任何“正确的方法”为我的 SPA 应用程序提供动态配置，以便我可以轻松更改环境参数

SPA 中的 API URI 示例

// api.config.js

export const uriToApi1 = process.env.REACT_APP_API1_URI;
export const uriToApi2 = process.env.REACT_APP_API2_URI;

// in App.js

import { uriToApi1, uriToApi2 } from '../components/config/api.config.js';

/* More code */
<DataForm apiDataUri={`${uriToApi1}/BasicService/GetData`} />
/* More code */
<DataForm apiDataUri={`${uriToApi2}/ComplexService/UpdateData`} />

Answer 1

假设您在某个 dist 文件夹中构建前端代码，该文件夹将由 Docker 打包到镜像中。您需要在项目中创建 config 文件夹，该文件夹也将添加到 dist 文件夹中(显然，将打包在 Docker 镜像中)。在此文件夹中，您将存储一些配置文件以及一些特定于服务器的数据。并且您需要在 React 应用程序启动时加载这些文件。

流程将是这样的:

1. 用户打开您的应用。
2. 您的应用显示一些加载程序并获取配置文件(例如 ./config/api-config.json)
3. 然后您的应用会读取此配置并继续其工作。

您需要在 Docker 配置文件中设置 Docker Volumes，并将 Docker 容器中的 config 文件夹与服务器上的某些 config 文件夹连接起来。然后，您将能够用服务器上的文件替换 docker 容器中的配置文件。这将帮助您覆盖每个服务器上的配置。