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

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容器之后，当我在容器内部变量hi时，我可以看到echo。

但是，当我尝试使用process.env.HOST_IP_ADDRESS进行反应时，它正在记录undefined。

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

我在这里做了一些根本错误的事情。如果是这样，请告诉我一个解决方案。我不是反应专家，我只管理别人的代码。

更新：

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 Component片段如下：

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_APP_HOST_IP_ADDRESS没有作为环境变量传递。

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

现在我尝试将ENV变量从docker-compose传递给dockerfile，正如@Alex在他的回答中所建议的那样，但它没有用。

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

泊坞窗，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作为env变量导出。

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;"]

反应组件

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/读取env变量

Answer 2

Env变量应该从破折号（-）字符开始（看看Docker API）：

environment:
  - DEBUG=TRUE

否则，docker-compose.yml无效，您将看到一条错误消息：

services.client.environment contains an invalid type, it should be an object, or an array

这是一个工作样本：

泊坞窗，compose.yml

version: "3.3"

services:
  client:
    container_name: client
    environment:
      - DEBUG=TRUE
    build:
      dockerfile: Dockerfile
      context: ./web/client

Dockerfile

FROM node:6.0.0

# Set env variable
ENV DEBUG $DEBUG

RUN echo "DEBUG": $DEBUG

跑：

->docker-compose run  client node
->process.env.DEBUG 
'TRUE'

Answer 3

我检查了它是如何在API Platform中完成的，config只根据env（'.env'文件）定义了consts：

export const API_HOST = process.env.REACT_APP_API_ENTRYPOINT;
export const API_PATH = '/';

导入它有一个值（API_HOST），而process.env.HOST_IP_ADDRESS指的是在运行时不可用的深层对象结构。