Django static files with nginx and unicorn

Question

I'm trying to deploy my django application to my VPS. So I followed several tutorials and the only issue i'm having is that I can't get my static files to show up. So below you can find the structure of my files on the VPS.

• Virtual Env: /opt/myapps/
• Django project: /opt/myapps/uniprogress/
• Static Files: /opt/myapps/uniprogress/static/

Nginx config: /etc/nginx/sites-available/uniprogress

server {
    server_name 188.xxx.xxx.93;

    access_log off;

    location /static/ {
        alias /opt/myapps/uniprogress/static/;
    }

    location / {
        proxy_pass http://127.0.0.1:8001;
        proxy_set_header X-Forwarded-Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';
    }
}

and finally in my django settings.py:

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

# Template Dirs

TEMPLATE_DIRS = (
    os.path.join(SETTINGS_PATH, 'templates'),
)

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATIC_ROOT = '/opt/myapps/uniprogress/static/'
STATIC_URL = '/static/'

I also used: python manage.py collectstatic but still my static files won't show up.

UPDATE The tutorial I used can be found at Digital Ocean.

I double checked that the files exist on the server.

Also I can access static files like: http://188.xxx.xxx.93/static/css/bootstrap.css.

BUT In my source code http://188.xxx.xxx.93:8001/, it links static files using the port.

That means: <link href="/static/css/bootstrap.css" rel="stylesheet">

So it tries to find bootstrap.css at http://188.xxx.xxx.93:8001/static/bootstrap.css and the file doesn't exist(have to remove the post to make it work).

Answer 1

To serve static files do it in nginx level like

server {
server_name 188.xxx.xxx.93;

access_log off;

location ~ ^/(static)/  {
  #  root:- you static files path
  #  alias /opt/myapps/uniprogress/static/;
     root /opt/myapps/uniprogress/static/;
}

location / {
    proxy_pass http://127.0.0.1:8001;
    proxy_set_header X-Forwarded-Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    add_header P3P 'CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV"';
}
}

Now all static files will serve from your nginx.

Answer 2

Your STATIC_ROOT is collecting static files at:

/opt/myapps/uniprogress/opt/myapps/uniprogress/static/

That doesn't match your server configuration, which points at:

opt/myapps/uniprogress/static/

STATIC_ROOT is just a folder that holds all your static files (images, css, everything) in one place for deployment, so set it to something like '/collected_static/' and fix the server configuration.

Answer 3

Check this things

1 Whether the static older is accessible by nginx, I mean the folder permission .

2 Or do this

Replace this:

STATIC_ROOT = '/opt/myapps/uniprogress/static/'

with this

STATIC_ROOT = ''

And add this in settings

STATICFILES_DIRS = (
     '/opt/myapps/uniprogress/static/',
)

Hope this works.