Nginx无法加载媒体文件报404错误，请求技术指导

所有API正常，但媒体文件访问均返回404，已验证文件存在于挂载的volume及Docker容器的media目录中，相关配置及日志如下：

docker-compose文件 #

version: "3.9"
services:
  nginx:
     container_name: realestate_preprod_nginx_con
     build: ./nginx
     volumes:
       - static_volume:/home/inara/RealEstatePreProd/static
       - media_volume:/home/inara/RealEstatePreProd/media
     networks:
       glory1network:
         ipv4_address: 10.1.1.8
     expose:
       - 8000
     depends_on:
       - realestate_frontend
       - realestate_backend
  real_estate_master_db:
    image: postgres:latest
    container_name: realestate_master_db_con
    env_file:
      - "./database/master_env"
    restart: "always"
    networks:
      glory1network:
        ipv4_address: 10.1.1.5
    expose:
      - 5432
    volumes:
      - real_estate_master_db_volume:/var/lib/postgresql/data
  real_estate_tenant1_db:
    image: postgres:latest
    container_name: realestate_tenant1_db_con
    env_file:
      - "./database/tenant1_env"
    restart: "always"
    networks:
      glory1network:
        ipv4_address: 10.1.1.9
    expose:
      - 5432
    volumes:
      - real_estate_tenant1_db_volume:/var/lib/postgresql/data
      
  realestate_frontend:
    image: realestate_web_frontend_service
    container_name: realestate_frontend_con
    restart: "always"
    build: ./frontend
    command: bash -c "./realestate_frontend_ctl.sh"
    expose:
      - 8092
    networks:
      glory1network:
        ipv4_address: 10.1.1.6
    depends_on:
      - real_estate_master_db
      - real_estate_tenant1_db

  realestate_backend:
    image: realestate_web_backend_service
    container_name: realestate_backend_con
    restart: "always"
    build: ./backend
    command: bash -c "./realestate_backend_ctl.sh"
    expose:
      - 8091
    volumes:
      - static_volume:/home/inara/RealEstatePreProd/static
      - media_volume:/home/inara/RealEstatePreProd/media
    networks:
      glory1network:
        ipv4_address: 10.1.1.7
    env_file:
      - "./database/env"
    depends_on:
      - realestate_frontend
      - real_estate_master_db
      - real_estate_tenant1_db

networks:
    glory1network:
        external: true

volumes:
  real_estate_master_db_volume:
  real_estate_tenant1_db_volume:
  static_volume:
  media_volume:

Nginx配置文件 #

upstream realestate_frontend_site {
    server realestate_frontend:8092;
}

server {
    listen 8000;
    access_log /home/inara/RealEstatePreProd/realestate_frontend-access.log;
    error_log /home/inara/RealEstatePreProd/realestate_frontend-error.log;
    client_max_body_size 0;
    location / {
        proxy_pass http://realestate_frontend_site;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
        client_max_body_size 0;

    }
}

upstream realestate_backend_site {
    server realestate_backend:8091;
}

server {
    listen 8000;
    access_log /home/inara/RealEstatePreProd/realestate_backend-access.log;
    error_log /home/inara/RealEstatePreProd/realestate_backend-error.log;
    location / {
        proxy_pass http://realestate_backend_site;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }
     location /static {
        root /home/inara/RealEstatePreProd;
    }

    location /media/ {      
        alias /home/inara/RealEstatePreProd/media/;
    }
}

settings.py配置 #

MEDIA_ROOT = os.path.join(MAIN_DIR, 'media')
MEDIA_URL = '/media/'

其中MAIN_DIR = '/home/inara/RealEstatePreProd'，也尝试过使用BASE_DIR。

Nginx错误日志 #

100.64.6.10 - - [05/Dec/2022:08:46:28 +0500] "GET /media/project_logos/logo_Testimages660.png HTTP/1.1" 404 179 "http://dev-realestate-frontend.inara.tech/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"

核心问题：Nginx多Server监听同一端口导致请求匹配错误 #

你配置了两个server块都监听8000端口，Nginx会优先匹配第一个符合条件的server块。当请求/media/xxx时，第一个server的location /会匹配所有请求，将其代理到前端服务，而前端没有/media相关路由，因此返回404。

修正方案：合并Nginx配置，统一处理路由 #

调整Nginx配置，把前端、后端代理以及静态/媒体文件服务放到同一个server块，让Nginx优先处理/media和/static请求，剩余请求按路径分发给前端或后端（比如后端接口用/api前缀区分）。

示例修正后的Nginx配置：

upstream realestate_frontend_site {
    server realestate_frontend:8092;
}

upstream realestate_backend_site {
    server realestate_backend:8091;
}

server {
    listen 8000;
    access_log /home/inara/RealEstatePreProd/access.log;
    error_log /home/inara/RealEstatePreProd/error.log;
    client_max_body_size 0;

    # 优先处理媒体文件请求
    location /media/ {      
        alias /home/inara/RealEstatePreProd/media/;
        # 可选：添加缓存控制
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # 处理静态文件请求
    location /static {
        root /home/inara/RealEstatePreProd;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # 后端API请求（假设接口以/api开头）
    location /api/ {
        proxy_pass http://realestate_backend_site;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    # 其余请求转发给前端
    location / {
        proxy_pass http://realestate_frontend_site;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
        client_max_body_size 0;
    }
}

额外验证步骤 #

1. 重启Nginx容器：执行docker-compose restart nginx确保新配置生效。
2. 检查Nginx容器内文件：进入容器docker exec -it realestate_preprod_nginx_con bash，确认/home/inara/RealEstatePreProd/media/project_logos/logo_Testimages660.png存在且Nginx进程有读取权限。
3. 确认Django配置：确保MEDIA_ROOT和MEDIA_URL正确，生产环境下不要让Django自己处理媒体文件请求，应由Nginx直接服务。

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