CODEWITHSUNDEEP
cssdjangonginxweb-deployment
DominikN
DominikN

Reputation: 15

Nginx does not load css files (Django)

I made a new project in Django. On my local Computer everything is working just fine, so i tried to make it public. I used DigitalOcean as the host. I found 2 Tutorials to publish a Django Project on a DigitalOcean VPS. One is for Security and one is for publishing.

Django security Tutorial: Link

Django project publishing: Link

After i followed the Tutorials everything worked fine except one thing. All files (Images, JS) are loaded correctly except the static css files, which is really strange. I think it is an Nginx problem. I am new to Nginx, so i don't know what to do. I tried a few Stackoverflow Questions and searched for this problem a lot, but I can't figure out what to do. The css files are located in a subfolder of a folder called static. Image of the static files structure

static files settings.py:

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

Nginx:

server {
    listen 80;
    server_name 142.93.100.9;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
       root /home/djangodeploy/bhitweb2;
    }

    location /media/  {
       root /home/djangodeploy/bhitweb2;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/djangodeploy/bhitweb2/bhitweb2.sock;
    }
}

CSS file URL: 142.93.100.9/static/css/form.css

CSS error:

<html>
<head><title>404 Not Found</title></head>
<body bgcolor="white">
<center><h1>404 Not Found</h1></center>
<hr><center>nginx/1.10.3 (Ubuntu)</center>
</body>
</html>

HTML template link to stylesheets:

{% load static %}
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/main.css' %}/" />

Does anyone know a solution?

Upvotes: 0

Views: 3739

Answers (2)

TonyEight
TonyEight

Reputation: 416

I suspect you have another server running (maybe the default nginx virtual host). As you set listen 80; I guess both virtual hosts definitions point to port 80.

Your app HTTP requests (especially thoses for your static files) end up being handle by this default virtual host. This default virtual host for nginx has its ROOT_DIRECTORY set to /usr/share/nginx/html/.

This is why you have this kind of errors :

2018/08/10 14:51:41 [error] 27178#27178: *3 open() "/usr/share/nginx/html/static/css/form.css" failed (2: No such file or directory), client: 212.95.7.8, server: 142.93.100.9, request: "GET /static/css/form.css HTTP/1.1"

Solution 1

You just have to disable this default virtual host. Look for all enabled sites in /etc/nginx/sites-enabled/.

sudo rm /etc/nginx/sites-enabled/default
sudo service nginx restart

Solution 2

Add a servername directive (with the FQDN you want to use for your Django project) so nginx can seperate your app HTTP requests from those that should really go to the default virtual host.

Upvotes: 0

TonyEight
TonyEight

Reputation: 416

When I look at your static files structure, it looks empty. So, going back to your static definition in settings.py, I see STATICFILES_DIR = '/home/djangodeploy/bhitweb2/static'.

From what I know, the correct setting name is STATICFILES_DIRS, which is not a string but an iterable like so :

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    '/var/www/static/',
]

You can find it in the docs here and here.

I guess when you call python manage.py collectstatic, static admin files are the only one fetched.

The way you set things up seems to mixup STATIC_ROOT (which is where collectstatic stores your static files and which is the path you should serve via Nginx) with STATICFILES_DIRS (which is where collectstatic is supposed to fetch your additional - as mentioned in the docs - static files from).

You should try to put your coded static files in a static folder inside your app folder. Then, get rid of the STATICFILES_DIRS declaration and let Django find your static files automatically (Django does it through STATICFILES_FINDER - see the docs) when you call collectstatic.

UPDATE

Something is off with your Nginx conf. Both location /static/ and /media/ point to the same directory.

Try to also change it like this :

location /static/ {
   alias /home/djangodeploy/bhitweb2/static;
}

location /media/  {
   alias /home/djangodeploy/bhitweb2/media;
}

Then restart Nginx. Run collecstatic again.

Upvotes: 0

Related Questions