Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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...

like image 780
Raymond Avatar asked Jul 11 '12 04:07

Raymond


1 Answers

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 :)

like image 175
Raymond Avatar answered Sep 17 '22 09:09

Raymond