Deployer Express sur Vercel

Deployer Express sur Vercel : Un Tutoriel Avancé pour les Développeurs Intermédiaires

Pourquoi Deployer Express sur Vercel ?

Dans un monde où la rapidité de déploiement et l'extensibilité sont des priorités, le choix du bon hébergeur peut faire une différence cruciale. Lorsqu'il s'agit de backend avec Node.js, Vercel offre une solution unique qui combine les meilleures pratiques en matière d'hébergement cloud avec les avantages du déploiement serverless et edge computing.

Un cas concret de ce qui vous attend peut être une application d'API interne pour gérer les données de votre entreprise. En déployant sur Vercel, vous pouvez rendre cette API accessible rapidement et facilement à partir de tout endroit dans le monde, tout en profitant des capacités scalables et sécurisées de la plateforme.

Prerequis

Pour suivre ce tutoriel, vous devez disposer des compétences suivantes :

• Connaissance approfondie du langage JavaScript
• Familiarité avec Express.js pour construire le backend
• Compréhension de base des principes du déploiement sur Vercel
• Un compte Vercel (gratuit)
• Node.js et npm installés localement (version recommandée : 14.0+)

Concepts fondamentaux

Concept 1 : Serverless Architecture sur Vercel

Vercel propose une architecture serverless qui vous permet d'exécuter du code sans gérer les serveurs. Cela signifie que vous n'avez pas besoin de prévoir et de configurer des machines virtuelles, ce qui peut vous épargner des coûts et vous concentrer sur le développement de votre application.

Schéma Mental :

+-------------------+
|                   |
|     Vercel        |
|                   |
|   +-------------+   |
|   |             |   |
|   |  Serverless |   |
|   |  Functions  |   |
|   |             |   |
|   +-------------+   |
|                   |
|    +----------+   |
|    |          |   |
|    |  Frontend  |   |
|    |          |   |
|    +----------+   |
+-------------------+

Code Exemple :

// serverless.js
export default (req, res) => {
  res.status(200).json({ message: 'Hello from Vercel!' });
};

Concept 2 : Configuration du Projet

Pour déployer un projet Express sur Vercel, vous devez configurer le fichier vercel.json. Ce fichier indique à Vercel comment construire et exécuter votre application.

Schéma Mental :

+-------------------+
|                   |
|     vercel.json   |
|                   |
|  - Build Command  |
|  - Output Directory|
|  - Framework      |
+-------------------+

Code Exemple :

// vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      src: "/(.*)",
      dest: "/"
    }
  ]
}

Concept 3 : Utilisation de Middleware

Le middleware est un élément fondamental dans Express qui permet d'intercepter les requêtes et de les traiter avant que la réponse ne soit envoyée. Cela vous donne une grande flexibilité pour ajouter des fonctionnalités comme la gestion des erreurs, l'autorisation, etc.

Schéma Mental :

+-------------------+
|                   |
|     Middleware    |
|                   |
|  - app.use        |
|  - next()         |
+-------------------+

Code Exemple :

// middleware.js
const logger = (req, res, next) => {
  console.log(`Request URL: ${req.originalUrl}`);
  next();
};

module.exports = logger;

Mise en pratique : Projet Fil Rouge

Nous allons créer un mini-projet complet pour un gestionnaire de tâches. Ce projet comprendra une API simple avec les fonctionnalités CRUD (Create, Read, Update, Delete) sur des tâches.

Étape 1 : Initialisation du Projet

Créez un nouveau répertoire et initialisez le projet :

mkdir task-manager-api
cd task-manager-api
npm init -y

Étape 2 : Installation de Express

Installez Express dans votre projet :

npm install express --save

Étape 3 : Création du Fichier Principal

Créez un fichier server.js et ajoutez le code suivant :

// server.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());

let tasks = [];

// GET all tasks
app.get('/tasks', (req, res) => {
  res.json(tasks);
});

// POST a new task
app.post('/tasks', (req, res) => {
  const newTask = req.body;
  tasks.push(newTask);
  res.status(201).json(newTask);
});

// GET a single task by ID
app.get('/tasks/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const task = tasks.find(t => t.id === id);
  if (task) {
    res.json(task);
  } else {
    res.status(404).json({ message: 'Task not found' });
  }
});

// PUT update a task
app.put('/tasks/:id', (req, res) => {
  const id = parseInt(req.params.id);
  const updatedTask = req.body;
  tasks = tasks.map(t => (t.id === id ? { ...t, ...updatedTask } : t));
  res.json(updatedTask);
});

// DELETE a task
app.delete('/tasks/:id', (req, res) => {
  const id = parseInt(req.params.id);
  tasks = tasks.filter(t => t.id !== id);
  res.status(204).send();
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Étape 4 : Configuration de Vercel

Créez un fichier vercel.json :

// vercel.json
{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      src: "/(.*)",
      dest: "/"
    }
  ]
}

Étape 5 : Déploiement sur Vercel

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

Erreurs Frequentes et Debugging

Erreur 1 : SyntaxError: Unexpected token 'export'

Code Incorrect :

// serverless.js
export default (req, res) => {
  res.status(200).json({ message: 'Hello from Vercel!' });
};

Code Correct :

// serverless.js
module.exports = (req, res) => {
  res.status(200).json({ message: 'Hello from Vercel!' });
};

Erreur 2 : Error: Cannot find module 'express'

Code Incorrect :

npm install express --save-dev

Code Correct :

npm install express --save

Erreur 3 : Unhandled Promise Rejection

Code Incorrect :

app.get('/tasks', (req, res) => {
  setTimeout(() => {
    res.json(tasks);
  }, 1000);
});

Code Correct :

app.get('/tasks', (req, res) => {
  setTimeout(() => {
    res.json(tasks);
  }, 1000).catch(err => {
    console.error(err);
    res.status(500).json({ message: 'Internal Server Error' });
  });
});

Pouraller plus loin

Piste 1 : Intégration de MongoDB

Ajoutez une base de données MongoDB à votre application pour stocker les tâches persistemment.

• Concept Avancé : Utilisation de Mongoose pour l'ORM
• Liens : Mongoose Documentation

Piste 2 : Authentification JWT

Ajoutez une authentification basée sur les jetons JSON Web (JWT) pour sécuriser vos routes.

• Concept Avancé : Utilisation de Jsonwebtoken
• Liens : Jsonwebtoken Documentation

Piste 3 : Déploiement continu avec GitHub Actions

Configurez un workflow GitHub Actions pour automatiser le déploiement sur Vercel à chaque push dans votre repository.

• Concept Avancé : Utilisation de Workflows GitHub
• Liens : GitHub Actions Documentation

Défi Pratique

Créez une API pour un service de notes. Les fonctionnalités devraient inclure la création, la lecture, la mise à jour et la suppression de notes.

Ce tutoriel vous a permis d'acquérir des connaissances avancées sur le déploiement d'une application Express sur Vercel. En suivant les étapes et en résolvant les erreurs communes, vous êtes maintenant prêt à déployer vos propres applications backend complexes avec Vercel.