I'm using docker build my react application and deploy it in nginx.
I'm docker - compose. Set up an environment variable yml

Version: '2'
Services:
Nginx:
Container_name: UI
Environment:
- HOST_IP_ADDRESS=XXX, XXX. Xx. Xx
Build:
Context: nginx/
Ports:
- "80-80
"
Create docker container later, when I echo variables within the container, I can see the hi.
But when I try to use the process. The env. HOST_IP_ADDRESS during reaction, it records are undefined.
I read in a blog post, env variables can only visit in a production environment. Because, I am building applications and deploy it in nginx, I should be able to access it, but for some reason I can't read it.
Here am I did some wrong things at all. If so, please tell me a solution. I'm not a response specialist, I only manage other people's code.
Update:
Dockerfile as shown below:

FROM the node: 8 as UI - builder

WORKDIR/home/UI

COPY the helloworld.

The RUN NPM install

The RUN NPM RUN build

The FROM nginx
COPY - from=UI - builder/home/UI/build/usr/share/nginx/HTML
CMD [nginx "-", "g", "the daemon off;"]

The React segments of Component is as follows:

Import the React, {Component} from 'React';

The class HelloWorld extends Component {
Render () {
The console. The log (process. The env. HOST_IP_ADDRESS);
Return (

);
}
}

Export the default HelloWorld;

CodePudding user response:

I want to thank all the people who publish the answer and comments. I met the problem is through the combination of the answers to these questions, and other resources of some help to solve.
As @ DavidMaze () in the comments suggested by, I began to study in my code webpack configuration. I found webpack container is being read statement of all the environment variables.
So I began to try to use my Dockerfile and docker - compose. Yml, because I realized that when there is no response when building code REACT_APP_HOST_IP_ADDRESS as environment variables.
I change is Dockerfile. The first thing I statically declare Dockerfile of IP for testing ENV REACT_APP_HOST_IP_ADDRESS localhost. By doing so, I can see in webpack read ENV variable values of localhost.
Now I try to pass from the docker ENV variables - compose dockerfile, as @ Alex suggests in his answer, but it's no use.
So I mentioned to https://github.com/docker/compose/issues/5600 and change the docker - compose. Yml and Dockerfile, as shown in the following
Mooring docking window, compose. Yml

Version: '2'
Services:
Nginx:
Container_name: UI
Build:
Context: nginx/
The args:
REACT_APP_HOST_IP_ADDRESS=${IP_ADDRESS}
Ports:
- "80-80
"
The IP_ADDRESS as env variable export.
Dockerfile

FROM the node: 8 as UI - builder

WORKDIR/home/UI

COPY the helloworld.

The RUN NPM install

ARG REACT_APP_HOST_IP_ADDRESS

ENV REACT_APP_HOST_IP_ADDRESS $REACT_APP_HOST_IP_ADDRESS

The RUN NPM RUN build

The FROM nginx
COPY - from=UI - builder/home/UI/build/usr/share/nginx/HTML
CMD [nginx "-", "g", "the daemon off;"]

Reaction components

Import the React, {Component} from 'React';

The class HelloWorld extends Component {
Render () {
The console. The log (process. The env. REACT_APP_HOST_IP_ADDRESS);
Return (

);
}
}

Export the default HelloWorld;

This configuration is made in the process of building a image through the Docker - compose the ARG passed to Dockerfile variables are available, so the variables can be declared as env, if read webpack env variables, the React can use these variables during the build process.
https://webpack.js.org/plugins/define-plugin/webpack will be able to use DefinePlugin read env variables

CodePudding user response:

Excuse me blogger: front-end js in the browser runtime, have the process variables?