媒体文件在Docker容器正常但本地网站无法加载的后端排查求助

我开发了一个包含API后端和前端的网站，前端并非由我编写，且已通过充分测试运行正常，因此问题出在后端。媒体文件已确认加载到Docker容器中，但无法在本地网站（localhost）加载，且没有404错误，看起来网站并未向媒体文件发送请求。

全局urls配置 #

if settings.DEBUG:
    urlpatterns += static(
        settings.MEDIA_URL, document_root=settings.MEDIA_ROOT
    )

settings配置 #

MEDIA_URL = '/media_backend/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'backend_media')

Nginx配置 #

server {
    listen 80;
    server_name 127.0.0.1;
    location /static_backend/ {
        alias /app/backend_static/;
    }
    location /static/admin {
        alias /app/backend_static/admin/;
    }
    location /media_backend/ {
        alias /app/backend_media/;
    }
    location /api/docs/ {
        root /usr/share/nginx/html;
        try_files $uri $uri/redoc.html;
    }
    location /api/ {
        proxy_pass http://backend:8000;
    }
    location /admin/ {
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Url-Scheme $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass   http://backend:8000/admin/;
    }
    location / {
        root /usr/share/nginx/html;
    }
}

docker-compose配置 #

version: '3.8'
services:
  db:
    image: postgres:12
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    env_file:
      - ./.env
  backend:
    image: konstantin05/foodgram_backend:latest
    expose:
      - 8000
    restart: always
    volumes:
      - static_value:/app/backend_static/
      - media_value:/app/backend_media/
    env_file:
      - ./.env
  nginx:
    image: nginx:1.21.3-alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
      - ../frontend/build:/usr/share/nginx/html/
      - ../docs/redoc.html:/usr/share/nginx/html/api/docs/redoc.html
      - ../docs/openapi-schema.yml:/usr/share/nginx/html/api/docs/openapi-schema.yml
      - static_value:/app/backend_static/
      - media_value:/app/backend_media/
    restart: always
    depends_on:
      - frontend
    frontend:
      image: konstantin05/foodgram_frontend:latest
      volumes:
        - ../frontend/:/app/result_build/
volumes:
  static_value:
  media_value:
  postgres_data:

排查与解决步骤 #

• 校验后端返回的媒体URL格式：直接调用API接口，查看返回的媒体字段是否为完整的http://localhost/media_backend/[文件名]格式。如果返回的是相对路径、文件名或容器内部路径，前端无法识别为可请求地址，自然不会发起请求。
• 确认DEBUG模式状态：当前仅在DEBUG=True时Django才会处理媒体文件请求。如果本地容器部署的DEBUG设为False，要么改为True测试，要么确保Nginx的媒体路径配置完全正确。
• 验证Nginx媒体路径配置：进入Nginx容器执行ls /app/backend_media/，确认文件存在且路径与alias配置一致。注意location和alias的结尾斜杠要匹配，避免路径拼接错误。
• 检查Docker卷同步情况：分别进入后端和Nginx容器，查看/app/backend_media/下的文件是否一致，确认media_value卷的挂载同步正常。
• 前端请求日志校验：打开浏览器开发者工具的Network标签，确认是否真的没有媒体文件请求。如果确实无请求，优先排查后端返回的URL正确性。

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