Serving static files with Nginx + Gunicorn + Django

Question

This is my nginx config:

    server {
        listen 80;
        server_name localhost;

        keepalive_timeout 5;

        access_log /home/tunde/django-projects/mumu/nginx/access.log;
        error_log /home/tunde/django-projects/mumu/nginx/error.log;

        root /home/tunde/django-projects/mumu;

        location / {
            try_files $uri @proxy_to_app;
        }

        location @proxy_to_app {
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            proxy_pass http://127.0.0.1:8000;
        }
    }

My settings.py looks like:

    import os
    settings_dir = os.path.dirname(__file__)
    PROJECT_ROOT = os.path.abspath(os.path.dirname(settings_dir))

    STATIC_ROOT = '/home/tunde/django-projects/mumu/STATIC/'
    STATIC_URL = '/static/'

    STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static/'),
    )

My supervisord.conf file looks like:

[program: mumu]
command = /home/tunde/ENV1/bin/gunicorn -w 1 --bind=127.0.0.1:8000 mumu.wsgi:application
directory = /home/tunde/django-projects/mumu/
stdout_logfile= /home/tunde/django-projects/mumu/supervisor/logfile.log
stderr_logfile= /home/tunde/django-projects/mumu/supervisor/error.log
user = tunde

The problem is that static files don't get served and I have no idea what I'm doing wrong. A url like /static/css/styles.css returns a 404. Help will be greatly appreciated.

Answer 1

You need to create an nginx location block that matches the location of your django STATIC_URL. As you have it configured, nginx is also forwarding requests for static assets to your django application. I'm guessing you are seeing the 404 errors in your django application log? You want nginx to handle these requests, not django.

location /static {
    alias /home/tunde/django-projects/mumu/STATIC/; 
}

Be sure to run the django admin command collectstatic to make sure all the static assets get copied to the STATIC_ROOT directory.

Answer 2

location / {
    try_files $uri @proxy_to_app;
}

Please change $uri -> $request_uri

location / {
    try_files $request_uri @proxy_to_app;
}