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构建代码时REACT_APP_HOST_IP_ADDRESS并没有作为环境变量被传递。

我更改的第一件事是Dockerfile。我在dockerfile中静态声明了IP以进行测试
ENV REACT_APP_HOST_IP_ADDRESS localhost。通过这样做，我可以看到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;"]

反应成分

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的变量可用，因此只要Webpack读取env变量，这些变量就可以声明为React可以在构建过程中使用的env变量。

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

Answer 2

这是我的解决方案，在我的JavaScript代码中的ENV中使用Dockerfile，在DefinePlugin中使用webpack.config.js和在JavaScript代码中使用process.env：

首先在 Dockerfile 中设置环境变量及其值：

...
RUN npm install
ENV MY_ENV_VAR my_env_value
...

然后使用DefinePlugin插件，将其添加到 process.env 中的webpack.config.js：

const webpack = require('webpack');
...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.MY_ENV_VAR': JSON.stringify(env.MY_ENV_VAR),
    }),
  ],
...

最后在代码中使用env变量：

const host = process.env.MY_ENV_VAR || 'a_default_value_in_case_no_env_is_found';

Answer 3

Env变量应以破折号（{-）字符开头（请看Docker API）：

environment:
  - DEBUG=TRUE

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

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

这是一个工作示例：

docker-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 4

我检查了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是指运行时不可用的深层对象结构。

Answer 5

你应该检查下一刻

我。您的环境变量有前缀 REACT_APP_

二。在docker文件你有ARG和ENV命令，比如

ARG REACT_APP_DEBUG
ENV REACT_APP_DEBUG=$REACT_APP_DEBUG

三。你将你的 arg 作为 build arg 在 docker-compose.yml 中它看起来像

services:
  my-app:
    build:
      args:
        REACT_APP_DEBUG=True

或者在 docker build 中它看起来像

docker build -t my_app:dev --build-arg REACT_APP_DEBUG=True .

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

5 个答案: