使用Nginx和Docker部署Django时静态文件无法加载的问题

问题背景 #

在Django、Nginx和Docker的部署环境中，页面可正常加载，但静态文件访问返回404错误。以下是相关配置文件及报错信息：

相关配置文件 #

Django Dockerfile #

FROM python:3.10.5-alpine

RUN pip install --upgrade pip

RUN wget https://upload.wikimedia.org/wikipedia/commons/b/b9/First-google-logo.gif -O media/media.gif

COPY ./requirements.txt .
RUN pip install -r requirements.txt
COPY ./src /app

WORKDIR /app

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

nginx.conf #

upstream django {
    server django_gunicorn:8000;
}

server {
    listen 80;
    server_name 127.0.0.1;

    location / {
        proxy_pass http://django;
    }

    location /static/ {
        alias /static/;
    }

    location /media/ {
        alias /media/;
    }
}

nginx Dockerfile #

FROM nginx:1.19.0-alpine

COPY ./nginx.conf /etc/nginx/conf.d/nginx.conf

docker-compose.yml #

version: '3.7'

services:
  django_gunicorn:
    volumes:
      - static:/static
      - media:/media
    env_file:
      - env
    build:
      context: .
    ports: 
      - "8000:8000"
  nginx:
    build: ./nginx
    volumes:
      - static:/static
      - media:/media
    ports:
      - "80:80"
    depends_on:
      - django_gunicorn

volumes:
  static:
  media:

entrypoint.sh #

#!/bin/sh

python manage.py migrate
python manage.py collectstatic

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

报错信息 #

testapp-django_gunicorn-1  |
testapp-django_gunicorn-1  | 9771 static files copied to '/app/static'.
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [9] [INFO] Starting gunicorn 20.1.0
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [9] [INFO] Listening at: http://0.0.0.0:8000 (9)
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [9] [INFO] Using worker: sync
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [10] [INFO] Booting worker with pid: 10
testapp-nginx-1            | 172.20.0.1 - - [21/Jul/2022:12:30:45 +0000] "GET /scripts/ HTTP/1.1" 200 17460 "http://127.0.0.1/scripts/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-"
testapp-nginx-1            | 172.20.0.1 - - [21/Jul/2022:12:30:45 +0000] "GET /static/scripts/bootstrap/css/bootstrap.css HTTP/1.1" 404 555 "http://127.0.0.1/scripts/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-"
testapp-nginx-1            | 2022/07/21 12:30:45 [error] 30#30: *1 open() "/static/scripts/bootstrap/css/bootstrap.css" failed (2: No such file or directory), client: 172.20.0.1, server: 127.0.0.1, request: "GET /static/scripts/bootstrap/css/bootstrap.css HTTP/1.1", host: "127.0.0.1", referrer: "http://127.0.0.1/scripts/"

问题分析与解决方案 #

从日志能看到，collectstatic已将静态文件复制到/app/static，但Nginx尝试访问/static/路径下的文件时找不到——核心问题是Django容器内的静态文件存储路径与Docker卷挂载路径不匹配。

修复步骤： #

1. 修改Django的settings.py配置
   将静态文件和媒体文件的根目录设置为Docker卷挂载的路径：

   STATIC_ROOT = '/static'
   MEDIA_ROOT = '/media'
   

2. 优化entrypoint.sh（可选）
   为collectstatic添加--noinput参数，避免运行时出现交互式确认：

   python manage.py collectstatic --noinput
   

3. 重建容器生效
   执行命令重新构建并启动服务：

   docker-compose down
   docker-compose build --no-cache
   docker-compose up -d
   

调整后，Django会将静态文件直接写入挂载的/static卷中，Nginx就能正确读取到静态文件，解决404问题。

内容的提问来源于Stack Exchange，提问作者Balizok