Déployer & héberger

Avant de commencer

Pourquoi cette séance

Déployer, c'est rendre ton application accessible et disponible pour ses utilisateurs, ailleurs que sur ta machine. C'est une compétence centrale du Bloc 1 (« mettre à disposition un service informatique ») et un grand classique de l'E5 : un projet déployé, avec une vraie URL HTTPS, vaut bien plus qu'un projet qui ne tourne qu'en local. On va voir les deux grandes voies (le VPS, où tu gères tout ; le PaaS, où la plateforme gère beaucoup pour toi), puis on déroule un déploiement VPS complet : se connecter au serveur, récupérer le code, configurer les variables d'environnement, builder le front, lancer l'API en continu, exposer via Nginx, passer en HTTPS. À la fin, AppliFrais aura une URL publique sécurisée et une procédure documentée.

Ce que tu vas apprendre

Vocabulaire de départ

0. VPS ou PaaS ?

Deux philosophies d'hébergement. Comprendre la différence, c'est savoir quoi choisir selon le projet.

Chiffres-repères — prix, ressources et limites réels

1. Se connecter au serveur et y poser le code

Avant de configurer quoi que ce soit, il faut entrer dans le serveur et y mettre l'application. Trois étapes : se connecter, installer Node, récupérer le code.

1. Se connecter en SSH

# remplace par l'IP que ton hebergeur t'a donnee
ssh root@203.0.113.42

The authenticity of host '203.0.113.42' can't be established.
Are you sure you want to continue connecting (yes/no)? yes
Welcome to Ubuntu 22.04.3 LTS (GNU/Linux)
root@vps-appli:~#

1 bis. Authentification par clé SSH (méthode pro)

# Sur TON portable (pas sur le serveur)
ssh-keygen -t ed25519 -C "deploiement-applifrais"

Generating public/private ed25519 key pair.
Enter file in which to save the key (~/.ssh/id_ed25519): [Entrée]
Enter passphrase (empty for no passphrase): [phrase secrète optionnelle, recommandée]
Your identification has been saved in /home/toi/.ssh/id_ed25519
Your public key has been saved in /home/toi/.ssh/id_ed25519.pub

# Dépose la clé publique sur le serveur (depuis ton portable)
ssh-copy-id -i ~/.ssh/id_ed25519.pub root@203.0.113.42

Number of key(s) added: 1
Now try logging into the machine: "ssh root@203.0.113.42"

# Raccourci : crée un alias dans ~/.ssh/config sur ton portable
Host appli-frais-vps
  HostName 203.0.113.42
  User root
  IdentityFile ~/.ssh/id_ed25519

2. Installer Node sur le serveur

Le serveur est nu : il n'a pas Node. On l'installe (version 20).

# ajoute le depot officiel Node 20 puis installe
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
node -v

v20.11.1

3. Récupérer le code et ses dépendances

# clone ton depot puis installe les paquets
git clone https://github.com/gsb/appli-frais.git
cd appli-frais
npm install

added 312 packages in 14s

Chapitre 1 ter — Sécuriser l'accès au serveur

Avant d'installer quoi que ce soit, un vrai déploiement commence par trois mesures de sécurité de base : créer un compte dédié (pas root), ouvrir uniquement les ports nécessaires, et interdire l'authentification par mot de passe. Ce n'est pas du perfectionnisme : un VPS ouvert à tous les vents est scanné et attaqué dans les minutes qui suivent sa création.

1. Créer un utilisateur non-root

# toujours en root pour l'instant
adduser deployer              # crée le compte
usermod -aG sudo deployer     # lui accorde sudo
su - deployer                 # passe dessous pour tester

deployer@vps-appli:~$

2. Configurer le pare-feu (UFW)

Un VPS neuf a tous les ports ouverts à Internet. On ferme tout, on n'ouvre que le strict minimum :

sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable
sudo ufw status

Status: active
To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx Full                 ALLOW       Anywhere

3. Interdire l'authentification par mot de passe

sudo nano /etc/ssh/sshd_config

Localise et modifie (ou ajoute) ces deux lignes :

PermitRootLogin prohibit-password
PasswordAuthentication no

sudo systemctl restart sshd

2. Les variables d'environnement

Tout ce qui change entre ta machine (dev) et le serveur (prod) — ports, URL de base de données, secrets — ne doit jamais vivre dans le code. Ça vit dans des variables d'environnement.

1. Le fichier .env

# fichier .env a la racine du projet sur le serveur
# (JAMAIS commite -- il contient des secrets)
PORT=3000
MONGO_URI=mongodb://gsbuser:motdepasse@localhost:27017/appliFrais
JWT_SECRET=une_longue_valeur_aleatoire_de_32_caracteres
AWS_ACCESS_KEY_ID=AKIA...
AWS_SECRET_ACCESS_KEY=...
NODE_ENV=production

1 bis. Générer un JWT_SECRET digne de ce nom

Un JWT_SECRET, c'est la clé qui signe tous les tokens d'AppliFrais. Si quelqu'un la connaît, il peut fabriquer un token valide pour n'importe quel compte — visiteur ou comptable. Les règles impératives :

Génère le secret en une ligne sur le serveur (Node est déjà installé) :

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

a3f8c2d1e94b7f0a5c8e2d3f1b6a9c4e7d0f3b8a1c5e9f2d4b7a0c3e6f1d8b5

1 ter. Charger le .env : le module dotenv

npm install dotenv

// server.js — doit être la PREMIÈRE ligne, avant tout autre require
require('dotenv').config();

// process.env.PORT, MONGO_URI, JWT_SECRET... sont maintenant disponibles
const PORT = process.env.PORT || 3000;

2. Le tenir hors de Git

# fichier .gitignore -- empeche .env d'etre versionne
.env
node_modules/
dist/

3. Lire une variable dans le code

// server.js -- on lit la config depuis l'environnement
const PORT = process.env.PORT || 3000;
mongoose.connect(process.env.MONGO_URI);
app.listen(PORT);

3. Builder le front pour la production

En dev, le front React tourne via un serveur de développement (Vite, port 5173) : pratique pour coder (rechargement à chaud), mais lent et non sécurisé pour la prod. En prod, on compile le front en fichiers statiques optimisés.

# dans le dossier du front, on lance le build
npm run build

vite v5.0.10 building for production...
1462 modules transformed.
dist/index.html                   0.46 kB
dist/assets/index-a1b2c3.css     18.20 kB
dist/assets/index-d4e5f6.js     242.71 kB
built in 6.21s

4. Lancer l'API de façon durable (pm2)

Lancer node server.js à la main ne suffit pas : si tu fermes le terminal, ou si l'app crashe, ou si le serveur reboote, le service tombe. Un gestionnaire de processus garde l'app vivante.

# installer pm2 une fois (globalement)
sudo npm install -g pm2
# lancer l'API sous pm2 avec un nom lisible
pm2 start server.js --name appli-frais

[PM2] Starting /home/deployer/appli-frais/server.js in fork_mode
[PM2] Done.
+----+--------------+--------+---------+--------+--------+
| id | name         | mode   | status  | cpu    | memory |
+----+--------------+--------+---------+--------+--------+
| 0  | appli-frais  | fork   | online  | 0%     | 48.3mb |
+----+--------------+--------+---------+--------+--------+

Survivre au reboot

pm2 startup    # genere le service systeme qui relancera pm2 au boot
pm2 save       # memorise la liste des apps a relancer

Surveiller et diagnostiquer

pm2 status            # voir l'etat de toutes les apps
pm2 logs appli-frais  # voir les logs en direct (Ctrl+C pour sortir)

appli-frais | API AppliFrais en ecoute sur le port 3000
appli-frais | Connexion MongoDB etablie

5. Exposer le service : le reverse proxy Nginx

Ton API tourne sur le port 3000, en interne. Mais on ne veut pas que les utilisateurs tapent http://monserveur:3000 : on veut https://appli-frais.fr. Et le front (dist/) doit être servi quelque part. Le reverse proxy (Nginx) fait les deux.

Un seul point d'entrée public (Nginx, port 443). Le port 3000 du Node reste caché de l'extérieur.

La configuration Nginx

# /etc/nginx/sites-available/appli-frais
server {
  listen 80;
  server_name appli-frais.fr;
  root /home/deployer/appli-frais/dist;   # front statique builde

  # Taille max d'un upload (ex. justificatifs de frais)
  client_max_body_size 10M;

  # Compression à la volée
  gzip on;
  gzip_types text/plain text/css application/javascript application/json;

  # Fichiers statiques React : mise en cache longue durée
  location / {
    try_files $uri /index.html;           # routing SPA React
    add_header Cache-Control "no-cache";  # index.html : jamais mis en cache
  }

  location /assets/ {
    expires 1y;                           # fichiers hashés : 1 an
    add_header Cache-Control "public, immutable";
  }

  # Reverse proxy vers l'API Node
  location /api {
    proxy_pass http://localhost:3000;

    # Headers indispensables : sans eux, Node voit toutes les requetes
    # comme venant de 127.0.0.1, et ne sait pas la vraie IP du client
    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;

    # Timeouts raisonnables (par defaut : 60 s, peut bloquer si l'API plante)
    proxy_connect_timeout 5s;
    proxy_read_timeout    30s;
  }

  # Headers de sécurité HTTP (certbot ajoutera le bloc HTTPS/443)
  add_header X-Content-Type-Options  "nosniff"    always;
  add_header X-Frame-Options         "DENY"       always;
  add_header Referrer-Policy         "no-referrer-when-downgrade" always;
}

Activer et tester la config

# activer le site (lien vers sites-enabled) puis tester la syntaxe
sudo ln -s /etc/nginx/sites-available/appli-frais /etc/nginx/sites-enabled/
sudo nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

# si le test passe, on recharge Nginx (sans couper le service)
sudo systemctl reload nginx

6. Debug : quand le déploiement coince

Un déploiement qui rate la première fois, c'est normal. Savoir diagnostiquer fait partie du métier (C1.2). Deux pannes ultra-classiques.

Panne 1 — Nginx renvoie « 502 Bad Gateway »

Panne 2 — l'app ne démarre pas (variable d'env manquante)

Tu lances l'app, mais pm2 status affiche errored. Tu regardes les logs :

appli-frais | /home/deployer/appli-frais/server.js:14
appli-frais | mongoose.connect(process.env.MONGO_URI);
appli-frais | MongooseError: The `uri` parameter must be a string,
appli-frais |               got "undefined".
appli-frais | App crashed -- waiting for file changes before starting

7. HTTPS avec Let's Encrypt

Une app accessible depuis Internet doit être en HTTPS (rappel cyber : sinon, mots de passe et tokens transitent en clair, lisibles par tout intermédiaire). Bonne nouvelle : c'est gratuit et automatisé avec Let's Encrypt.

# installer certbot une fois
sudo apt install -y certbot python3-certbot-nginx
# obtenir + installer le certificat et configurer Nginx automatiquement
sudo certbot --nginx -d appli-frais.fr

Requesting a certificate for appli-frais.fr
Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/appli-frais.fr/fullchain.pem
Deploying certificate
Successfully deployed certificate for appli-frais.fr to /etc/nginx/sites-enabled/appli-frais
Congratulations! You have successfully enabled HTTPS on https://appli-frais.fr

Ce que certbot a modifié dans Nginx

Certbot a édité automatiquement ta config Nginx. Voici les lignes ajoutées (extrait) :

server {
  listen 443 ssl;
  ssl_certificate     /etc/letsencrypt/live/appli-frais.fr/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/appli-frais.fr/privkey.pem;
  include /etc/letsencrypt/options-ssl-nginx.conf;  # TLS 1.2 + 1.3, ciphers modernes
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;    # Diffie-Hellman 2048 bits
  ...
}
server {
  listen 80;
  return 301 https://$host$request_uri;  # redirige tout HTTP vers HTTPS
}

Ajouter HSTS (un cran de plus)

HSTS (HTTP Strict Transport Security) demande aux navigateurs de ne jamais contacter le site en HTTP, même si l'utilisateur tape http:// à la main. Ça évite les attaques de type « SSL stripping ».

# dans le bloc server { listen 443 ssl; ... }
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

Vérifier la qualité TLS avec SSL Labs

# depuis ton navigateur
https://www.ssllabs.com/ssltest/analyze.html?d=appli-frais.fr

Overall Rating: A+
Certificate: 100/100
Protocol Support: 100/100 (TLS 1.3 + TLS 1.2)
Key Exchange: 90/100
Cipher Strength: 90/100

Le renouvellement automatique

Les certificats Let's Encrypt durent 90 jours. Certbot installe une tâche planifiée qui les renouvelle tout seul. On vérifie que ça marche, à blanc :

sudo certbot renew --dry-run

Congratulations, all simulated renewals succeeded:
  /etc/letsencrypt/live/appli-frais.fr/fullchain.pem (success)

8. La disponibilité se mesure

« Mettre à disposition un service » (Bloc 1) ne s'arrête pas au déploiement : il faut qu'il reste disponible. Déployer, c'est le début ; maintenir en condition opérationnelle, c'est le métier.

Les trois réflexes de disponibilité

Lire un chiffre d'uptime

Mettre en place un moniteur uptime (UptimeRobot)

Un moniteur uptime envoie un ping HTTP à ton URL toutes les N minutes et t'alerte par email si elle ne répond plus. C'est la base de la surveillance d'un service en production.

Mise en place UptimeRobot (5 min) :

1. Crée un compte sur uptimerobot.com.
2. « Add New Monitor » → type HTTP(s) → URL : https://appli-frais.fr/api/health.
3. Intervalle : 5 minutes (gratuit). Alerte email si le site tombe.
4. Ajoute un endpoint /health dans l'API pour qu'il réponde toujours 200 :

// server.js — endpoint de santé (health check)
app.get('/api/health', (req, res) => {
  res.json({ status: 'ok', uptime: process.uptime() });
});

{"status":"ok","uptime":3602.4}

RTO et RPO : les deux métriques pro

9. Mini-projet : mettre AppliFrais en service

La mission

Déploie AppliFrais de bout en bout, sur un VPS ou un PaaS, et documente la procédure (un futur toi — ou un collègue — doit pouvoir refaire sans toi) :

1. héberger les composants (API, front, base Mongo) ;
2. configurer les variables d'environnement (aucun secret en dur, .env hors Git) ;
3. builder le front (dist/), lancer l'API en mode durable (pm2) ;
4. exposer via une URL propre (reverse proxy Nginx si VPS) + HTTPS (Let's Encrypt) ;
5. vérifier le service de bout en bout (login visiteur, ajout d'une fiche de frais, validation comptable).

Pour finir

L'essentiel

Vérifie tes acquis

Glossaire