Django, Apache 2 et les fichiers statiques

Vue

Au lieu de retourner une réponse HTTP, la vue index affiche un template au format HTML. On modifie le fichier helloworld/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'helloworld/index.html')

Templates

Conformément aux préconisations de la documentation Django, on crée un dossier helloworld/templates/helloworld afin de recevoir les templates de l'application helloworld.

mkdir -p helloworld/templates/helloworld

Afin de faire les choses dans les règles de l'Art, on utilise le début le langage de template de Django, et plus particulièrement l'héritage de template.

On crée un template de base dans le fichier helloworld/templates/helloworld/base.html. On notera l'inclusion de la feuille de style screen.css (ligne 5).

<!DOCTYPE html>
<html lang="fr">
<head>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'helloworld/screen.css' %}" />
    <title>{% block title %}Hello world!{% endblock %}</title>
</head>

<body>
    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

Puis on crée un autre template héritant du template de base dans le fichier helloworld/templates/helloworld/index.html.

{% extends "helloworld/base.html" %}

{% block title %}Hello world - Index{% endblock %}

{% block content %}
<p>
    Hello world!
</p>
{% endblock %}

Fichiers statiques

Le fichier statique le plus courant est sans doute la feuille de style CSS. On propose donc d'en créer une qui se contentera de colorer les textes des paragraphes en rouge.

Conformément aux préconisations de la documentation Django, on crée un dossier helloworld/static/helloworld afin de recevoir les fichiers statiques de l'application helloworld.

mkdir -p helloworld/static/helloworld

On crée une feuille de style dans le fichier helloworld/static/helloworld/screen.css.

p {
    color: red;
}

À la racine du projet, on crée un dossier static dans lequel les fichier statiques des différentes applications seront collectés.

mkdir static

Serveur virtuel

Les opérations sur le serveur virtuel nécessitent les droits d'administration.

On modifie le fichier /etc/apache2/sites-available/idreammicro afin de servir le dossier static.

Alias /static/ /home/jlesech/www-django/idreammicro/static/
<Location "/static/">
    Options -Indexes
</Location>

On recharge le serveur virtuel.

service apache2 reload

Collecte des fichiers statiques

On modifie le fichier idreammicro/settings.py afin d'indiquer le dossier dans lequel les fichiers statiques seront collectés.

Afin de rendre le projet le plus maintenable possible, on définit une variable PROJECT_ROOT indiquant le dossier racine (ligne 4).

# Django settings for idreammicro project.

import os
PROJECT_ROOT = os.path.dirname(__file__) + '/..'

Puis on renseigne la variable STATIC_ROOT (ligne 67), relativement à la racine.

# 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: "/var/www/example.com/static/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')

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

On lance la collecte des fichiers statiques. Plutôt que de les copier, on ordonne la création de liens symboliques avec l'option --link.

python manage.py collectstatic --link

Après la collecte, on doit retrouver des liens vers les fichiers statiques dans le dossier static. Ceux-ci sont organisés de la même manière que dans l'application helloworld.

idreammicro
|_ helloworld
|    |_ static
|    |    |_ helloworld
|    |        |_ screen.css
|    |_ templates
|    |    |_ helloworld
|    |        |_ base.html
|    |        |_ index.html
|    |_ __init__.py
|    |_ models.py
|    |_ tests.py
|    |_ views.py
|_ idreammicro
|    |_ __init.py__
|    |_ settings.py
|    |_ urls.py
|    |_ wsgi.py
|_ static
|    |_ helloworld
|        |_ screen.css
|_ manage.py

Conclusion

Nous y sommes, il est temps de vérifier que ce célèbre Hello world! s'affiche désormais en rouge ! On saisit l'adresse http://django/helloworld dans un navigateur et...

... Hello world! est bien coloré en rouge !

iDreamMicro