serving Django static files with Docker, nginx and gunicorn

Question

I am setting us a Django 2.0 application with Docker, nginx and gunicorn.

It's running the server but static files are not working.

Here is the settings.py content

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static_my_project')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static_cdn', 'static_root')

While developing, I put my static files inside static_my_project, which on running collectstatic copies to static_cdn/static_root

The directory structure is like

app
 |- myapp
    |- settings.py
 |- static_my_project
 |- static_cdn
    |- static_root
 |- config
    |- nginx
       |- nginx.conf
 |- manage.py
 |- Docker
 |- docker-compose.yml

on running

docker-compose up --build

on running collectstatic, it gives path where static files will be copied

koober-dev | --: Running collectstatic
koober-dev |
koober-dev | You have requested to collect static files at the destination
myapp-dev | location as specified in your settings:
myapp-dev |
myapp-dev | /app/static_cdn/static_root
myapp-dev |
myapp-dev | This will overwrite existing files!
myapp-dev | Are you sure you want to do this?
myapp-dev |
myapp-dev | Type 'yes' to continue, or 'no' to cancel:
myapp-dev | 0 static files copied to '/app/static_cdn/static_root', 210 unmodified.

the config/nginx/nginx.conf file contains following settings

upstream web {
    ip_hash;
    server web:9010;
}

server {
    location /static {
        autoindex on;
        alias /static/;
    }

    location / {
        proxy_pass http://web;
    }
    listen 10080;
    server_name localhost;
}

docker-compose.yml

version: '3'

services:
  nginx:
    image: nginx:latest
    container_name: "koober-nginx"
    ports:
      - "10080:80"
      - "10443:43"
    volumes:
      - .:/app
      - ./config/nginx:/etc/nginx/conf.d
      - ./static_cdn/static_root/:/static
    depends_on:
      - web
  web:
    build: .
    container_name: "koober-dev"
    command: ./start.sh
    volumes:
      - .:/app
      - ./static_cdn/static_root/:/app/static_cdn/static_root
    ports:
      - "9010:9010"
    depends_on:
      - db
  db:
    image: postgres
    container_name: "koober-postgres-db"

Dockerfile

FROM ubuntu:18.04

# -- Install Pipenv:
FROM python:3
ENV PYTHONUNBUFFERED 1

ENV LC_ALL C.UTF-8
ENV LANG C.UTF-8

# -- Install Application into container:
RUN set -ex && mkdir /app

WORKDIR /app
ADD requirements.txt /app/

RUN pip install -r requirements.txt

# -- Adding dependencies:
ADD . /app/

But it is not loading static files.

Answer 1

You need to have a shared volume to the STATIC_ROOT directory so that your nginxcontainer can reverse proxy to both web server and static files generated by your web server.

In docker-compose.yml:

services:
  nginx:
    image: nginx:alpine
    volumes:
      - ./static_cdn/static_root/:/static
    ports:
      - 80:80
  web:
    build: .
    volumes:
      - ./static_cdn/static_root/:/app/static_cdn/static_root

Now in your nginx.conf add:

location /static/ {
    alias /static/;
}