Docker容器中Django无法为CKEditor提供静态文件的问题

问题现象 #

本地通过python manage.py runserver启动项目时，CKEditor编辑器及工具栏能正常加载；但使用docker-compose搭配Nginx部署后，控制台出现404错误：

Failed to load resource: the server responded with a status of 404 (Not Found) ckeditor-init.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) ckeditor.js:1

相关配置文件 #

docker-compose.yml #

version: '3.8'

services:
  db:
    image: postgres:13
    environment:
      - POSTGRES_DB=db
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
    volumes:
      - db_data:/var/lib/postgresql/data
    networks:
      - app_network

  web:
    build: .
    command: gunicorn okuyorum.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - static_volume:/app/staticfiles
      - media_volume:/app/media
    expose:
      - 8000
    depends_on:
      - db
    networks:
      - app_network

  nginx:
    image: nginx:1.19
    volumes:
      - static_volume:/usr/share/nginx/html/static
      - media_volume:/usr/share/nginx/html/media
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80
    depends_on:
      - web
    networks:
      - app_network

volumes:
  db_data:
  static_volume:
  media_volume:

networks:
  app_network:

Dockerfile #

# Use an official Python base image
FROM python:3.8

# Set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# Create and set the working directory
RUN mkdir /app
WORKDIR /app

# Install system dependencies
RUN apt-get update && apt-get install -y \
    libpq-dev \
    gcc \
    gettext \
    && rm -rf /var/lib/apt/lists/*

# Install project dependencies
COPY requirements.txt /app/
RUN pip install --upgrade pip && \
    pip install -r requirements.txt

# Copy the project files
COPY . /app/

# Collect static files
RUN python manage.py collectstatic --noinput

# Expose the port the app runs on
EXPOSE 8000

nginx.conf #

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    tcp_nopush     on;
    tcp_nodelay    on;
    keepalive_timeout  65;
    types_hash_max_size 2048;
    client_max_body_size 100M;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen 80 default_server;
        server_name example.com www.example.com;

        location / {
            proxy_pass http://web:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /static/ {
            alias /usr/share/nginx/html/static/;
        }

        location /media/ {
            alias /usr/share/nginx/html/media/;
        }
    }
}

解决方案 #

1. 验证CKEditor静态文件收集情况 #

• 确认Django配置文件settings.py中STATIC_ROOT设置为os.path.join(BASE_DIR, 'staticfiles')，与Dockerfile、docker-compose中的挂载路径一致。
• 重新构建镜像并查看collectstatic执行日志，确保没有报错：

  docker-compose build --no-cache
  

• 进入web容器检查/app/staticfiles/ckeditor目录是否存在，确认CKEditor的静态文件已被收集：

  docker-compose exec web ls /app/staticfiles/ckeditor
  

2. 确认Nginx静态资源映射正确性 #

• 访问http://你的域名/static/ckeditor/ckeditor.js，如果返回404，说明Nginx没有正确映射到静态文件。
• 尝试将Nginx中/static/的alias替换为root指令测试（效果一致，但语法更直观）：

  location /static/ {
      root /usr/share/nginx/html;
  }
  

• 修改Nginx配置后重启容器：

  docker-compose restart nginx
  

3. 检查Django配置完整性 #

• 确保settings.py的INSTALLED_APPS中包含'ckeditor'（如果用到上传功能还需添加'ckeditor_uploader'）。
• 确认settings.py中STATIC_URL = '/static/'，与Nginx的location路径匹配。

4. 清除浏览器缓存 #

浏览器缓存可能导致旧的资源路径无法更新，尝试用隐私模式访问，或手动清除浏览器缓存后重新加载页面。

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