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 容器中的配置文件。这将帮助您覆盖每台服务器上的配置。