Nginx如何配置/static路径映射Docker共享staticfiles数据卷

配置存在三处核心问题：

• Nginx运行在独立容器中，无法读取web_cont容器内部的/app/static、/app/media路径，原nginx.conf里的静态路径alias完全指向了容器内不存在的位置
• Nginx容器没有挂载mediafiles共享数据卷，本身没有访问媒体文件的权限
• 隐藏坑点：如果直接将staticfiles卷挂载到Nginx镜像内前端静态文件所在的/usr/share/nginx/html/build/static路径，会覆盖镜像构建阶段打包进去的前端静态资源，导致前端页面404

1. 调整docker-compose.yml中Nginx容器的卷挂载 #

修改nginx_cont服务的volumes配置，将静态、媒体卷挂载到独立路径，避免覆盖镜像内原有前端文件：

nginx_cont:
    build:
      context: .
      dockerfile: ./compose/production/nginx/Dockerfile
    restart: always
    volumes:
      # 静态共享卷挂载到独立路径，不覆盖前端build目录下的原有文件
      - staticfiles:/usr/share/nginx/html/shared_static
      # 新增媒体卷挂载
      - mediafiles:/usr/share/nginx/html/media
    ports:
      - 80:80
    depends_on:
      - web_cont
    networks:
      spa_network:

其余服务配置保持不变即可。

2. 修正nginx.conf的静态路由配置 #

将/static/、/media/路由的路径映射修改为Nginx容器内的实际可访问路径，调整后完整配置如下：

server {
    listen 80;
    server_name localhost; 
    location / {
      root   /usr/share/nginx/html/build;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
      add_header X-Frame-Options "SAMEORIGIN";
    }

    location /wagtail {
        proxy_pass http://172.20.128.2:8000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Script-Name /wagtail;
        client_max_body_size 20M;
    }

    location /static/ {
        # 先尝试读取前端构建自带的静态文件，找不到再读共享卷里的后端静态
        root /usr/share/nginx/html/build;
        try_files $uri /../shared_static/$uri =404;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
    location /media/ {
        alias /usr/share/nginx/html/media/;
        expires 7d;
    }
}

为了保证前后端静态文件都能正常加载，需要在两个容器的启动命令中增加静态资源同步逻辑：

• 后端web_cont的启动脚本：启动服务前先执行python manage.py collectstatic --noinput，将Django、Wagtail、admin后台的静态文件收集到/app/static路径，自动写入staticfiles共享卷
• （可选）如果存在静态文件覆盖风险，可以在Nginx容器启动脚本中加一步复制操作：cp -rn /usr/share/nginx/html/build/static/* /usr/share/nginx/html/shared_static/，将镜像内打包的前端静态文件复制到共享卷，避免卷初始化时丢失前端资源

配置修改完成后，执行以下命令重建服务生效：

docker compose up -d --build

注意：如果之前测试时产生了脏数据，需要清空卷再启动的话，请先备份sqlite_db数据库文件，再执行docker compose down -v，否则会丢失所有数据库数据。

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