读取由docker设置的react环境变量
我正在使用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"在创建了码头容器之后，当我在容器中创建变量时，我可以看到hi。
但是，当我试图使用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组件片段如下：
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;回答 8
Stack Overflow用户
发布于 2018-09-05 22:11:55
我要感谢所有张贴答案和comments.The问题的人，我所面临的问题是通过这些答案和其他资源的一些帮助结合起来解决的。
正如@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。
现在，我试着按照@Alex在回答中的建议，将ENV变量从dockerfile传递到dockerfile，但没有成功。
因此，我参考了https://github.com/docker/compose/issues/5600并更改了docker-come.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作为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;这种配置使得在映像构建过程中通过ARG传递到Dockerfile的变量可用，因此，如果webpack读取env变量，则这些变量可以声明为在构建过程中可以使用的env变量。
webpack将能够使用DefinePlugin https://webpack.js.org/plugins/define-plugin/读取env变量。
确保您在变量前面加上REACT_APP_ (如这里所示)，否则将不会被React捕获。
Stack Overflow用户
发布于 2018-08-30 20:06:55
Env变量应该从REACT_APP_开始，否则NODE_ENV变量有点混乱，您的环境变量将无法工作：
environment:
- REACT_APP_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:
- REACT_APP_DEBUG=TRUE
build:
dockerfile: Dockerfile
context: ./web/clientDockerfile
FROM node:6.0.0
# Set env variable
ARG REACT_APP_DEBUG
ENV REACT_APP_DEBUG=$REACT_APP_DEBUG
# that will be empty
RUN echo "DEBUG": $REACT_APP_DEBUG运行：
->docker-compose run client node
->process.env.REACT_APP_DEBUG
'TRUE'Stack Overflow用户
发布于 2021-01-09 09:27:25
你应该检查下一刻
您的env变量有前缀 REACT_APP_
II.在docker文件中有ARG和ENV命令，如
ARG REACT_APP_DEBUG
ENV REACT_APP_DEBUG=$REACT_APP_DEBUGIII. .将您的arg传递为构建arg，在docker-compose.yml中，它看起来像
services:
my-app:
build:
args:
REACT_APP_DEBUG=True或者在码头建造中，看起来就像
docker build -t my_app:dev --build-arg REACT_APP_DEBUG=True .https://stackoverflow.com/questions/52103155
复制相似问题
腾讯云开发者
