React 单页应用动态环境配置

Question

我正在使用 `create-react-app` 从零开始构建 React SPA 应用程序，并为我的 SPA 设置 API 服务器的 URI 地址。根据官方文档，建议的方式是为这种需求创建环境 `.env` 文件。我在开发流程中使用持续交付。部署后，React SPA 应用程序在一个 Docker 容器中运行，API 在另一个 Docker 容器中运行。这些容器分别部署在不同的服务器上，我不知道 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`} />

- Anton

---

你需要进一步解释“进入Docker容器”和“部署”的含义，因为答案就在这个配置的部分。 - spender

你知道在部署时将要给最终用户的URL吗？那很可能就是你需要放在环境文件中的URL。 - David Maze

你们有多少个API服务器？你知道API URL的完整路径吗？ - kiranvj

平均而言，最多有5个URI。我不知道API的完整路径。 - Anton

如果您不知道API的URL，如何从您的SPA访问API服务器？ API路径是否类似于您的SPA路径？ 您能给出一些示例吗？ - kiranvj

更新了带有示例的问题。 - Anton

Answer 1

假设您将前端代码构建在名为dist的文件夹中，并由Docker打包成映像。您需要在项目中创建config文件夹，该文件夹也将添加到dist文件夹中（并且显然将被打包到Docker映像中）。在此文件夹中，您将存储一些具有某些特定于服务器的数据的配置文件。您需要在react应用程序启动时加载这些文件。

流程如下：

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

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

- Andrii Golubenko

---

谢谢你的建议！在哪里存储获取到的配置数据更好呢？像Cookie或localStorage这样的存储方式？ - Anton

@Anton 由你决定。如果你正在使用React和Redux，你可以将这个配置数据存储在Redux中。或者创建一个单独的类ConfigManager。 - Andrii Golubenko