Docker部署Nginx+Gunicorn+Django时静态文件无法加载的问题

核心问题是静态文件仅存在于Django容器中，Nginx容器无法访问。以下是具体修改步骤：

1. 确保Django正确收集静态文件 #

修改production.py配置文件，明确静态文件的输出目录：

# production.py
DEBUG = False
STATIC_URL = '/static/'
# 指定collectstatic命令收集静态文件的目标目录
STATIC_ROOT = '/app/staticfiles/'

2. 在Django容器中执行静态文件收集 #

修改Django的Dockerfile，添加collectstatic命令（确保构建镜像时自动生成静态文件）：

# Django Dockerfile
# 基础镜像、依赖安装等原有配置...

# 设置环境变量（确保Django运行在生产模式）
ENV DEBUG=False

# 收集静态文件到STATIC_ROOT指定目录
RUN python manage.py collectstatic --noinput

3. 让Nginx容器获取静态文件（二选一） #

方案一：使用Docker共享卷（推荐，支持静态文件动态更新） #

修改docker-compose.yml，添加共享卷实现Django与Nginx的静态文件共享：

version: '3.8'
services:
  django:
    build: ./django  # 指向Django项目目录
    volumes:
      - static_volume:/app/staticfiles/  # 将静态文件目录挂载到共享卷
    # 其他配置：端口、环境变量、命令等...

  nginx:
    build: ./nginx  # 指向Nginx配置目录
    volumes:
      - static_volume:/usr/share/nginx/html/static/  # 从共享卷读取静态文件
    ports:
      - "80:80"
    depends_on:
      - django  # 确保Django服务先启动

volumes:
  static_volume:  # 定义共享卷

同时修改Nginx配置文件，指向挂载的静态文件目录：

# nginx.conf
server {
    listen 80;
    server_name your-domain.com;

    # 处理静态文件请求
    location /static/ {
        alias /usr/share/nginx/html/static/;
        expires 30d;  # 可选：设置静态文件缓存过期时间
    }

    # 转发动态请求到Gunicorn
    location / {
        proxy_pass http://django:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

方案二：构建Nginx镜像时复制静态文件（适合静态文件无需更新的场景） #

1. 先构建Django镜像：

docker build -t django-app -f ./django/Dockerfile .

2. 修改Nginx的Dockerfile，从已构建的Django镜像中复制静态文件：

# Nginx Dockerfile
FROM nginx:alpine

# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 从Django镜像复制静态文件到Nginx容器
COPY --from=django-app /app/staticfiles/ /usr/share/nginx/html/static/

# 确保Nginx有读取权限（可选，若出现权限问题添加）
RUN chmod -R 755 /usr/share/nginx/html/static/

3. 对应的Nginx配置文件静态路径同样设置为/usr/share/nginx/html/static/，和方案一一致。

4. 验证配置 #

重新构建镜像并启动服务：

docker-compose down
docker-compose build
docker-compose up -d

访问http://your-domain.com/static/your-static-file.css，确认静态文件可正常访问。

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