Deployer Django sur Vercel

Deployer Django sur Vercel : Un Tutoriel Intermediaire

Pourquoi Deployer Django sur Vercel ?

Le déploiement de Django sur Vercel offre une solution rapide et élégante pour les développeurs qui souhaitent déployer leurs applications web Python de manière fiable et performante. L'environnement cloud de Vercel est conçu pour optimiser le rendu des applications web, ce qui permet une meilleure expérience utilisateur et un meilleur référencement.

Un cas d'usage concret serait l'implémentation d'une application de gestion de projet interne dans une entreprise. Avec Django, on peut créer une plateforme complète où les membres du projet peuvent suivre les tâches en cours, les documents associés, et les communications en temps réel. Le déploiement sur Vercel permettrait à l'entreprise d'offrir cette application à ses employés depuis n'importe quel endroit, tout en assurant un haut niveau de disponibilité et de performance.

Prerequis

• Connaissance approfondie de Django (version 3.2 ou plus)
• Un environnement Python fonctionnel (Python 3.8 ou plus)
• Vercel compte gratuit
• Git

Concepts fondamentaux

1. Concept : Les Environnements Virtuels

Les environnements virtuels permettent de créer des espaces isolés pour gérer les dépendances et les packages Python de chaque projet individuellement.

## Créer un environnement virtuel
python -m venv .venv

## Activer l'environnement virtuel (Windows)
.venv\Scripts\activate

## Activer l'environnement virtuel (Linux/Mac)
source .venv/bin/activate

2. Concept : Les Déploiements statiques

Django génère des fichiers statiques pour le rendu de la page, comme les images et les CSS. Ces fichiers doivent être servis séparément du code Python.

## Configuration de Django pour gérer les fichiers statiques
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

3. Concept : Les Hooks Post-Build

Vercel permet d'exécuter des scripts après le build de l'application. C'est utile pour générer les fichiers statiques avant le déploiement.

## Créer un fichier vercel.json avec le hook post-build
{
  "version": 2,
  "builds": [
    { "src": "manage.py", "use": "@vercel/python", "config": { "runtime": "python3.8" } }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "headers": { "x-foxy": "foobar" },
      "continue": true
    }
  ]
}

Mise en pratique : projet fil rouge

Nous allons créer un mini-projet réaliste : une application de gestion de tâches simple. Cette application permettra aux utilisateurs de créer, de modifier et de supprimer des tâches.

Étape 1 : Configuration du Projet

Créez un nouveau répertoire pour votre projet et initialisez-le avec Git.

mkdir django-vercel-todo
cd django-vercel-todo
git init

Étape 2 : Création du Virtual Environment

Activez le virtual environment comme mentionné précédemment.

Étape 3 : Installation de Django

Installez Django et les dépendances nécessaires.

pip install django gunicorn whitenoise psycopg2-binary

Étape 4 : Configuration de Django

Créez un nouveau projet Django.

django-admin startproject todo .

Modifiez todo/settings.py pour inclure les configurations suivantes :

## Configuration des fichiers statiques
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

## Configuration de Gunicorn et Whitenoise
INSTALLED_APPS += ['whitenoise']
MIDDLEWARE.insert(1, 'whitenoise.middleware.WhiteNoiseMiddleware')

Étape 5 : Création des Modèles

Créez un modèle Task pour représenter les tâches.

## todo/models.py
from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

Étape 6 : Création des Vues et URLS

Créez une vue pour lister les tâches et ajoutez l'URL correspondante.

## todo/views.py
from django.shortcuts import render, redirect
from .models import Task

def task_list(request):
    tasks = Task.objects.all()
    return render(request, 'task_list.html', {'tasks': tasks})

def create_task(request):
    if request.method == 'POST':
        title = request.POST['title']
        description = request.POST.get('description', '')
        completed = False
        task = Task(title=title, description=description, completed=completed)
        task.save()
        return redirect('task_list')
    return render(request, 'create_task.html')

## todo/urls.py
from django.urls import path
from .views import task_list, create_task

urlpatterns = [
    path('', task_list, name='task_list'),
    path('create/', create_task, name='create_task'),
]

Étape 7 : Création des Templates

Créez les fichiers de template pour afficher la liste des tâches et créer de nouvelles tâches.

<!-- todo/templates/task_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo List</title>
</head>
<body>
    <h1>Todo List</h1>
    <ul>
        {% for task in tasks %}
            <li>task.title - task.description</li>
        {% empty %}
            <li>No tasks found.</li>
        {% endfor %}
    </ul>
    <a href="{% url 'create_task' %}">Create Task</a>
</body>
</html>

<!-- todo/templates/create_task.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Task</title>
</head>
<body>
    <h1>Create New Task</h1>
    <form method="post">
        {% csrf_token %}
        <label for="title">Title:</label>
        <input type="text" id="title" name="title" required>
        <br><br>
        <label for="description">Description:</label>
        <textarea id="description" name="description"></textarea>
        <br><br>
        <button type="submit">Create Task</button>
    </form>
</body>
</html>

Étape 8 : Configuration de Gunicorn

Créez un fichier wsgi.py pour configurer Gunicorn.

## todo/wsgi.py
import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'todo.settings')

application = get_wsgi_application()

Étape 9 : Ajout des Fichiers Statiques

Ajoutez les fichiers statiques nécessaires au répertoire static.

mkdir static
touch static/styles.css

Modifiez styles.css pour ajouter quelques styles de base.

/* static/styles.css */
body {
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    background-color: #f4f4f4;
    margin-bottom: 5px;
    padding: 10px;
}

Étape 10 : Configuration de Vercel

Créez un fichier vercel.json pour configurer les hooks post-build et la configuration de Django.

{
  "version": 2,
  "builds": [
    { "src": "manage.py", "use": "@vercel/python", "config": { "runtime": "python3.8" } }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "headers": { "x-foxy": "foobar" },
      "continue": true
    }
  ]
}

Étape 11 : Déploiement sur Vercel

Connectez-vous à votre compte Vercel et importez le répertoire django-vercel-todo. Suivez les instructions pour déployer l'application.

Erreurs frequentes et debugging

1. Erreur : "ImportError: No module named 'gunicorn'"

Code incorrect :

## wsgi.py
import os

from django.core.wsgi import get_wsgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'todo.settings')

application = get_wsgi_application()

Correction : Assurez-vous que Gunicorn est installé dans votre environnement virtuel.

pip install gunicorn

2. Erreur : "OSError: [Errno 13] Permission denied"

Code incorrect : Vérifiez les permissions du répertoire static et des fichiers statiques.

Correction : Assurez-vous que les droits d'accès sont corrects pour le répertoire static.

chmod -R 755 static

3. Erreur : "KeyError: 'title'"

Code incorrect :

## views.py
def create_task(request):
    title = request.POST['title']
    description = request.POST.get('description', '')
    completed = False
    task = Task(title=title, description=description, completed=completed)
    task.save()
    return redirect('task_list')

Correction : Ajoutez la vérification de la clé 'title' dans le dictionnaire POST.

## views.py
def create_task(request):
    if request.method == 'POST':
        title = request.POST.get('title', '')
        description = request.POST.get('description', '')
        completed = False
        task = Task(title=title, description=description, completed=completed)
        task.save()
        return redirect('task_list')
    return render(request, 'create_task.html')

Pour aller plus loin

1. Ajouter une Authentification Utilisateurs

Intégrez l'authentification utilisateurs de Django pour permettre aux utilisateurs de créer des comptes et de se connecter.

2. Utiliser Docker

Utilisez Docker pour encapsuler votre application et faciliter le déploiement sur Vercel.

3. Optimisation des Fichiers Statiques

Optimisez les fichiers statiques en utilisant des outils comme django-compressor ou whitenoise.

Défi Pratique

Implémentez une fonctionnalité pour marquer les tâches comme terminées et ajoutez un filtre pour afficher uniquement les tâches non terminées.