1

I have 2 docker containers, the front being a React.js app running on ports 3000:3000 and the back being a Flask API running on 5000:5000.

ISSUE:

I am having an issue with these containers wrapped together in docker-compose where the front will be accessible via localhost:3000 as it would normally run outside a container, however it is unable to communicate with the back container. I receive a net::ERR_EMPTY_RESPONSE in browser when attempting to use any API component. How might I be able to resolve this?

SETUP:

My directory for this docker-compose setup is as follows:

/project root 
   - docker-compose.yml
   /react front
      - Dockerfile
      /app
   /flask back
      - Dockerfile
      /api

My docker-compose.yml is as follows:

version: "3.8"
services:
  flask back:
    build: ./flask back
    command: python main.py run -h 0.0.0.0
    volumes:
      - ./flask back/:/usr/src/app/
    ports:
      - 5000:5000
    env_file:
      - ./flask back/.env
  react front:
    build: ./react front
    volumes:
          - ./react front/app:/usr/src/app
          - usr/src/app/node_modules
    ports:
      - 3000:3000
    links:
      - flask back

The front Dockerfile:

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /usr/src/app

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

# install app dependencies
ADD package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@3.4.1 -g --silent

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

The back Dockerfile:

FROM python:alpine3.7 
WORKDIR /usr/src/app
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1
RUN pip install --upgrade pip
COPY ./requirements.txt /usr/src/app/requirements.txt
RUN pip install -r requirements.txt
COPY . /usr/src/app/

TROUBLESHOOTING SO FAR:

So far I have consulted the following threads on SO:

Flask and React Docker containers not communicating via Docker-Compose - where the package.json needed a proxy addition.

ERR_EMPTY_RESPONSE from docker container - where IP addresses needed rewritten to 0.0.0.0 (this appears to be a unique issue to GO as I never used this form of port and IP configuration in my project)

Neither of these very similar issues have resolved my issue. I am also able to ping the back-end container with the front-end and vice versa. Running the React container while running the Flask API outside of its container also works as expected/intended. If there is any other information anyone would like, I would be happy to provide.

Thank you for the time and patience.

FallenCringelord
  • 11
  • 1
  • Can you check your 2 containers work well? If so, can you provide their logs? – Steven Weng Dec 01 '20 at 17:21
  • For the Flask server log, we have: " * Serving Flask app "server.instance" (lazy loading) * Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead. * Debug mode: on " As expected. For react: "> youth@1.0.0 start /youthproject > react-scripts start Starting the development server... Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade` Compiled with warnings." Expected as well. Both of these were collected with "docker logs CONTAINER" – FallenCringelord Dec 01 '20 at 19:16
  • Can you try to add the `EXPOSE` declaration in your dockerfiles? Because you declare the port binding in your `docker-compose.yml`, I'm not sure the 5000 and 3000 ports can be bound without expose. – Steven Weng Dec 02 '20 at 05:11
  • I believe port exposure happens in the .yml file as well, but I added EXPOSE just in case and the result is the same. – FallenCringelord Dec 02 '20 at 15:37

0 Answers0