Flask and React Docker containers not communicating via Docker-Compose

Question

I have two containers - one containing a react app, another a flask app.

I can build both using the below docker-compose file and their respective Dockerfiles, and am able to access each via the browser on the ports specified. However, my React app's API calls to Flask are not being retrieved (they work without Docker in the picture).

Any suggestions are greatly appreciated!

Docker-compose

version: '3.7'

services:
    middleware:
        build: ./middleware
        command: python main.py run -h 0.0.0.0
        volumes:
          - ./middleware/:/usr/src/app/
        ports:
          - 5000:5000
        env_file:
          - ./middleware/.flaskenv
    frontend:
        build:
          context: ./frontend/app
          dockerfile: Dockerfile
        volumes:
          - './frontend/app:/usr/src/app'
          - 'usr/src/app/node_modules'
        ports:
          - '3001:3000'
        environment:
          - NODE_ENV=development
        links:
          - middleware

Dockerfile for flask app

# pull official base image
FROM python:3.8.0-alpine

# set work directory
WORKDIR /usr/src/app

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt /usr/src/app/requirements.txt
RUN pip install -r requirements.txt

# copy project
COPY . /usr/src/app/

Dockerfile React app

# base image
FROM node:12.2.0-alpine

# set working directory
WORKDIR /usr/src/app

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

# install and cache app dependencies
ADD package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install [email protected] -g --silent

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

I also have the below in my React app in package.json which enables me to make API calls to the flask app (again, this works fine without Docker)

  "proxy": "http://127.0.0.1:5000",

Finally, project structure (in case useful)

website
|
|--middleware (Flask app)
  - Dockerfile
  - api
|--frontend (React app)
  -Dockerfile
  -app
|
|-docker-compose.yml

change "proxy": "http://127.0.0.1:5000", to "proxy": "http://middleware:5000", — LinPy
– LinPy, Commented Jan 8, 2020 at 8:11
Use docker service names(middleware, frontend) when you need to access one service from another inside a docker network. Avoid using 127.0.0.1 as it resolves to the container itself and not the docker host as you are assuming. — leopal
– leopal, Commented Jan 8, 2020 at 8:12

0xgareth · Accepted Answer · 2020-01-08 08:28:08Z

3

As LinPy and leopal in the comments pointed out 127.0.0.1 in package.json needed to be changed to reference the correct flask container.

"proxy": "http://middleware:5000",

answered Jan 8, 2020 at 8:28

0xgareth

6211 gold badge11 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flask and React Docker containers not communicating via Docker-Compose

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related