Pourquoi Nginx ?
Contexte réel :
Un développeur a besoin d'un serveur web puissant et performant pour déployer et gérer des applications web modernes. Nginx est une solution populaire pour ce type de tâche, offrant des performances élevées, une gestion efficace de la charge et une facilité de configuration.
Un cas d'utilisation concret :
Imaginez que vous ayez un blog avec 10 000 visiteurs par jour. Si vous utilisez Apache pour héberger votre site, le serveur peut être souschargé, ce qui entraînera des temps de réponse lents et une mauvaise expérience utilisateur. Avec Nginx, vous pouvez gérer la charge plus efficacement, assurer une meilleure performance et éviter les problèmes liés à l'échec des requêtes.
Prerequis
- Connaissances en programmation (basique)
- Familiarité avec le terminal
- Installation de
Nginx(version 1.20 ou plus récente) - Un éditeur de texte pour modifier les fichiers de configuration Nginx
Concepts fondamentaux
Concept 1 : Serveur Web et Configuration
Un serveur web est un logiciel qui reçoit des requêtes HTTP, les traite et renvoie une réponse. Nginx est un serveur web open-source connu pour sa performance et sa facilité de configuration.
Schéma mental :
Requête HTTP -> Nginx (Traité) -> Réponse HTTP
Bloc de code fonctionnel :
## Configuration de base d'un serveur Nginx
server {
listen 80;
server_name example.com;
location / {
root html;
index index.html index.htm;
}
}
Concept 2 : Locations
Les locations permettent de spécifier comment traiter les requêtes pour différentes parties du site. Par exemple, vous pouvez servir des fichiers statiques pour certaines routes et exécuter une application backend pour d'autres.
Schéma mental :
/ -> Serveur Nginx
/static -> Servir des fichiers statiques
/api -> Exécuter une application backend
Bloc de code fonctionnel :
## Configuration avec plusieurs locations
server {
listen 80;
server_name example.com;
location /static/ {
alias html/static/;
}
location /api/ {
proxy_pass http://localhost:3000;
}
}
Concept 3 : Redirections et Réciproques
Les redirections permettent de déplacer les utilisateurs vers une URL différente, tandis que les réciproques aident à diriger le trafic d'une application backend.
Schéma mental :
/old -> Redirect to /new
/api -> Proxy to http://backend-server:3001
Bloc de code fonctionnel :
## Configuration avec redirections et réciproques
server {
listen 80;
server_name example.com;
location = /old {
return 301 $scheme://$host/new;
}
location /api/ {
proxy_pass http://backend-server:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Mise en pratique : Projet fil rouge
Projet : Mini-gestionnaire de tâches
Nous allons créer un gestionnaire de tâches simple avec une interface web et une API RESTful.
Étape 1 : Configuration de Nginx
Créez un fichier de configuration Nginx pour servir l'application frontend et les API backend.
## Configuration du serveur Nginx
server {
listen 80;
server_name example.com;
location /static/ {
alias html/static/;
}
location /api/ {
proxy_pass http://localhost:3001;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Étape 2 : Création du backend (API RESTful)
Créez un fichier app.js pour la gestion des tâches.
// app.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let tasks = [];
app.get('/api/tasks', (req, res) => {
res.json(tasks);
});
app.post('/api/tasks', (req, res) => {
const newTask = req.body;
tasks.push(newTask);
res.status(201).json(newTask);
});
app.put('/api/tasks/:id', (req, res) => {
const taskId = parseInt(req.params.id, 10);
const updatedTask = req.body;
tasks[taskId] = { ...tasks[taskId], ...updatedTask };
res.json(tasks[taskId]);
});
app.delete('/api/tasks/:id', (req, res) => {
const taskId = parseInt(req.params.id, 10);
tasks.splice(taskId, 1);
res.status(204).send();
});
app.listen(3001, () => {
console.log('API server running on port 3001');
});
Étape 3 : Création de l'frontend (HTML + JavaScript)
Créez un fichier index.html pour l'interface utilisateur.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task Manager</title>
</head>
<body>
<h1>Task Manager</h1>
<form id="taskForm">
<input type="text" id="newTask" placeholder="New Task">
<button type="submit">Add Task</button>
</form>
<script>
async function fetchTasks() {
const response = await fetch('/api/tasks');
const tasks = await response.json();
const taskList = document.getElementById('tasks');
taskList.innerHTML = '';
tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task.name;
li.addEventListener('click', async () => {
await fetch(`/api/tasks/${tasks.indexOf(task)}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ completed: !task.completed })
});
fetchTasks();
});
taskList.appendChild(li);
});
}
document.getElementById('taskForm').addEventListener('submit', async (event) => {
event.preventDefault();
const newTask = document.getElementById('newTask').value;
await fetch('/api/tasks', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: newTask })
});
fetchTasks();
});
fetchTasks();
</script>
</body>
</html>
Étape 4 : Installation et démarrage des services
- Installez Node.js et npm.
- Créez un dossier pour le projet et initialisez un nouveau projet NPM.
mkdir task-manager
cd task-manager
npm init -y
- Installez les dépendances nécessaires pour l'API backend et le frontend.
npm install express body-parser
- Lancez le serveur API et la page web.
node app.js &
python -m http.server 8000 --directory html/
Étape 5 : Accès au gestionnaire de tâches
Ouvrez un navigateur et accédez à http://localhost:8000. Vous devriez voir une interface simple pour ajouter, modifier et supprimer des tâches.
Erreurs fréquentes et debugging
Erreur 1 : Le serveur ne démarre pas
Code incorrect :
server {
listen 80;
server_name example.com;
location /static/ {
alias html/static/;
}
location /api/ {
proxy_pass http://localhost:3001;
}
}
Code correct :
## Ajoutez des commentaires pour chaque directive
server {
listen 80; # Écoute sur le port 80
server_name example.com; # Nom du domaine
location /static/ { # Pour les requêtes vers /static/
alias html/static/; # Emplacement des fichiers statiques
}
location /api/ { # Pour les requêtes vers /api/
proxy_pass http://localhost:3001; # Proxy pour le backend
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
Erreur 2 : La redirection ne fonctionne pas
Code incorrect :
location = /old {
return 301 /new;
}
Code correct :
## Utilisez le vrai chemin du domaine
location = /old {
return 301 $scheme://$host/new;
}
Erreur 3 : L'API ne répond pas
Code incorrect :
app.get('/api/tasks', (req, res) => {
res.json(tasks);
});
Code correct :
## Assurez-vous que les dépendances sont installées et correctement importées
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
let tasks = [];
app.get('/api/tasks', (req, res) => {
res.json(tasks);
});
// Ajoutez d'autres routes ici
app.listen(3001, () => {
console.log('API server running on port 3001');
});
Pour aller plus loin
Piste 1 : Authentification et Sécurité
Apprenez à sécuriser votre application en ajoutant une authentification et en utilisant des protocoles de sécurité.
Piste 2 : Performance avancée
Explorez les fonctionnalités de performance avancées de Nginx, comme le caching HTTP et la gestion du cache.
Piste 3 : Monitorduement et Logging
Apprenez à surveiller et à journaliser vos applications pour détecter les problèmes rapidement.
Défi pratique :
Créez un simple service d'API de note avec des fonctionnalités de création, lecture, mise à jour et suppression de notes. Assurez-vous que votre application est bien configurée avec Nginx pour servir l'API et l'interface utilisateur.