3

I'm developping a website with a python flask app backend and a react and typescript front end.

I want to dockerize them for developpement.

I wrote the following dockerfiles:

back dockerfile

# Use an official Python runtime as an image
FROM python:3.6

EXPOSE 5000

WORKDIR /app

# copy src files in app folder
COPY ./src/* /app/

# Install any needed packages specified in requirements.txt
RUN pip install -r requirements.txt

# Run api ap.py when the container launches with specific ip to reach it from the host
CMD python -m flask run --host=0.0.0.0

font dockerfile

FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

To run my container I use those commands:

# Create docker network 
docker network create  --subnet=172.28.0.0/16 --gateway=172.28.5.254 example_network

# Create the api
docker run -d --rm --name backend --network example_network --ip=172.28.5.1 -v *Back/Source/Code/Dir*:/app -p 5000:5000 backend_img

# Create the front
docker run -it --rm --name front -p 3000:3000 --network example_network --ip=172.28.5.4 -v Back/Source/Code/Dir/src:/app/src  front_img

In this case all is working good but the API endpoint value is in the code, if I change the docker container ip for the backend it's not working any more.

I have the following problem : I try to pass my backend endpoint as an environment variables to my react docker container, but I can't get the value in react, how can I make it work ?

I try to use the following command for the front container :

# Create the front
docker run -it --rm --name front -p 3000:3000 --network example_network --ip=172.28.5.4 -v Back/Source/Code/Dir/src:/app/src -e API_ENDPOINT=172.28.5.1:5000 front_img

when I'm connecting to the docker to get the env value, it's ok!

docker exec -ti front sh
echo $API_ENDPOINT

In the code I try to use the following instruction to reach my environment value:

const API_ENDPOINT=process.env.API_ENDOINT

But my value in the console is undefined ! My front can't connect to my back

I Also try to pass the value as a build arg during the image build, and put the value in a .env file but always the same results : value undefined !

new front dockerfile

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# define env variables
ARG API_HOST=http://172.28.5.1:5000
ENV API_HOST=$API_HOST
RUN echo $API_HOST
RUN echo "API_HOST=$API_HOST" > .env

# start app
CMD ["npm", "start"]

Thank's in advance for your reading and your answers ! Sorry for my basic english

davidism
  • 121,510
  • 29
  • 395
  • 339
boblebol
  • 33
  • 1
  • 3
  • 1
    I think its better to use docker-compose.yml if you want to run in your local. That will manage the networking for you and the service name will be the host which you can connect to from your react app. – Ankit Samarthya Apr 12 '20 at 08:38

1 Answers1

1

You will have to use the prefix REACT_APP_

You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

Aleksandar
  • 107
  • 4