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.

I think you reversed things in your nginx config. The location should be where browser expects to find things and alias should be the actual file system location. — Mad Wombat, Jun 04 '18 at 17:28
Did you try: ```location /app/static_cdn/static_root { autoindex on; alias /app/static_cdn/static_root; } ``` — gcharbon, Jun 04 '18 at 17:47
tried it too. By the way it is giving following in console `myapp-dev | Not Found: /static/theme/css/custom.css` — Anuj TBE, Jun 04 '18 at 17:52
can you please clarify what does this sentence mean? "While developing, I put my static files inside static_my_project, which on running collectstatic copies to static_cdn/static_root" — Tms91, Apr 18 '20 at 16:28

Pranav Aggarwal · Answer 1 · 2018-06-05T11:12:25.897

19

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/;
}

edited Jun 05 '18 at 11:12

answered Jun 04 '18 at 19:19

Pranav Aggarwal

605
4
9

updated question with `docker-compose.yml` which is not giving error `Mounts denied: The path /static is not shared from OS X and is not known to Docker` – Anuj TBE Jun 05 '18 at 03:16
You have not added /static path accessible to docker. You can do that with [https://stackoverflow.com/questions/45122459/docker-mounts-denied-the-paths-are-not-shared-from-os-x-and-are-not-known]. Also you should not mount mount the full source code to both containers. Just mount the parts that need to be shared between containers. In your example only `STATIC_ROOT` needs to be shared among nginx and web containers. Edited mount path in answer. – Pranav Aggarwal Jun 05 '18 at 07:06
the `static_cdn` directory is inside `application` directory which is inside `user` directory and `user` is already there in `Docker` sharable paths. I tried your changes but still no success. This time it didn't give `Mount denied` but on accessing the website, it gives file not found and only shows texts – Anuj TBE Jun 05 '18 at 10:36
Did you run `python manage.py collectstatic --noinput` after starting your containers? Your mounted path i.e. `app/static_cdn/static_root` should have the static files that you are trying to serve using `nginx` – Pranav Aggarwal Jun 05 '18 at 11:10
yes, and the files are copied to `/app/static_cdn/static_root` but they are not being served – Anuj TBE Jun 05 '18 at 11:49
2

I tried it and it is working for me. Have a look. https://gitlab.com/pranavagg/django-docker-sample – Pranav Aggarwal Jun 06 '18 at 20:14

addu390 · Answer 2 · 2022-02-10T18:51:23.133

Nginx Dockerfile:

FROM nginx:stable-alpine

COPY default.conf /etc/nginx
COPY default.conf /etc/nginx/conf.d

EXPOSE 80

default.conf referred to in the above Dockerfile:

server {

    listen 80 default_server;
    server_name _;

    location / {
        proxy_pass http://web:8000;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /static/ {
        alias /app/static/;
    }

    location /media/ {
        alias /app/static/;
    }

}

Note: The default.conf and Dockerfile mentioned above is under the same folder, build that image and use it as the Nginx image in the below docker-compose file.

The docker-compose file would look like this:

version: '3.8'

services:
  web:
    image: <django-image-name>
    command: gunicorn --bind 0.0.0.0:8000 licensing_platform.wsgi --workers=4
    volumes:
      - static_volume:/app/static
      - media_volume:/app/media
    expose:
      - "8000"
    networks:
      - django-network

  nginx:
    image: <nginx-image-name>
    restart: always
    volumes:
      - static_volume:/app/static
      - media_volume:/app/media
    ports:
      - "80:80"
    depends_on:
      - web
    networks:
      - django-network

networks:
  django-network:
    name: django-network

volumes:
  media_volume:
  static_volume:

The app/ path referenced depends on the working directory: The django application Dockerfile would start with:

FROM ubuntu:20.04
ADD . /app
WORKDIR /app
EXPOSE 8000

Code reference: https://github.com/addu390/licensing-as-a-platform

The code reference mentioned above is an open-source project I'm working on with no commercial benefits.

serving Django static files with Docker, nginx and gunicorn

2 Answers2

Linked