时间戳

首页 > 解决方案 > React SPA动态环境配置

reactjs - React SPA动态环境配置

问题描述

create-react-app我正在使用并为我的 SPA 的 API 服务器设置 uri 地址从头开始构建 React SPA 应用程序。根据官方文档建议的方法是.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`} />

标签： reactjsdockerdeployment

解决方案

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

流程将是这样的：

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

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

推荐阅读