Gestion des fichiers statiques dans Django : Un guide complet

Dans ce tutoriel, nous examinerons ce que sont les fichiers statiques dans Django, les avantages de les gérer efficacement, leur rôle dans les applications web, et nous configurerons un projet de démonstration pour illustrer comment gérer et servir les fichiers statiques en utilisant différentes méthodes et outils.

Django est un cadre de développement web en Python de haut niveau qui fournit aux développeurs web un outil puissant pour créer des applications web rapidement et efficacement.

Bien que Django soit idéal pour créer des applications web rapidement et efficacement, il est tout aussi important de s’occuper de l’aspect et de la sensation des applications web que vous développez. Pour ce faire, vous devez apprendre à gérer les ressources qui soutiennent et fournissent l’aspect et la sensation de vos applications.

Fichiers statiques dans Django

Dans Django, les fichiers statiques sont ceux qui sont servis directement au client sans aucun traitement par le serveur.

Ces fichiers comprennent généralement des feuilles de style CSS, des fichiers JavaScript, des images, des icônes, des polices et d’autres ressources nécessaires pour l’aspect et la sensation de votre application web.

Django fournit des mécanismes pour gérer et servir efficacement ces fichiers statiques, garantissant une expérience utilisateur fluide.

Gérer efficacement les fichiers statiques

Pour s’assurer que les utilisateurs de votre application web bénéficient d’une bonne expérience utilisateur et que l’application fonctionne comme prévu, vous devez gérer efficacement les fichiers statiques.

Une organisation et un cache appropriés des fichiers statiques garantiront des temps de chargement de page rapides et une réactivité améliorée, augmentant la satisfaction globale de l’utilisateur.

Django offre divers outils et conventions pour faciliter la gestion des fichiers statiques.

Le rôle des fichiers statiques dans les applications web

Les fichiers statiques sont très importants, car ils définissent l’aspect et la sensation d’une application web. Ils déterminent comment les composants d’une application sont stylisés, leur comportement en réponse aux interactions de l’utilisateur, et finalement ce que voit un utilisateur lorsqu’il visite une application web spécifique.

Lorsque vous servez les fichiers statiques efficacement, vous serez en mesure de créer une interface utilisateur visuellement attrayante et réactive, rendant l’application plus engageante et conviviale.

Configuration d’un projet de démonstration

Pour illustrer les concepts de gestion des fichiers statiques dans Django, nous allons mettre en place un projet de démonstration à partir de zéro.

Ce projet inclura la création d’un projet Django, la configuration des paramètres des fichiers statiques et l’intégration des fichiers statiques dans une simple application web.

En suivant le projet de démonstration, vous acquerrez une expérience pratique de la gestion des fichiers statiques dans Django et comprendrez leur importance dans le développement web.

Pour les besoins de ce tutoriel, nous créerons une page d’accueil de sorte que lorsque les utilisateurs visitent la page d’accueil de notre projet, ils verront un en-tête stylisé les souhaitant la bienvenue sur le site. Elle affichera également la date d’aujourd’hui à l’aide de JavaScript, et nous servirons également une image pour compléter la page.

Création d’un répertoire pour accueillir le projet

Commençons par créer un répertoire qui accueillera le projet de démonstration à l’aide de la commande suivante:

mkdir sitepoint_django_static_tut

Création d’un environnement virtuel

Il est recommandé de créer et de isoler les nouveaux projets dans des environnements virtuels. Cela signifie que chaque projet aura ses propres dépendances sans affecter l’installation Python globale.

Nous utiliserons le package virtualenv pour le créer. Si ce n’est pas installé dans votre environnement de développement, installez-le en utilisant pip install virtualenv, et créez un environnement virtuel en utilisant la commande suivante:

virtualenv myenv

La commande ci-dessus crée un environnement virtuel nommé myenv. Pour utiliser l’environnement virtuel, vous devez l’activer:

Linux/macOS:

. myenv/bin/activate

Windows:

. myenv\Scripts\activate

Installation des dépendances

Une fois l’environnement virtuel actif, vous pouvez maintenant procéder à l’installation des dépendances de votre projet. Pour commencer, nous installerons Django. Nous installerons d’autres dépendances au fur et à mesure que nous aborderons les sections qui en démontrent l’utilisation:

pip install Django

Cela installera la dernière version stable de Django, qui, au moment de la rédaction, est la version 5.0.

Création d’un projet Django

Après une installation réussie de Django, vous avez maintenant accès aux commandes de gestion Django. Utilisons-les pour créer un projet Django dans l’environnement virtuel:

django-admin startproject sitepoint_django .

La commande ci-dessus créera un projet Django nommé sitepoint_django et le point à la fin signifie que nous avons l’intention de créer le projet dans le répertoire courant.

Création d’une application de démonstration

Pour illustrer les différents concepts de gestion des fichiers statiques, nous devons créer au moins une application Django dans notre projet :

python manage.py startapp  static_demo

Cela créera une nouvelle application dans notre projet nommée static_demo. Pour qu’elle soit reconnue par notre projet, nous devons l’ajouter à la configuration des applications installées dans le fichier settings.py de notre projet. Ouvrez sitepoint_django/settings.py, allez à la configuration INSTALLED_APPS et ajoutez static_demo.apps.StaticDemoConfig en bas de la liste, comme indiqué ci-dessous:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # autres applications
    'static_demo.apps.StaticDemoConfig',
]

Création du modèle de page d’accueil

Nous allons afficher du HTML lorsque l’utilisateur visitera la page d’accueil de notre site. Dans l’application static_demo, créez un répertoire templates, puis dans celui-ci, créez un autre répertoire et nommez-le static_demo. Dans ce répertoire, créez un modèle et nommez-le index.html de sorte que le chemin soit static_demo/templates/static_demo/index.html.

Insérez le code suivant dans index.html:

<!-- static_demo/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitepoint Django Tutorial</title>
</head>
<body>
    <h2>Hello there, welcome to our great site!</h2>
</body>
</html>

Création de la vue d’index

Pour que le modèle soit affiché aux utilisateurs chaque fois qu’ils visitent la page d’accueil de notre application, nous devons créer une fonction de vue qui sera déclenchée pour rendre le modèle home.html. Ouvrez le fichier static_demo/views.py et insérez le code suivant:

# static_demo/views.py

from django.shortcuts import render

def index(request):
    return render(request, "static_demo/home.html")

Création du fichier URL pour static_demo

Nous voulons que la vue de l’index dans l’application static_demo rende la page d’accueil chaque fois qu’un utilisateur visite notre site. Donc, nous allons créer un schéma d’URL pour la fonction de vue qui rendra la page d’accueil. Pour cela, nous devons créer un fichier urls.py pour l’application static_demo, puis connecter le fichier URL static_demo au fichier URL des projets.

Par conséquent, dans l’application static_demo, créez un fichier et nommez-le urls.py et ajoutez le code suivant dans celui-ci:

# static_demo/urls.py

from django.urls import path
from .import views

app_name = 'static_demo'

urlpatterns = [
    path('', views.index, name="index"),
]

Le code ci-dessus crée une URL pour la vue de l’index de notre projet, donc si un utilisateur visite quelque chose comme http://oursite.com/, ou si vous visitez http://127.0.0.1:8000 en développement, la vue de l’index sera appelée pour répondre à cela.

Ajoutons-le au fichier URL du projet. Ouvrez le fichier sitepoint_django/urls.py et ajoutez le code suivant:

# sitepoint_django/urls.py

from django.contrib import admin
from django.urls import path, include # ajoutez une importation pour include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('static_demo.urls')), # ajoutez cette ligne
]

Le code ci-dessus apporte des modifications au fichier urls.py par défaut. Nous avons ajouté une importation pour la fonction include, ce qui indique à Django que nous incluons le static_demo.urls.

Test du projet

La configuration initiale du projet est terminée à ce stade. Lançons le serveur de développement pour voir si tout est bien lié.

Exécutez le projet avec la commande suivante:

python manage.py runserver

Si tout est configuré correctement, vous devriez pouvoir visiter http://127.0.0.1:8000. Vous verrez un texte non formaté vous souhaitant la bienvenue sur le site.

Servir des Fichiers Statiques en Environnement de Développement

Afin d’ajouter du style à la page, du JavaScript pour la date et l’image, nous devons apporter des modifications au projet. Procédons par étapes et voyons comment nous pouvons servir les différents fichiers statiques de différentes manières, en commençant par l’environnement de développement.

Configuration d’un répertoire de fichiers statiques

Django recommande que tous les actifs statiques soient gérés par application : c’est-à-dire que tous les CSS, JS et images dont une application particulière a besoin doivent être présents dans les limites de cette application. Mettons donc à jour l’application static_demo et créons un répertoire nommé static, et à l’intérieur, créons un autre répertoire nommé static_demo. Ensuite, dans le répertoire static_demo, créez trois répertoires supplémentaires : css, js, et images. À la fin, nous aurons une structure similaire à celle ci-dessous:

static_demo/
    └── static/
        └── static_demo/
            ├── css/
            ├── js/
            └── images/

La raison pour laquelle vous voudriez créer un répertoire static_demo dans le répertoire static est de vous aider à nommer votre espace de noms pour vos actifs statiques. Si vous avez plus d’une application, et que vous avez le CSS dans les deux applications nommé styles.css, Django ne fonctionnerait qu’avec le premier fichier de feuille de style qu’il trouve, car il ne serait pas en mesure de distinguer les autres. Par conséquent, nous les nommons afin que Django puisse savoir quel fichier d’actif nous référençons dans nos modèles.

Création des fichiers statiques

Dans cette étape, nous allons simplement mettre en place des ressources statiques minimales qui démontreront comment servir les fichiers en développement.

Dans le répertoire js, créez un fichier et nommez-le todays_date.js, puis ajoutez le code suivant:

/* static_demo/js/todays_date.js */

let formattedDate = new Date().toLocaleDateString();

document.getElementById('todaysDate').innerText = `The date today is ${formattedDate}`;

Le code ci-dessus récupère la date d’aujourd’hui en JavaScript, la formate en chaîne de caractères, puis l’affiche dans un div avec un ID de todaysDate.

Dans le répertoire css, créez un fichier, nommez-le styles.css, et ajoutez le code suivant:

/* static_demo/css/styles.css */

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

h2 {
    font-size: 24px; 
    color: green;
}

Le code ci-dessus utilise la mise en page Flexbox pour centrer tous les éléments de la page à la fois horizontalement et verticalement. Il définit également la taille de la police de l’élément H2 à 24px et sa couleur en vert.

Pour l’image, vous pouvez utiliser n’importe quelle image de votre choix. Copiez simplement une image dans le répertoire images et notez le nom.

Configuration des paramètres de fichiers statiques

Pour servir des fichiers statiques en développement, plusieurs choses doivent être définies dans le fichier Django settings.py. Ouvrez le fichier sitepoint_django/settings.py et vérifiez si vous avez les paramètres suivants:

# sitepoint_django/settings.py`

DEBUG=True

En développement, il est généralement recommandé de définir DEBUG sur True dans les paramètres de votre projet Django. Cette configuration active diverses fonctionnalités de débogage, notamment des messages d’erreur détaillés et des traces de pile, qui sont inestimables pour diagnostiquer et résoudre les problèmes pendant le développement.

De plus, lorsque DEBUG est défini sur True, l’application django.contrib.staticfiles sert automatiquement les fichiers statiques à partir du répertoire static de chaque application. Ce comportement simplifie le processus de développement en éliminant la nécessité de configuration manuelle pour servir les fichiers statiques.

Dans la configuration INSTALLED_APPS, vérifiez si vous avez ajouté django.contrib.staticfiles. Sinon, ajoutez-le au-dessus des applications que vous avez dans le projet. Par exemple, dans ce projet, ajoutez-le au-dessus de la chaîne d’application static_demo, comme indiqué ci-dessous:

# sitepoint_django/settings.py`

INSTALLED_APPS = [

    'django.contrib.staticfiles',
    'static_demo.apps.StaticDemoConfig',
]

L’application django.contrib.staticfiles fournie par Django est essentielle pour servir les fichiers statiques pendant le développement. Par défaut, elle parcourt les applications de votre projet pour localiser les répertoires de fichiers statiques dans chaque application. Cependant, si vous avez des ressources statiques supplémentaires qui ne sont associées à aucune application particulière, vous pouvez toujours les rendre accessibles à django.contrib.staticfiles en définissant la configuration STATICFILES_DIRS dans le fichier settings.py de votre projet. Cette configuration vous permet de spécifier des répertoires supplémentaires où se trouvent les fichiers statiques. Par exemple:

# sitepoint_django/settings.py`

STATICFILES_DIRS = [
    "/dir/with/staticfiles/static",
    "/someother/dir/static",
    "/home/example.com/static",
]

En plus de DEBUG et STATICFILES_DIRS, une autre configuration importante à inclure dans le fichier de configuration de votre projet Django est STATIC_URL. Bien que Django fournisse une valeur par défaut pour STATIC_URL, vous pouvez la définir explicitement dans votre fichier settings.py si elle n’est pas déjà présente.

La configuration STATIC_URL spécifie l’URL de base à partir de laquelle les ressources statiques seront servies. Par exemple, la configuration STATIC_URL = "static/" indique à Django de servir les ressources statiques à partir du chemin d’URL /static/. Cela signifie que, par exemple, le fichier de styles situé dans l’application static_demo sera accessible à une URL telle que http://127.0.0.1:8000/static/static_demo/css/styles.css.

Mise à jour du modèle

Avec les configurations mises à part, pour utiliser les fichiers statiques dans le modèle, nous devons le mettre à jour avec le HTML suivant:

<!-- static_demo/index.html -->

<!-- ajouter la gestion des fichiers statiques -->
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitepoint Django Tutorial</title>

    <!-- lien vers le css ci-dessous -->
    <link rel="stylesheet" href="{% static 'static_demo/css/styles.css'%}"> 
</head>
<body>
    <h2>Hello there, welcome to our great site</h2>
    <p id="todaysDate"></p>
    <!-- lien vers l'image ci-dessous -->
    <img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

    <!-- lien vers le js ci-dessous -->
    <script src="{% static 'static_demo/js/todays_date.js' %}"></script>
</body>
</html>

Cette mise à jour du modèle nous présente un nouveau tag : {% load static %}. Ce tag charge la gestion des fichiers statiques fournie par le moteur de templates Django. L’inclusion de ce tag dans un fichier de modèle Django nous permet d’utiliser des tags et filtres de modèle liés aux fichiers statiques.

Par exemple, l’utiliser dans notre modèle nous permet de référencer des fichiers statiques comme des images, CSS et JS dans les éléments HTML. L’utiliser permet également à Django de générer des URL pour les références aux actifs statiques :

<link rel="stylesheet" href="{% static 'static_demo/css/styles.css'%}"> 

<img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

<script src="{% static 'static_demo/js/todays_date.js' %}"></script>

Avec ces paramètres et la mise à jour du modèle en place, nous devrions exécuter le projet et voir si les fichiers sont servis en développement. Exécutez le projet à l’aide de la commande suivante :

python manage.py runserver

Si tout est correctement configuré, nous devrions avoir le serveur de développement en cours d’exécution sur http://127.0.0.1:8000. Si nous visitons ce lien, nous devrions avoir une page similaire à celle ci-dessous.

Avoir une image similaire montre que les fichiers statiques ont été appliqués correctement.

Vous devriez noter qu’en développement Django, lorsque DEBUG=True dans les paramètres de votre projet, et que django.contrib.staticfiles est activé, cela permet au serveur de développement Django (runserver) de servir les fichiers statiques. Dans ce scénario, toutes les modifications apportées aux fichiers statiques, telles que CSS, JavaScript ou images, sont détectées et appliquées automatiquement par Django. Ce processus transparent simplifie grandement le développement, car vous verrez instantanément les effets de vos modifications sans avoir besoin de rafraîchir manuellement ou de redémarrer le serveur.

Cependant, dans les environnements de production, servir des fichiers statiques implique généralement d’utiliser un serveur web distinct ou un CDN. Dans ce cas, les modifications apportées aux fichiers statiques peuvent ne pas être détectées et appliquées automatiquement par Django, nécessitant une intervention manuelle pour s’assurer que les fichiers mis à jour sont servis aux utilisateurs. De plus, si vous choisissez de servir manuellement les fichiers statiques à l’aide d’une méthode différente, comme la vue django.views.static.serve(), la détection et l’application automatiques des modifications peuvent ne pas se produire, et vous devrez peut-être mettre en place vos propres mécanismes pour gérer les mises à jour des fichiers statiques.

Servir des fichiers statiques avec WhiteNoise

En développement, bien que django.contrib.staticfiles simplifie le processus de servir des actifs statiques, assurant des mises à jour transparentes lorsque vous apportez des modifications.

Cependant, en passant en production, des paramètres comme DEBUG=True doivent être désactivés, et les fichiers statiques peuvent être servis à partir d’un CDN ou d’un autre serveur. Cela nécessite une solution qui relie les deux environnements — permettant un service fluide des fichiers en développement tout en reflétant fidèlement l’environnement de production.

Entrez le package WhiteNoise. Conçu pour s’intégrer parfaitement à Django, WhiteNoise offre une solution robuste pour servir des fichiers statiques dans les environnements de développement et de production, fournissant une approche unifiée qui garantit la cohérence et la fiabilité à tous les stades de déploiement. Explorons WhiteNoise.

Installation et configuration de WhiteNoise dans Django

Démarrer avec WhiteNoise est simple. Dans cette section, nous allons vous guider à travers le processus d’installation et vous expliquer comment configurer WhiteNoise dans votre projet Django.

Nous installons WhiteNoise de cette manière:

pip install whitenoise

Après une installation réussie, rendez-vous dans sitepoint_django/settings.py, descendez jusqu’en bas, et trouvez la configuration STATIC_URL. En dessous, ajoutez la configuration STATIC_ROOT:

# sitepoint_django/settings.py

STATIC_ROOT = BASEDIR / "staticfiles"

La configuration ci-dessus indique à Django que lorsque collectstatic est exécuté, tous les actifs statiques de tous les applications de votre projet seront collectés et stockés dans ce répertoire nommé staticfiles.

La prochaine étape consiste à exécuter la commande de gestion collectstatic:

python manage.py collectstatic

Pour activer WhiteNoise, vous devez l’ajouter à la liste des configurations MIDDLEWARE, éditez le fichier settings.py, et ajoutez le middleware WhiteNoise après le middleware Django SecurityMiddleware et avant tous les autres middleware:

# sitepoint_django/settings.py

MIDDLEWARE = [
    # ...
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

Utilisation de WhiteNoise en développement

Avec les étapes ci-dessus, WhiteNoise peut servir vos fichiers statiques en production. Mais si vous exécutez le projet à ce stade, le serveur de développement Django prendra automatiquement en charge la gestion des fichiers statiques. Mais pour bénéficier d’un comportement similaire en développement et en production, il est judicieux d’utiliser également WhiteNoise pour servir les fichiers en développement.

Pour ce faire, nous allons désactiver la gestion des fichiers statiques de Django et permettre à WhiteNoise de prendre le relais en modifiant simplement le fichier de paramètres et en ajoutant WhiteNoise à la liste INSTALLED_APPS en plaçant cette dernière au-dessus de django.contrib.staticfiles :

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # ...
    "whitenoise.runserver_nostatic",
    "django.contrib.staticfiles",
    # ...
]

Vous devez également désactiver DEBUG en le définissant sur False :

# sitepoint_django/settings.py

DEBUG=False

Avec ces étapes, vous pouvez servir vos ressources statiques de manière transparente à l’aide du package WhiteNoise.

Pour vérifier que WhiteNoise sert effectivement vos fichiers, vous pouvez supprimer ou commenter l’option django.contrib.staticfiles de la liste de paramètres INSTALLED_APPS. Cependant, il est important de noter que la suppression de django.contrib.staticfiles rendra certaines commandes de gestion de fichiers statiques indisponibles, telles que la commande collectstatic. Cette commande est essentielle pour collecter et consolider les fichiers statiques de vos applications dans un seul répertoire afin de les servir de manière efficace dans les environnements de production.

Options de configuration avancées WhiteNoise

Bien que les étapes ci-dessus suffisent pour la plupart des cas, WhiteNoise propose quelques options de configuration supplémentaires. Par exemple, vous pouvez ajouter la compression et le support de cache à votre projet. Pour l’activer, ouvrez le fichier sitepoint_django/settings.py et ajoutez les paramètres suivants :

# sitepoint_django/settings.py

STORAGES = {
    # ...
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}

Le paramétrage ci-dessus assurera que WhiteNoise compresse et hache les fichiers statiques en un nom unique, pour qu’ils soient correctement mis en cache.

Utilisation de WhiteNoise dans des environnements d’hébergement partagé

L’hébergement partagé est un type de service d’hébergement web où plusieurs sites web sont hébergés sur un seul serveur physique. Dans cette configuration, les ressources telles que l’espace disque, la bande passante et la puissance de traitement sont partagées entre plusieurs utilisateurs, ce qui en fait une option rentable pour l’hébergement de sites web de petite à moyenne taille.

Les environnements d’hébergement partagé sont généralement gérés par des fournisseurs d’hébergement, qui s’occupent de la maintenance du serveur, de la sécurité et du support technique, permettant aux propriétaires de sites de se concentrer sur la construction et la gestion de leurs sites sans avoir à s’inquiéter des tâches d’administration serveur.

Défis de gestion des fichiers statiques dans l’hébergement partagé

Bien que l’hébergement partagé offre une solution d’hébergement abordable et pratique pour de nombreux sites, il présente également des limitations par rapport à d’autres types d’hébergement, tels que les serveurs virtuels privés (VPS) ou les serveurs dédiés. Ces limitations incluent ce qui suit :

Restrictions sur les configurations et les paramètres du serveur, limitant la capacité de personnaliser le logiciel serveur ou d’installer des outils supplémentaires.
Les contraintes de ressources telles que l’espace disque jouent également un rôle, car il peut y avoir des limitations sur la quantité de bande passante pouvant être utilisée pour servir ces fichiers aux visiteurs.
La performance peut être un autre défi dans l’hébergement partagé, car partager des ressources avec d’autres utilisateurs peut entraîner des temps de chargement plus longs pour les fichiers statiques, en particulier pendant les périodes de forte circulation ou d’utilisation des ressources.

Configuration pour utiliser WhiteNoise

WhiteNoise est un package Python qui s’intègre parfaitement avec Django, ce qui en fait un choix idéal pour servir des fichiers statiques dans des environnements d’hébergement partagé. Contrairement à d’autres installations de logiciels telles que Apache et Nginx, qui peuvent ne pas être autorisées dans certains environnements d’hébergement, WhiteNoise peut être facilement installé en parallèle avec vos autres packages de projet.

En configurant Django pour utiliser WhiteNoise, vous pouvez servir efficacement des fichiers statiques directement à partir de votre application Django sans avoir besoin de logiciel serveur supplémentaire. Cela simplifie le processus de configuration et garantit la compatibilité avec une large gamme de fournisseurs d’hébergement.

La plupart des fournisseurs d’hébergement partagé proposent un cPanel qui vous permet de faire des configurations serveur et de téléverser des fichiers. Une fois que vous avez téléversé vos fichiers, vous pouvez apporter les modifications suivantes au fichier settings.py du projet :

# sitepoint_django/settings.py

STATIC_URL='static/'

# remplacez username par votre nom d'utilisateur cpanel
# utilisez public_html si vous travaillez sur votre domaine principal comme https://example.com
STATIC_ROOT='/home/username/public_html/static'

# OU 
# utilisez le nom du dossier si vous travaillez sur un sous-domaine comme https://subdomain.example.com
STATIC_ROOT='/home/username/subdomain.mydomain.com/static'

Avec ces paramètres en place, tout ce que vous avez à faire est d’exécuter la commande collectstatic pour que vos fichiers statiques soient collectés dans l’un des répertoires STATIC_ROOT ci-dessus, en fonction du domaine.

Servir des fichiers statiques depuis AWS S3

Amazon Simple Storage Service (S3) est un service d’objet d’archivage évolutif proposé par Amazon Web Services (AWS). Il permet aux utilisateurs de créer des espaces de stockage appelés « buckets » où vous pouvez stocker différents types de données comme des documents, des images, des vidéos et, en particulier pour notre tutoriel, des fichiers statiques.

AWS propose un niveau gratuit pour plusieurs de ses services, dont Amazon S3. Le niveau gratuit permet aux utilisateurs de commencer avec les services AWS gratuitement pendant une certaine période ou jusqu’à des limites de consommation spécifiques. Pour démarrer, vous pouvez vous inscrire au niveau gratuit S3. Cependant, pour finaliser le processus d’inscription, vous devrez fournir des informations de paiement.

Création d’un Bucket S3

Pour créer un bucket, rendez-vous sur le tableau de bord S3 et cliquez sur le bouton Créer un bucket.

Attribuez au bucket un nom unique compatible avec le DNS. Vous pouvez éventuellement sélectionner une région plus proche de vous ou de vos utilisateurs.

Activez les ACL pour le bucket.

Autorisez l’accès public au bucket en désactivant Bloquer tous les accès publics.

Après une création réussie, vous devriez voir votre bucket sur la page principale S3.

Activation de l’accès IAM

Après la création d’un bucket, vous pouvez l’utiliser en tant que compte root, mais AWS recommande de créer un groupe d’utilisateurs IAM (Identity Access Management) et de leur attribuer l’accès à un bucket spécifique.

Création d’un groupe IAM

Allez sur la page principale IAM et sélectionnez Groupes d’utilisateurs dans le menu latéral. Puis cliquez sur le bouton Créer un groupe. Attribuez au groupe un nom.

Ensuite, sous Attacher des politiques de permissions, recherchez S3 et attribuez AmazonS3FullAccess puis cliquez sur le bouton Créer un groupe.

Création d’un utilisateur IAM

Tant qu’on est encore sur la page IAM, sélectionnez Utilisateurs dans le panneau de gauche, puis cliquez sur le bouton Créer un utilisateur.

Attribuez un nom à l’utilisateur IAM et cliquez sur le bouton Suivant.

Sous l’option Définir les autorisations, laissez l’option Ajouter l’utilisateur à un groupe sélectionnée, puis allez à Groupes d’utilisateurs et sélectionnez le groupe d’utilisateurs que vous avez créé précédemment, puis cliquez sur le bouton Suivant.

Vérifiez et cliquez sur Créer l’utilisateur.

Maintenant, cliquez sur le nom de l’utilisateur pour consulter les détails de l’utilisateur. Cliquez sur l’onglet Certificats de sécurité puis cliquez sur Créer une clé d’accès. Choisissez Code local et cliquez sur le bouton Suivant.

Après cela, cliquez sur le bouton Créer une clé d’accès. Vous pouvez copier les clés dans votre fichier .env si vous en avez un, ou télécharger le fichier CSV pour une utilisation ultérieure.

Configuration de Django pour utiliser AWS S3 pour les fichiers statiques

Après avoir créé le bucket S3, nous devons configurer le projet pour servir les fichiers à partir de S3. Dans la section précédente, nous avons configuré WhiteNoise pour servir nos ressources statiques. Nous devons désactiver WhiteNoise afin que nous puissions servir les ressources à partir de S3. Pour ce faire, allez dans le fichier sitepoint_django/settings.py et commentez les lignes de code pertinentes :

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # ...
    # "whitenoise.runserver_nostatic",
    # ...
]

MIDDLEWARE = [
    # ...
    # "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

# STORAGES = {
#     "staticfiles": {
#         "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
#     },
# }

Le code ci-dessus commente toutes les configurations que nous avions mises en place pour WhiteNoise.

Installation des packages

Pour que le projet puisse fonctionner avec S3, nous devons installer deux packages : boto3 et django-storages. boto3 fournit l’API Python de bas niveau pour interagir avec les services AWS, tandis que django-storages étend les capacités de stockage de fichiers de Django pour intégrer avec des fournisseurs de stockage en nuage comme Amazon S3, vous permettant de gérer et de servir de manière transparente les fichiers statiques et médias dans votre application Django :

pip install boto3 django-storages

Configuration des paramètres

Pour que notre projet puisse servir des fichiers à partir de S3, nous devons apporter quelques modifications au fichier settings.py et le mettre à jour avec le code suivant :

# sitepoint_django/settings.py
import os  # premièrement, ajoutez une importation pour le module os

# paramétrage de stockage S3
STORAGES = {
    'staticfiles': {
        'BACKEND': 'storages.backends.s3boto3.S3Boto3Storage',
        'OPTIONS': {
            'bucket_name': os.getenv('AWS_STORAGE_BUCKET_NAME'),
            'location': 'static',
            'querystring_auth': False,
        },
    }
}

Les paramètres ci-dessus créent un dictionnaire STORAGES qui sert de conteneur de configuration centralisée pour définir divers backends de stockage utilisés dans le projet.

Il est important de noter que ce paramètre n’est disponible que pour les versions de Django à partir de 4.2 et ultérieures. Pour les versions antérieures, consultez la documentation.

Dans le code ci-dessus, nous avons un paramètre pour staticfiles qui identifie la configuration de stockage pour la gestion des fichiers statiques.

Après les paramètres STORAGES, nous devons ajouter quelques paramètres spécifiques à AWS dans notre fichier de paramètres, alors faites défiler jusqu’à la partie où vous trouverez le paramètre STATIC_URL et apportez les modifications suivantes :

# sitepoint_django/settings.py

USE_S3 = os.getenv('USE_S3')

if USE_S3:
    AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
    AWS_S3_OBJECT_PARAMETERS = {
        "CacheControl": "max-age=2592000",
    }

else:
    STATIC_URL = 'static/'
    STATIC_ROOT = BASE_DIR / 'staticfiles'

Upload des fichiers statiques sur S3

Une fois les paramètres en place, la tâche suivante consiste à télécharger vos fichiers statiques vers le bucket S3 en exécutant collectstatic :

python manage.py collectstatic  --no-input

Cela collectera tous les fichiers statiques de nos applications du projet, les déplacera vers le bucket S3 et les placera dans un dossier static tel que défini dans le dictionnaire STORAGES. L’absence du drapeau --no-input indique à Django de fonctionner en mode non interactif, en évitant toute invite pour l’entrée utilisateur.

Lorsqu’il est utilisé, Django procédera automatiquement au processus de collecte de fichiers statiques sans nécessiter d’intervention manuelle de la part de l’utilisateur.

Exécution du projet

Une fois toutes les configurations en place, vous pouvez exécuter le projet. Exécutons le projet en mode développement et servons les fichiers à partir du bucket S3 :

python manage.py runserver

Pour vérifier que vous servez effectivement des fichiers à partir de S3, vous pouvez consulter le code source de la page d’accueil :

<link rel="stylesheet" href="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/css/styles.css">

<img src="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/images/flowerImage.png" alt="Flower Image">

<script src="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/js/todays_date.js"></script>

En examinant les éléments HTML, on constate que les URL pointent effectivement vers le bucket S3.

Conclusion

Pour résumer, la gestion des fichiers statiques dans Django implique d’évaluer les besoins du projet, les besoins de scalabilité et les contraintes de l’environnement d’hébergement pour choisir la méthode la plus appropriée.

Par exemple, le middleware WhiteNoise offre une solution efficace pour servir des fichiers statiques dans des environnements d’hébergement mutualisés, où les contraintes de ressources et l’accès limité au serveur peuvent poser des défis.

En configurant correctement les paramètres de Django et en utilisant des outils comme WhiteNoise, les développeurs peuvent garantir un service de fichiers statiques fiable et optimisé, quelle que soit l’environnement d’hébergement. Chaque méthode offre ses propres avantages et considérations, nécessitant une évaluation attentive pour répondre aux besoins spécifiques du projet et offrir une expérience utilisateur fluide.

Nous avons abordé plusieurs points clés :

Méthodes pour gérer les fichiers statiques. Nous avons abordé divers approches, y compris le service de fichiers statiques localement, l’utilisation du serveur de développement intégré de Django, l’exploitation de solutions de stockage tiers comme Amazon S3, et le service de fichiers à l’aide de packages comme WhiteNoise. Chaque méthode a ses propres avantages et considérations, en fonction de facteurs tels que la scalabilité, la performance et la facilité de déploiement.

Paramètres et commandes courants :

STATIC_ROOT : spécifie le répertoire où les fichiers statiques collectés seront stockés.
STATIC_URL : définit l’URL de base pour l’accès aux fichiers statiques via le serveur web.
STATICFILES_DIRS : spécifie des répertoires supplémentaires contenant des ressources statiques.
STATICFILES_STORAGE : configure le backend de stockage pour la gestion des fichiers statiques.
collectstatic : collecte tous les actifs statiques de tous les répertoires d’applications vers le STATIC_ROOT.

Lecture complémentaire :