How exactly do I server static files with nginx and gunicorn for a Django app?

Question

Right now, I'm trying to follow this tutorial:

http://honza.ca/2011/05/deploying-django-with-nginx-and-gunicorn

The template site loads correctly, but the images don't load. Here is part of my config.py file for my application:

# Absolute filesystem path to the directory that will hold user-uploaded files.
# Example: "/home/media/media.lawrence.com/media/"
MEDIA_ROOT = ''

# URL that handles the media served from MEDIA_ROOT. Make sure to use a
# trailing slash.
# Examples: "http://media.lawrence.com/media/", "http://example.com/media/"
MEDIA_URL = ''

# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = '/home/lilo/textImageSite/imageSite/static/' 

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/' 

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
)

My nginx config file (located at /etc/nginx/sites-enabled):

server {
listen 80;
server_name xxx.xx.xx.xx; #the actual IP of the server; it has a public IP address

access_log /home/lilo/textImageSite/access.log;
error_log /home/lilo/textImageSite/error.log;

location /static {
    root /home/lilo/textImageSite/imageSite;
}

location / {
    proxy_pass http://127.0.0.1:8888;
}
}

My gunicorn_conf file:

bind = "0.0.0.0:8888"
logfile = "/home/lilo/textImageSite/gunicorn.log"
workers = 3

And right now in my template, this is how I'm accessing the image:

<img src="{{STATIC_URL}}{{ choice.image_location}}" /> <br />

Here is what the generated HTML looks like:

<img src="/static/street_sign2.jpg" /> <br />

Sorry for the wall of text, but I can't figure out what's wrong with my setup...

Aimless

Oh yeah, I'm trying to get this app on xxx.xx.xxx.xx:8888/imageSite (ip address hidden for confidentiality :D). The only problem right now is that the app can't find the static image file on the server so it just shows a broken picture – Aimless

Static files won't be served as long as DEBUG=False #5837174 – Capable

Answer 1

Turns out I fixed my own problem... misunderstood how Nginx worked. :D

server {
listen 1234; //port that Nginx listens on
server_name xxx.xx.xx.xx; #the actual IP of the server; it has a public IP address

access_log /home/lilo/textImageSite/access.log;
error_log /home/lilo/textImageSite/error.log;

location /static {
    root /home/lilo/textImageSite/imageSite;
}

location / {
    proxy_pass http://127.0.0.1:8888; //the port that Gunicorn uses 
}
}

So in my case, if I have my Gunicorn instance running on port 8888, then going to xxx.xxx.xx.x:8888/textImageSite would load the page, but without any static content. If I access it using xxx.xxx.xx.x:1234, then the page will load the static content (images, css style sheets etc). It's my first time using Gunicorn and Nginx (and first time writing a Django app too) so hopefully this will help someone who's confused :)

Aimless

This helped me understand nginx. Thanks! After messing around with apache2+mod_wsgi, nginx+gunicorn is so much easier to configure. – Gesualdo

Thanks. My problem was in / symbol behind the address. – Estimable

It also helped my but I had to look in Django error logs to fix an issue with my path. my configuration included /static/ as part of the path so I got double /static/static/ in logs. – Arborization

Answer 2

#make the following changes

#settings.py

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

#etc/nginx/sites-enabled

server {
    listen 80;
    server_name xxx.xx.xx.xx;
    access_log /home/lilo/textImageSite/access.log;
    error_log /home/lilo/textImageSite/error.log;

location /static {
    root /home/lilo/textImageSite/imageSite;
}

location / {
    proxy_pass http://127.0.0.1:8888;
}
}

#/etc/nginx/nginx.conf

user your_user_name;

Thenceforward