How to serve images from backend to frontend

Using Django Deployment
1

Hi folks,
I have an application with following three different docker containers:-
Frontend(react)
Back-end(django)
Nginx for serving static files from frontend
I am not seeing any errors, and all other data is being served from backend container but only image is not being sent
Can someone please help.

debug is true and
MEDIA_URL = ‘/media/’
MEDIA_ROOT = os.path.join(BASE_DIR ,“media”)

I have tried uploading media files to Nginx and Django-container as dir at /media to check if it works, but no success
Nothing seems to work, please help

here are the docker files

backend(django) dockerfile
.........................
FROM python:3.8-slim

# Set 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

COPY ./media /media

RUN pip install -r requirements.txt
RUN python manage.py collectstatic --noinput

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

EXPOSE 8000
===========================================

entrypoint.sh
.............
#!/bin/sh

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

frontend(react) dockerfile
...........................
FROM node:alpine

WORKDIR /app
COPY . .

RUN npm install

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

EXPOSE 3000
===========================================
nginx dockerfile
...............
FROM nginx:1.19.0-alpine
COPY ./media /media
COPY ./default.conf /etc/nginx/conf.d/default.conf
==================================================
dfault.conf
upstream backend {
	server backend:8000;
}

server {
	listen 80;

	location /api/ {
		proxy_pass http://backend;
	}

	#locaion of media folder
        location /media  {  
	alias /media/;                                                                                     
        }
	location /static/rest_framework/ {
		root /static/;
	}

	location / {
		root /var/www/frontend;
		try_files $uri $uri/ /index.html;
	}
}
================================================
docker-compose
..............
version: '3.7'

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

volumes:
  static:
  frontend:
  media:
2

From what I can see here, your docker containers make it appears that the media directory is off of root, /media.

However, your post shows:

which would put the media directory within /app

1 Like
3

many thanks for help, It works fine now