Facing problem in Docker Networking: Frontend React and Backend Django Containers Unable to Communicate

Docker Desktop
,
1

Hi people I need help to solve a network issue in my container.
i have two container 1) frontend(react) 2) backend(django)
and i am facing this error.

my-frontend-container | Proxy error: Could not proxy request /api/products/top/ from 127.0.0.1:3000 to http://127.0.0.1:8000/.
my-frontend-container | See https://nodejs.org/api/errors.html#errors_common_system_error for more information (ECONNREFUSED).
  1. they work perfectly fine when working without container (directly on host)
  2. i am running them with help of docker-compose
  3. they are starting fine but unable to talk to each other

this is my port on dockerfile
++++++++++++++++
backend docker file

// Expose the port the Django app runs on
EXPOSE 8000

//Command to run the Django development server
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

+++++++++++++++++++

frontend docker file

//port the React app 
 EXPOSE 3000

//Command to run the React app
CMD ["npm", "start"]

++++++++++++++++++++++
docker-compose: -

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "127.0.0.1:8000:8000"  # Expose backend on port 8080

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "127.0.0.1:3000:3000"  # Expose frontend on port 3000
    environment:
      - REACT_APP_BACKEND_URL=http/://127.0.0.1:8000
2

I formatted your question. Please, format your post next time according to the following guide: How to format your forum posts
In short: please, use </> button to share codes, terminal outputs, error messages or anything that can contain special characters which would be interpreted by the MarkDown filter. Use the preview feature to make sure your text is formatted as you would expect it and check your post after you have sent it so you can still fix it.

Example code block:

```
echo "I am a code."
echo "An athletic one, and I wanna run."
```
1 Like
3

This is an invalid url

But even if it wasn’t invalid, you would connect to the localhost of the container in which you send the HTTP request not the backend. Use “backend” instead of the url.

1 Like
4

Thank you, I will make sure to follow the guide for my future posts.

5

I made some changes to the docker-compose file, the app is working fine but the images from backend database(sqlite) is not being rendered properly to the frontend app.
All other info(name,price,etc) is being sent except the images.
here are the new changes
++++++++++++++++++++++++++++

backend dockerfile

FROM python:3.8-slim

# environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

RUN pip install --upgrade pip
RUN pip install numpy
RUN pip install gunicorn

WORKDIR /app
COPY . /app

RUN pip install -r requirements.txt

COPY ./entrypoint.sh .
ENTRYPOINT [ "sh","/app/entrypoint.sh" ]

EXPOSE 8000

entrypoint.sh file

#!/bin/sh

gunicorn backend.wsgi:application --bind 0.0.0.0:8000

frontend dockerfile

FROM node:alpine

WORKDIR /app
COPY . .

RUN npm install

CMD ["npm", "run", "build"]
#CMD ["npm","start"]

EXPOSE 3000

and my docker-compose file

version: '3.7'

services:
  backend:
    volumes:
      - static:/static
    build:
      context: ./backend
    ports:
      - "8000:8000"
  frontend:
    build:
      context: ./frontend
    volumes:
      - frontend:/app/build
  nginx:
    build:
      context: ./nginx
    volumes:
      - static:/static
      - frontend:/var/www/frontend
    ports:
      - "80:80"
    depends_on:
      - backend
      - frontend

volumes:
  static:
  frontend:

here is a screenshot of the problem

image-error
image-error942×361 13.9 KB

6

Check the network tab in the developer console of the browser inspect the missing image, but it doesn’t seem like an issue with the communication between frontend and backend. You just have an invalid url. Checking browser logs is part of frontend programming.

1 Like