Hey all, I am at a loss – I’ve gone through all the posts related to my problem, but I still cannot get my static css and js files to format my content in my Django site when running via docker and nginx.
Here are some relevant configurations from my settings.py file:
DEBUG = True
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'web.apps.WebConfig',
'django_recaptcha'
]
WSGI_APPLICATION = 'portfolio.wsgi.application'
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Here is my Dockerfile:
FROM python:3.11-slim
WORKDIR opt/django/
COPY pyproject.toml .
RUN python -m pip install . -I --no-cache-dir
COPY ./portfolio/ ./portfolio/
WORKDIR portfolio/
RUN python manage.py collectstatic --noinput
RUN python manage.py makemigrations
RUN python manage.py migrate
EXPOSE 8000
CMD ["gunicorn", "portfolio.wsgi:application", "--bind", "0.0.0.0:8000"]
Here is my docker-compose.yml:
#version: '3.8'
services:
web:
build:
context: .
dockerfile: ./docker/Dockerfile_django
container_name: webserver
volumes:
- static_data:/opt/django/portfolio/static
expose:
- "8000"
ports:
- "8000:8000"
depends_on:
- db
db:
image: postgres:15
container_name: db_postgres
expose:
- "5432"
ports:
- "5432:5432"
volumes:
- postgres_data:/var/lib/postgresql/data
environment:
POSTGRES_DB: postgres
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
nginx:
image: nginx:latest
container_name: nginx
ports:
- "80:80"
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
- static_data:/opt/django/portfolio/static
depends_on:
- web
volumes:
postgres_data:
static_data:
And finally, here is my nginx.conf:
http {
server {
listen 80;
server_name localhost;
location /static {
alias /opt/django/portfolio/static;
autoindex on;
access_log /var/log/nginx/static_access.log;
error_log /var/log/nginx/static_error.log debug;
}
# skip favicon.ico
location /favicon.ico {
access_log off;
return 204;
}
location / {
proxy_pass http://web:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
error_log /var/log/nginx/error.log debug;
}
}
I see no errors in my logs, and nginx is reporting 200’s when I make a GET to a url in the project. When I visit http://127.0.0.1/static/website/style.css I can see the css. I’ve cleared my cache. When I go to /opt/django/portfolio/collectstatic in my web and nginx containers, I can see the static files. I have also tried updating permissions on the static files by running: chmod -R 755 /opt/django/portfolio/static/website/style.css in both the nginx and web containers.
My project is structured like this:
- portfolio/
- nginx/
- nginx.conf
- portfolio/
- portfolio/
- settings.py
- ...
- web/
- js/
- somejs.js
- someotherjs.js
- website/
- style.css
- admin.py
- apps.py
- forms.py
- models.py
- tests.py
- ...
What am I missing? Below is a snippet of the logs from my nginx container. Is the timeout indicative of anything?
nginx | /docker-entrypoint.sh: Configuration complete; ready for start up
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:51:06 +0000] "GET / HTTP/1.1" 200 2458 "http://0.0.0.0/tictactoe/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:51:08 +0000] "GET /about HTTP/1.1" 200 2304 "http://0.0.0.0/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:51:39 +0000] "GET /about HTTP/1.1" 200 2304 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:52:04 +0000] "GET /tictactoe/ HTTP/1.1" 200 5181 "http://127.0.0.1/about" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:52:05 +0000] "GET /tictactoe/?difficulty=All HTTP/1.1" 200 155 "http://127.0.0.1/tictactoe/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
nginx | 2024/08/18 16:52:06 [info] 29#29: *1 client timed out (110: Connection timed out) while waiting for request, client: 192.xxx.xx.x, server: 0.0.0.0:80
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:52:39 +0000] "GET /about HTTP/1.1" 200 2304 "http://127.0.0.1/tictactoe/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:52:55 +0000] "GET /about HTTP/1.1" 200 2304 "http://127.0.0.1/tictactoe/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
nginx | 192.xxx.xx.x - - [18/Aug/2024:16:53:05 +0000] "GET / HTTP/1.1" 200 2458 "http://127.0.0.1/about" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36"
