我正在使用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.
但是,當我嘗試使用process.env.HOST_IP_ADDRESS進行反應時,它正在記錄未定義.
我在某個博文中讀到,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;
uj5u.com熱心網友回復：
我要感謝所有發布答案和評論的人.我遇到的問題是通過這些答案的組合和其他資源的一些幫助來解決的.正如@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讀取env變數https://webpack.js.org/plugins/define-plugin/
uj5u.com熱心網友回復：
請問博主：前端js在瀏覽器運行時，有process 變數嗎？轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/284669.html
標籤：其他技術討論專區
上一篇：求一個演算法