Django: can't load static files from template using Ubuntu 14.04/Django Droplet

May 20, 2015 7.1k views
Django Nginx Ubuntu

Hello everyone,
I'm trying to render a template page with my Django project running on a Ubuntu 14.04 Droplet, but I'm having a lot of issues loading static files from the template.

My project structure:

djangoapptoscana/
    manage.py
    djangoapptoscana/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    dashboard/
        __init__.py
       views.py
       templates/
          index.hml
    static/
          css/
          js/
          ...

Here it is my nginx configuration file:

/etc/nginx/sites-available/django
upstream app_server {
    server 127.0.0.1:9000 fail_timeout=0;
}

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html;
    index index.html index.htm;

    client_max_body_size 4G;
    server_name _;

    keepalive_timeout 5;

    # Your Django project's media files - amend as required
    location /media  {
        alias /home/workspace/app-toscana/django/djangoapptoscana/djangoapptoscana/media;
    }

    # your Django project's static files - amend as required
    location /static {
        #alias /home/workspace/app-toscana/django/djangoapptoscana/djangoapptoscana/static;
        alias /home/workspace/app-toscana/django/djangoapptoscana/static;
    }

    # Proxy the static assests for the Django Admin panel
    location /static/admin {
       alias /usr/lib/python2.7/dist-packages/django/contrib/admin/static/admin/;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://app_server;
    }
}

The settings file:

/home/workspace/app-toscana/django/djangoapptoscana/djangoapptoscana

"""
Django settings for djangoapptoscana project.

For more information on this file, see
https://docs.djangoproject.com/en/1.6/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.6/ref/settings/
"""

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


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '0^rkr0-u%ic)yo^qc()vp8ii&mn&irk+ie_o=swp7qd82ervyh'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = False

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dashboard',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

ROOT_URLCONF = 'djangoapptoscana.urls'

WSGI_APPLICATION = 'djangoapptoscana.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'test',
        'USER': 'test',
        'PASSWORD': 'test',
        'HOST': 'localhost',
        'PORT': '',
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


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

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder'
)

#STATIC_PATH = os.path.join(BASE_DIR, 'static')

STATIC_ROOT = '/home/workspace/app-toscana/django/djangoapptoscana/static/'

STATIC_URL = '/static/' # You may find this is already defined as such.

#STATICFILES_DIRS = (
#    STATIC_PATH,
#)

Template page:

/home/workspace/app-toscana/django/djangoapptoscana/dashboard/templates/index.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.4 -->
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="{% static 'plugins/jvectormap/jquery-jvectormap-1.2.2.css' %}" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="{% static 'dist/css/AdminLTE.css' %}" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="{% static 'dist/css/skins/_all-skins.min.css' %}" rel="stylesheet" type="text/css" />

    <link href="{% static 'dist/css/ol.css' %}" rel="stylesheet" type="text/css" />
    <script src="{% static 'dist/js/ol.js' %}"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
        <div>Hello world!</div>
  </body>
</html>

When I try to get some static file, I receive a 404 error.
Any suggestion? I tried different configuration without any results.
Thanks!

1 comment
4 Answers

Hopefully, I found a solution to this problem. It was a permission issue. On my DigitalOcean machine I set the owner of the django app directory to root:root

chown -R root:root /home/django/djangoapptoscana/dashboard

and the owner of the static files directory to django:django

chown -R django:django /home/django/djangoapptoscana/djangoapptoscana/static

This was the solution to my problem too, Thanks for updating!

I tried it but still go the same error. I am using v 1.11. Anyone knows some issue with this?

Have another answer? Share your knowledge.