Nginx – django : Serving static files through nginx

djangonginx

I'm using apache+mod_wsgi for django.
And all css/js/images are served through nginx.
For some odd, reason when others/friends/colleagues try accessing the site, jquery/css is not getting loaded for them, hence the page looks jumbled up.

My html files use code like this –

<link rel="stylesheet" type="text/css" href="http://x.x.x.x:8000/css/custom.css"/>
<script type="text/javascript" src="http://1x.x.x.x:8000/js/custom.js"></script>

My nginx configuration in sites-available is like this –

server {   
     listen   8000;   
     server_name  localhost;

     access_log  /var/log/nginx/aa8000.access.log;    
     error_log  /var/log/nginx/aa8000.error.log;    

       location / {   
           index  index.html index.htm;    
       }    

     location /static/ {    
        autoindex on;    
        root   /opt/aa/webroot/;    
     }    
 }

There is a directory /opt/aa/webroot/static/ which have corresponding css & js directories.

The odd thing is that the pages show fine when I access them.
I have cleared my cache/etc, but the page loads fine for me, from various browsers.

Also, I don't see any 404 any error in the nginx log files. Actually the logs for nginx are not getting refreshed at all.
I restarted the nginx server using root, is that incorrect ? There is a user www-data defined in the nginx configuration file.

Any pointers would be great.

Best Answer

First of all, when using django it's better if you serve your css/js using the MEDIA_URL as defined in the settings.py.

Now, let's say that you have a MEDIA_URL='/site_media/' and in your templates you have src={{MEDIA_URL}}js/foo.js or href={{MEDIA_URL}}css/bar.css.

In your nginx configuration you need an appropriate entry for the MEDIA_URL. Something like:

server {
     ...

     location /site_media/ {    
        autoindex on;    
        root   /opt/aa/webroot/;    
     }    
 }

This should take care of the problem. Just to check you could add /static/ to the href/src of the included js/css files and see what happens.

Related Topic