Cannot locate static files after deploying with docker

Using Django
1

Hi,
I am working on a project and trying to deploy it with docker. I am using [nginx-proxy](https://github.com/nginx-proxy) image and follow a tutorial, however couldnt figure out how to config the static files routing. It would be really appreciated if someone could give me some advice.

settings

Static files are in /usr/src/app/static folder, already run collectstatic.
static root and url:

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

dockerfile:

FROM python:3.8.6-slim-buster

RUN apt-get update && \
    apt-get upgrade -y && \
    apt-get install -y netcat-openbsd gcc && \
    apt-get clean

ENV PYTHONUNBUFFERED=1

WORKDIR /usr/src/app

RUN addgroup --system admin && adduser --system --no-create-home --group admin && \
    chown -R admin:admin /usr && chmod -R 755 /usr

COPY ./requirements.txt /usr/src/app/requirements.txt
RUN pip install --upgrade pip \
    pip install -r requirements.txt

USER admin

COPY . /usr/src/app

docker-compose.prod:

version: "3.8"

services:
  django:
    restart: always
    build:
      context: .
      dockerfile: ./dockerfile
    container_name: django
    command: gunicorn --workers=2 --bind=0.0.0.0:8000 --env DJANGO_SETTINGS_MODULE=core.settings.prod core.wsgi:application
    volumes:
      - .:/usr/src/app
      - static_volume:/usr/src/app/static
      - media_volume:/usr/src/app/media
      # - ./nginx/certs/:/etc/certs
    ports:
      - "8000:8000"
    env_file:
      - ./core/env/env.prod
    depends_on:
      - redis
  celery:
    restart: always
    build:
      context: .
      dockerfile: ./dockerfile
    container_name: celery
    entrypoint: /bin/sh
    command: ./docker.celery.sh
    volumes:
      - .:/usr/src/app
      - static_volume:/usr/src/app/static
      - media_volume:/usr/src/app/media
    env_file:
      - ./core/env/env.prod
    depends_on:
      - django
      - redis
  redis:
    restart: always
    image: redis:alpine
    container_name: redis
    volumes:
      - redisdata:/data
  nginx-proxy:
    container_name: nginx-proxy
    build: ./nginx
    restart: always
    ports:
      - 443:443
      - 80:80
    volumes:
      - static_volume:/usr/src/app/static
      - media_volume:/usr/src/app/media
      - certs:/etc/nginx/certs
      - html:/usr/share/nginx/html
      - vhost:/etc/nginx/vhost.d
      - /var/run/docker.sock:/tmp/docker.sock:ro
    depends_on:
      - django
  nginx-proxy-letsencrypt:
    image: jrcs/letsencrypt-nginx-proxy-companion
    env_file:
      - ./core/env/env.prod.proxy-companion
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - certs:/etc/nginx/certs
      - html:/usr/share/nginx/html
      - vhost:/etc/nginx/vhost.d
    depends_on:
      - nginx-proxy
volumes:
  redisdata:
  static_volume:
  media_volume:
  certs:
  html:
  vhost:

nginx dockerfile:

FROM jwilder/nginx-proxy
COPY vhost.d/default /etc/nginx/vhost.d/default
COPY custom.conf /etc/nginx/conf.d/custom.conf

nginx/vhost.d/default

location /static/ {
  alias /usr/src/app/static/;
  add_header Access-Control-Allow-Origin *;
}

file tree:

.
├── LICENSE
├── README.md
├── apps
├── core
│   ├── __init__.py
│   ├── __pycache__
│   ├── asgi.py
│   ├── celery.py
│   ├── env
│   ├── settings
│   ├── urls.py
│   └── wsgi.py
├── docker-compose.prod.yml
├── docker-compose.staging.yml
├── docker-compose.yml
├── docker.celery.sh
├── docker.django.sh
├── dockerfile
├── dockerfile.prod
├── irecommerce.code-workspace
├── manage.py
├── media
├── nginx
│   ├── certs
│   ├── custom.conf
│   ├── default.conf
│   ├── dockerfile
│   └── vhost.d
├── requirements.txt
├── static
└── templates

Issue

The static files are not working properly. Both django and nginx-proxy containters return this 404 message.

django                     | Not Found: /static/js/front.js
nginx-proxy                | nginx.1    | domain.xyz x.8x2.2x2.66 - - [28/Dec/2020:14:26:26 +0000] "GET /static/js/front.js HTTP/2.0" 404 10638 "https://domain.xyz/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"

As my understanding, the static file’s routing config was created by nginx-proxy automatically, thus we didnt create any default.conf file to nginx-proxy, but only the setting in vhost.d as the router for static files?

As mentioned, VIRTUAL_HOST (and VIRTUAL_PORT) are needed by nginx-proxy to auto create the reverse proxy configuration.
Requests that match any of these patterns will be served from static or media folders. They won’t be proxied to other containers. The web and nginx-proxy containers share the volumes in which the static and media files are located:

location /staticfiles/ {
  alias /home/app/web/staticfiles/;
  add_header Access-Control-Allow-Origin *;
}
2

I don’t know docker anywhere near well enough to just look at this and see any errors that might exist. I’ve got a funny feeling that your volumes aren’t being created the way you think they are, but that’s really just a WAG.

Something you can try to help diagnose this issue is to connect to your nginx-proxy instance (using something like docker exec -it nginx-proxy /bin/sh) and verify that the static files are where they’re supposed to be, or even just to verify that they can be seen at all from within the container.

You could then copy a file to the static directory in the container (eg: docker cp /some/test/file.html nginx-proxy:/usr/src/app/static) and verify that nginx will serve the file appropriately.

Note: Since you’re connecting to gunicorn through an IP socket and not a Unix socket, you really don’t need to make nginx dependent upon your Django app. From what I can see here, you could pretty much run just the nginx container to verify / validate your configuration.

3

Hi Ken,
Thank you for your kind advice, it really helped me to figure this out…
I tried to access the files in my nginx-proxy container, and it shows that the static files are under the static volume directory /usr/src/app/static.
My html templates are all working well but those static files were not.

And your advice reminds me that I should check all the nginx-proxy container more carefully, then we I look into the vhost settings, somehow the file inside nginx-proxy is routing to /staticfiles/ instead of /static/, whereas it was /static/ in my configuration…
So I change to the right route and restart the container, everything works fine now…
Really appreciate your help :smiling_face_with_three_hearts:, this simple issue troubles me 2 days…