使用 Docker/Nginx 设置 Django 静态

Posted 2023-02-23

【中文标题】使用 Docker/Nginx 设置 Django 静态

【英文标题】：Setting up Django static with Docker/Nginx

【发布时间】：2022-01-24 04:15:09

【问题描述】：

我正在对我的 Django/React 应用程序进行 Dockerizing，但在将静态文件显示在产品服务器上时遇到问题。

项目目录：

.
├── README.md
├── backend
│   ├── Dockerfile
│   ├── Dockerfile.prod
│   ├── backend
│   ├── entrypoint.prod.sh
│   ├── entrypoint.sh
│   ├── manage.py
│   ├── requirements.txt
│   └── static
├── docker-compose.ci.yml
├── docker-compose.prod.yml
├── docker-compose.yml
├── frontend
│   ├── Dockerfile
│   ├── Dockerfile.prod
│   ├── README.md
│   ├── build
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   ├── src
│   └── webpack.config.js
└── nginx
    ├── Dockerfile
    └── nginx.conf

nginx.conf

upstream backend 
    server backend:8000;


server 
    listen 80;

    location / 
        root "/var/www/frontend";
        

    location /api/ 
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    

    location /admin/ 
        proxy_pass http://backend;
        proxy_set_header Host $http_host;
    
    
    location /static/ 
        alias /backend/static;
    

Django 静态设置：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

docker-compose.ci.yml（构建镜像）：

version: "3.8"

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile.prod
    image: "$BACKEND_IMAGE"
    command: gunicorn backend.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - static_volume:/backend/static
      - media_volume:/backend/media
    expose:
      - 8000
    env_file: .env
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.prod
    image: "$FRONTEND_IMAGE"
    volumes:
      - frontend_build:/frontend/build
  nginx:
    build:
      context: ./nginx
    image: "$NGINX_IMAGE"
    ports:
      - 80:80
    volumes:
      - static_volume:/backend/static
      - frontend_build:/var/www/frontend
    depends_on:
      - backend
      - frontend

volumes:
  frontend_build:
  static_volume:
  media_volume:

在 Chrome 开发工具的网络选项卡中，它会在尝试加载静态时显示此 URL：

请求网址：http://ipaddress/static/admin/css/nav_sidebar.cs

【问题讨论】：

STATIC_ROOT 解析为什么？应该是/backend/static/。

是的，它解析为/backend/static/

一些健全性检查。你跑collectstatic了吗？你在nginx 容器docker-compose exec nginx ls /backend/static 中看到你的静态文件了吗？

collectstatic 在构建期间运行 - 我复制文件不是问题，对吧？登录服务器时，我可以运行 docker exec -it b43 sh 和 ls /backend 来查看 /static 目录。

“构建期间”是指 Dockerfile 中的 collectstatic 吗？

【参考方案1】：

在构建期间收集在backend 容器内的静态文件被static_volume 隐藏，它在您运行docker-compose 时挂载。

当您在目录顶部安装卷时，您只能看到卷的内容，而不是之前目录中的文件。

你可以解决这个问题

安装卷后运行collectstatic。 IE。服务器启动后 在构建时将 Django 生成的静态文件复制到 nginx 容器中（不再需要使用卷）