Static files not loading using nginx and docker

Question:

I’m having approximately the same error as in this question, as concerning Django, all my pages are loaded correctly but not my static files. I guess it has something to do with an error in my configuration files, however even though I’ve been searching for quite some time, I couldn’t find anything to solve my problem.

Here is my Django Dockerfile :

FROM python:3.10.5-alpine

RUN pip install --upgrade pip

RUN wget https://upload.wikimedia.org/wikipedia/commons/b/b9/First-google-logo.gif -O media/media.gif

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

WORKDIR /app

COPY ./entrypoint.sh /
ENTRYPOINT ["sh", "/entrypoint.sh"]

nginx.conf

upstream django {
    server django_gunicorn:8000;
}

server {
    listen 80;
    server_name 127.0.0.1;

    location / {
        proxy_pass http://django;
    }

    location /static/ {
        alias /static/;
    }

    location /media/ {
        alias /media/;
    }
}

nginx Dockerfile

FROM nginx:1.19.0-alpine

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

docker-compose.yml

version: '3.7'

services:
  django_gunicorn:
    volumes:
      - static:/static
      - media:/media
    env_file:
      - env
    build:
      context: .
    ports: 
      - "8000:8000"
  nginx:
    build: ./nginx
    volumes:
      - static:/static
      - media:/media
    ports:
      - "80:80"
    depends_on:
      - django_gunicorn

volumes:
  static:
  media:

And I get errors like that :

testapp-django_gunicorn-1  |
testapp-django_gunicorn-1  | 9771 static files copied to '/app/static'.
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [9] [INFO] Starting gunicorn 20.1.0
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [9] [INFO] Listening at: http://0.0.0.0:8000 (9)
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [9] [INFO] Using worker: sync
testapp-django_gunicorn-1  | [2022-07-21 12:27:36 +0000] [10] [INFO] Booting worker with pid: 10
testapp-nginx-1            | 172.20.0.1 - - [21/Jul/2022:12:30:45 +0000] "GET /scripts/ HTTP/1.1" 200 17460 "http://127.0.0.1/scripts/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-"
testapp-nginx-1            | 172.20.0.1 - - [21/Jul/2022:12:30:45 +0000] "GET /static/scripts/bootstrap/css/bootstrap.css HTTP/1.1" 404 555 "http://127.0.0.1/scripts/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-"
testapp-nginx-1            | 2022/07/21 12:30:45 [error] 30#30: *1 open() "/static/scripts/bootstrap/css/bootstrap.css" failed (2: No such file or directory), client: 172.20.0.1, server: 127.0.0.1, request: "GET /static/scripts/bootstrap/css/bootstrap.css HTTP/1.1", host: "127.0.0.1", referrer: "http://127.0.0.1/scripts/"

EDIT : entrypoint.sh

#!/bin/sh

python manage.py migrate
python manage.py collectstatic

gunicorn main.wsgi:application --bind 0.0.0.0:8000
Asked By: Balizok

||

Answers:

Your nginx container is looking for static in /static/ but the logs show you’re collecting static in /app/static/ in the gunicorn container. In docker-compose, did you try - static:/app/static on the gunicorn side and - static:/static on the nginx side?

Answered By: Tim Tisdall