Django admin panel won't render CSS

Question

I have followed multiple guides and read many other answers about this problem (example: here , here , here , here , here , etc. ), but none of them help.

Using nginx 1.15.5, Django 2.2.1, gunicorn 19.9.0, Python 3.6

Right now, my Django admin panel looks like this:

---

nginx.conf

---

error_log logs/error.log warn;

events { }
http {
    access_log logs/access.log combined;
    include default-site.conf;
    include myapp.conf;
}

---

myapp.conf

---

server {
# http://nginx.org/en/docs/http/ngx_http_log_module.html#access_log
access_log logs/myapp/access.log combined;

server_name  myserver.com;
listen       1234;

# ignore favion messages
location = /favicon.ico { access_log off; log_not_found off; }

# path to socket for gunicorn
location / {
        proxy_pass http://unix:/usr/local/bin/apps/myapp/myapp.sock;
}

# location for static files to serve; mostly the admin panel CSS files
location /static/ {
        root /usr/local/bin/apps/myapp/;
}

}

---

Gunicorn daemon start command (inside the myapp project directory):

gunicorn webapp.wsgi \
--bind "unix:/usr/local/bin/apps/myapp/myapp.sock" \
--config "../server-conf/myserver.com/myapp/gunicorn_config.py" \
--pid "logs/gunicorn.pid" \
--access-logfile "logs/gunicorn.access.log" \
--error-logfile "logs/gunicorn.error.log" \
--log-file "logs/gunicorn.log" \
--name "gunicorn-myapp" \
--daemon

Django settings.py

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

I already ran python manage.py collectstatic . The files are there, and have global read permissions:

$ ll /usr/local/bin/apps/myapp/static/
total 12K
drwxrwsr-x.  3 myusername myusergroup 4.0K Mar 21 14:57 .
drwxrwsr-x. 10 myusername myusergroup 4.0K Mar 21 17:06 ..
drwxrwsr-x.  6 myusername myusergroup 4.0K Mar 21 14:57 admin

$ ll /usr/local/bin/apps/myapp/static/admin/
total 24K
drwxrwsr-x. 6 myusername myusergroup 4.0K Mar 21 14:57 .
drwxrwsr-x. 3 myusername myusergroup 4.0K Mar 21 14:57 ..
drwxrwsr-x. 3 myusername myusergroup 4.0K Mar 21 14:57 css
drwxrwsr-x. 2 myusername myusergroup 4.0K Mar 21 14:57 fonts
drwxrwsr-x. 3 myusername myusergroup 4.0K Mar 21 14:57 img
drwxrwsr-x. 4 myusername myusergroup 4.0K Mar 21 14:57 js

And the most confusing part, the CSS files are being severed successfully by nginx. I can see their contents in my browser when I navigate to myserver.com:1234/static/admin/css/base.css :

In my nginx log, I am seeing messages like this when I try to access the admin page:

100.100.100.100 - - [21/Mar/2019:18:32:50 -0400] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 1819 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"

when I access the CSS file directly:

100.100.100.100 - - [21/Mar/2019:18:32:52 -0400] "GET /static/admin/css/base.css HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36"

I'm not sure why it is giving a 304 status code, but there are no errors. I'm able to access the static Admin CSS file, so it appears that the file is being served correctly (?). Every other part of the app is working except this. Do you have any idea what is going on? Why are the CSS files not rendering in the page correctly?

Answer 1

Turns out I needed to include the /etc/nginx/mime.types file in my nginx conf;

error_log logs/error.log warn;

events { }
http {
    access_log logs/access.log combined;
    include myapp.conf;
    include mime.types;
}

I guess this happened because I started with a blank nginx.conf in a non-standard directory location.

After adding this line to my conf, and restarting the server a few times, now the .css files are rendered correctly.

For reference, it helped a lot to open the Network tab of the Chrome Developer Tools and look at the entries on the page for the css files, previously they were coming in as "Content-Type: text/plain", now they are arriving as "Content-Type: text/css", as they should.

Additionally, I tried to disable cache'ing completely under the config for my app ( myapp.conf ) with this:

location /static/ {
        expires -1;
        root /usr/local/bin/apps/myapp/;
    }

This seemed to help turn the HTTP codes in the browser from 304 into 200.