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