reactjs - 读取react中由docker设置的环境变量

Question

我正在使用 docker 构建我的 React 应用程序并将其部署在 nginx 中。

我在 docker-compose.yml 中设置了环境变量

version: '2'
services:
  nginx:
    container_name: ui
    environment:
      - HOST_IP_ADDRESS= xxx.xxx.xx.xx
    build:
      context: nginx/
    ports:
      - "80:80"

创建 docker 容器后，当我 echo 容器内的变量时，我可以看到 hi。

但是，当我尝试使用 process.env.HOST_IP_ADDRESS 在 React 中读取它时，它正在记录 undefined。

我在某处的博文中读到，环境变量只能在生产环境中访问。因为我正在构建应用程序并将其部署在 nginx 中，所以我应该能够访问它，但由于某种原因我无法读取它。

我在这里做的是根本错误的事情吗？如果是这样，请让我知道解决方案。我不是 react 专家，我只是管理别人的代码。

更新:

Dockerfile 如下所示:

FROM node:8 as ui-builder

WORKDIR /home/ui

COPY helloworld .

RUN npm install

RUN npm run build

FROM nginx
COPY --from=ui-builder /home/ui/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

React 组件片段如下:

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    console.log(process.env.HOST_IP_ADDRESS);
    return (
      <div className="helloContainer">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default HelloWorld;

Answer 1

我要感谢所有发布答案和评论的人。我所面临的问题是通过结合这些答案和其他资源的一些帮助来解决的。

根据@DavidMaze(在评论中)的建议，我开始研究代码中存在的 webpack 配置。我发现 webpack 正在读取容器内声明的所有环境变量。

因此，我开始尝试使用 Dockerfile 和 docker-compose.yml，因为我意识到在 React 构建代码时，REACT_APP_HOST_IP_ADDRESS 没有作为环境变量传递。

我更改的第一件事是 Dockerfile。我在dockerfile中静态声明了IP用于测试
ENV REACT_APP_HOST_IP_ADDRESS 本地主机。通过这样做，我能够看到 webpack 读取的 env 变量中的 localhost 值。

现在我尝试按照 @Alex 在他的回答中的建议将 ENV 变量从 docker-compose 传递到 dockerfile，但它不起作用。

所以我提到了https://github.com/docker/compose/issues/5600并更改 docker-compose.yml 和 Dockerfile 如下

docker-compose.yml

version: '2'
services:
  nginx:
    container_name: ui
    build:
      context: nginx/
      args:
        REACT_APP_HOST_IP_ADDRESS: ${IP_ADDRESS}
    ports:
      - "80:80"

其中 IP_ADDRESS 导出为环境变量。

Dockerfile

FROM node:8 as ui-builder

WORKDIR /home/ui

COPY helloworld .

RUN npm install

ARG REACT_APP_HOST_IP_ADDRESS

ENV REACT_APP_HOST_IP_ADDRESS $REACT_APP_HOST_IP_ADDRESS

RUN npm run build

FROM nginx
COPY --from=ui-builder /home/ui/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

react 组件

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    console.log(process.env.REACT_APP_HOST_IP_ADDRESS);
    return (
      <div className="helloContainer">
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

export default HelloWorld;

此配置使得在镜像构建过程中通过 docker-compose 中的 ARG 传递到 Dockerfile 的变量可用，因此这些变量可以依次声明为 env 变量，只要 Webpack 读取 env 变量，React 就可以在构建过程中使用这些变量。

webpack 将能够使用 DefinePlugin 读取环境变量 https://webpack.js.org/plugins/define-plugin/ .

确保您的变量带有 REACT_APP_ 前缀(如 here 所示)，否则 React 不会获取它。