reactjs - 用于部署后设置的 React 配置文件

Question

我已经构建了一个 ReactJS 网站并尝试使其可部署。

现在所有配置都是通过导入到所有模块中的 config.js 完成的。

但是当我构建应用程序时，它会被编译到部署 js 中并且不可配置。

我想要一个单独的文件，系统管理员可以配置特定于其环境的各种设置，例如 API 端点(应用程序可能不在与后端相同的服务器上运行，并且不会有任何访问 DNS)。

有没有办法在 react 中做到这一点？我也不希望为此使用第三方库。

Answer 1

不确定 Linux 方法，但我经常使用 create-react-app (cra)、Docker 和 kubernetes，最初遇到类似的问题。然后我受到https://github.com/inloop/cra-docker的启发并且能够在 Docker 和 kubernetes 中找到运行时 create-react-app 的配置文件问题的解决方案。以下是我的解决方案的步骤:

1. 准备好您的自定义配置(例如:config.js)。配置文件中的内容应如下所示:

    window.ENV = {
        "ENVIRONMENT":"stg",
        ...other key-value configuration as you'll need
    }
   

   通过访问 window.ENV.your_configuration_key，您可以在代码中的任何位置访问您的配置(例如:上面的 ENVIRONMENT 值可在 window.ENV.ENVIRONMENT 中获取)

2. 在public目录下，编辑index.html并添加

    <script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
   

   在你的头脑中，在 body 之前。并将config.js放在public目录下。

   解决 cra 外部配置问题的目标是希望将 config.js 文件放在源目录之外，并将其放在静态 public 目录下。如果将配置放在源目录下，配置将在构建时进行编译，因此您将无法在运行时轻松更改配置(嗯，模板也可以工作，但对我来说并不理想)。请注意，从静态目录提供文件需要服务器，但由于我已经在使用 nginx 来为我的静态 React 应用程序提供服务，因此我做到这一点绝对没有问题。

3. 由于我已经使用 nginx 为我的 React 应用程序提供静态文件，因此我不需要更改我的 Dockerfile 来满足额外的 config.js 因为编译后它将在 build 目录下可用(因为它被放置在 public 目录下)。我的 Dockerfile 看起来像这样:

    # Step 1: Build static react app
    FROM node AS builder
   
    # Define working directory and copy source
    WORKDIR /app
   
    COPY . .
   
    # Install dependencies and build whatever you have to build 
    RUN yarn install && yarn build
   
    # Step 2: Run image
    FROM nginx
   
    COPY --from=builder /app/build /usr/share/nginx/html
    RUN rm /etc/nginx/conf.d/default.conf
   
    COPY nginx.conf /etc/nginx # this step is not required, only when you have custom nginx configuration
   

   然后构建您的 docker 镜像:
   docker build -t [your-docker-image]:latest 。

4. 最后但同样重要的是，您需要在运行时替换 config.js 文件。现在可以轻松完成此操作。

   如果您使用 docker 运行，则可以使用 -v 命令替换文件。因此，您的 docker 运行时命令应类似于以下内容:

    docker run --name [app-container-name] -d -p [host_port]:80 \
        -v [path_to_config.js_file_in_certain_environment]:/usr/share/nginx/html/config.js \
    [your-docker-image]
   

   如果您使用 kubernetes 运行，则可以使用 configMap、volume、volumeMounts 替换容器下现有目录中的文件和子路径。

   • 首先将你的config.js放在k8s ConfigMap下:

     kubectl create configmap [k8s_config_name] --from-file=config.js=[path_to_config.js_file_in_certain_environment]

   • 在 k8s 部署中安装 configMap:

     containers:        
       ...
       volumeMounts:
       - name: [k8s_config_name_volume]
         readOnly: true
         mountPath: "/usr/share/nginx/html/config.js"
         subPath: "config.js"
     
     volumes:
       - name: [k8s_config_name_volume]
         configMap:
           name: [k8s_config_name]
     

   请注意，mountPath 和 subPath 参数对于替换已存在某些文件的目录下的文件是必需的。如果在卷挂载到已包含一些文件的现有目录期间省略 subPath，则在我们的情况下结果是不利的，因为它将通过将新文件复制到目录中但删除先前的所有其他文件来覆盖现有目录现有文件。