CODEWITHSUNDEEP
dockerdocker-compose
0xgareth
0xgareth

Reputation: 621

Flask and React Docker containers not communicating via Docker-Compose

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

Upvotes: 1

Views: 2173

Answers (1)

0xgareth
0xgareth

Reputation: 621

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",

Upvotes: 3

Related Questions