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应用程序启动时加载这些文件。

流程如下：

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

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

React SPA动态环境配置

1 个答案: