Docker+Nginx环境下Django-React项目媒体文件404问题求助

我正在开发一个Django-React项目，所有媒体文件都存放在frontend/src/assets目录下。这是我第一次用Docker和Nginx部署项目，想通过Nginx提供媒体文件服务，但一直没法正常工作——本地运行Django和React开发服务器时媒体文件能正常访问，部署到Docker容器后所有图片都返回404 Not Found，虽然已经把媒体文件映射到Nginx容器的对应路径了。

项目文件结构 #

-backend (django-project)
 -Dockerfile
 -backend
  -settings.py

-frontend (react-project)
 -Dockerfile
 -src
  -assets (django和react的媒体根目录)

-nginx
 -Dockerfile
 -nginx.conf

-docker-compose.yml

各组件配置 #

后端Dockerfile配置 #

# Use the official Python 3.11 image
FROM python:3.11

# Copy the Django application code
COPY . /app

# Set the working directory
WORKDIR /app

# Install the dependencies
RUN pip install -r requirements.txt

# Expose port 8000
EXPOSE 8000

前端Dockerfile配置 #

# Use the official Node.js 16.13 image
FROM node:16.13

# Copy the React application code
COPY . /app

# Set the working directory
WORKDIR /app

# Install the dependencies
RUN npm install

# Expose port 3000
EXPOSE 3000

# Start the React development server
CMD ["npm", "start"]

Nginx Dockerfile配置 #

# ./nginx/Dockerfile
FROM nginx:latest

# Set working directory
WORKDIR /app

# Copy Nginx configuration
COPY ./nginx.conf /etc/nginx/nginx.conf

nginx.conf配置 #

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name _;  # Allow requests without a specific domain name

        location /media/ {
            autoindex on;
            alias /app/src/assets/;
        }

        location / {
            proxy_pass http://django:8000;  # Proxy requests to the Django container
        }
    }
}

docker-compose.yml配置 #

version: '3'

services:
  postgres:
    image: postgres
    environment:
      - POSTGRES_DB=*****
      - POSTGRES_USER=*****
      - POSTGRES_PASSWORD=*****
    volumes:
      - pgdata:/var/lib/postgresql/data 

  django:
    build: ./backend
    ports:
      - "8000:8000"
    volumes:
      - ./backend:/app # Map backend directory
    depends_on:
      - postgres
    command: bash -c "python manage.py runserver 0.0.0.0:8000"

  react:
    build: ./frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/app # Map frontend directory
    depends_on:
      - django

  nginx:
    build: ./nginx
    ports:
      - "80:80"
    volumes:
      - ./frontend/src/assets:/app/src/assets # Map media files
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro # Mount custom nginx.conf file
    depends_on:
      - django

volumes:
  pgdata:

Django settings.py媒体配置 #

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, '..', 'frontend', 'src', 'assets')

已尝试的修改 #

• 移除Django和React容器的卷映射，同时移除Nginx容器中./nginx/nginx.conf:/etc/nginx/nginx.conf:ro的卷映射，重启容器后Nginx日志无异常，但问题依旧。
• 修改settings.py中的MEDIA_ROOT为'/app/src/assets'（Nginx容器中的路径），问题仍未解决。

错误日志 #

Python控制台输出：

2023-08-08 19:08:24 Not Found: /media/images/book/book.svg
2023-08-08 19:08:24 [08/Aug/2023 17:08:24] "GET /media/images/book/book.svg HTTP/1.1" 404 5972

React组件访问方式 #

<img src={`/media/images/book/book.svg`}/>

内容的提问来源于stack exchange，提问作者Louis Eiden