反应配置文件以进行后期部署设置

我已经建立了一个reactjs网站并试图使其可部署。

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

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

我想拥有一个单独的文件，系统管理员可以根据其环境配置各种设置，例如API端点（该应用程序可能与后端未在同一服务器上运行，并且将无法访问DNS ）。

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

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

config.js准备好您的自定义配置（例如：）。配置文件中的内容应如下所示：

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

您可以通过访问代码的任何位置来访问您的配置window.ENV.your_configuration_key（例如，可以在上方找到上述ENVIRONMENT值window.ENV.ENVIRONMENT）

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

在身体前的头部。并放在目录config.js下public。

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

由于我已经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 .

最后但并非最不重要的一点是，您将需要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和subPath。

首先将您的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在将卷装入到已经包含一些文件的现有目录的过程中省略了该结果，那么在我们的情况下，结果是不利的，它将通过将新文件复制到该目录中但删除所有其他先前存在的文件来覆盖现有目录。