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

不确定 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 并添加
```
 <script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
```
在你的头脑之前的身体。并放在目录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在卷安装到已经包含一些文件的现有目录期间省略，则在我们的情况下结果是不利的，因为它将通过将新文件复制到目录中来覆盖现有目录，但删除所有其他先前存在的文件。

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

问题描述

解决方案

推荐阅读