Conclusion déploiement

Réussis ton déploiement React Router 7 avec Docker, VPS, CI/CD. Checklist post-prod, conseils actionnables et prochaines étapes pour ton application.

5 min read
Code de la leçon

Continuez votre apprentissage

Accédez aux 9 modules et 76 leçons de cette formation.

599€

Accès à vie · Garantie 30 jours

Tu viens de passer la ligne d’arrivée !

Félicitations 🚀 Tu as transformé un simple projet local en une application React Router 7 solide, conteneurisée et déployée sur ton propre VPS.

Mais concrètement, qu’est-ce que cela signifie pour toi ? Et que peux-tu faire maintenant ?

Récap’ express de tout ce que tu as mis en œuvre

  1. Automatisation CI/CD
    • GitHub Actions déclenche un pipeline à chaque push (main ou dev).
    • L’image Docker est buildée, testée, puis poussée sur Docker Hub.
    • Le runner auto-hébergé tire la bonne tag (production ou latest) et redémarre sans downtime.
  2. Images Docker optimisées
    • Multi-stage build → seulement 160 Mo (au lieu de 700 Mo !).
    • npm ci --omit=dev + .dockerignore pour voyager léger.
    • Un seul conteneur web + un conteneur db décrits dans docker-compose.{dev,staging,prod}.yml.
  3. Infrastructure maîtrisée
    • VPS Hostinger KVM 2 (2 vCPU, 8 Go RAM) à 7 €/mois.
    • Accès SSH clé privée ; root bloqué, fail2ban activé.
    • Docker + Compose installés, Caddy prêt pour le HTTPS automatique.
  4. Secrets sécurisés
    • Variables d’environnement validées au démarrage avec Zod (voir la leçon « Variables typées »).
    • DOCKERHUB_TOKEN, DATABASE_URL, SMTP_* stockés dans GitHub Secrets.
  5. Stratégie multi-environnements
    • dev → staging (:3010), main → production (:3000).
    • Les deux versions cohabitent sur le VPS ; tu switches en un docker restart.
  6. Nom de domaine & HTTPS
    • Enregistrement A → IP du VPS.
    • Caddy gère les certificats Let’s Encrypt ; ton site répond déjà en HTTP S.

Checklist post-déploiement

Avant de ranger ton terminal, passe ces points en revue :

ÉlémentOk ?
https://mon-domaine.com renvoie un cadenas vert☐
docker ps affiche react_router_production Up☐
docker logs -f react_router_production n’affiche pas d’erreur Prisma ou SMTP☐
Backup PostgreSQL planifié (pg_dump + cron)☐
Les variables NODE_ENV=production et PRISMA_LOG=error sont présentes☐
docker system prune planifié via cron (1×/semaine)☐

Et maintenant, on fait quoi ?

1. C’est un portfolio ou un back-office interne ?

Tu peux t’arrêter là. Tes utilisateurs se connectent, manipulent leurs données, et tu dors sur tes deux oreilles.

2. Tu veux que Google, Bing et… ChatGPT parlent de toi ?

Là, l’aventure continue ! Le transcript le souligne : « Si tu n’as pas besoin de SEO, tu peux t’arrêter. Sinon, direction le prochain module. » Le module Maîtrise le SEO dans React Router 7 va te montrer comment :

  • générer des balises meta dynamiques ;
  • précharger tes CSS et polices pour améliorer le LCP ;
  • structurer un sitemap.xml et un robots.txt via les resource routes ;
  • configurer Caddy pour la compression Brotli et le headers Cache-Control.

Questions courantes après le déploiement

QuestionRéponse courte / action
Comment mettre à jour l’app ?git push main : la CI rebuild et déploie en < 2 min.
Je veux plusieurs apps sur le même VPS !Nouveau dossier → nouvelle stack Compose, nouveau port (3011, 3012…) → Caddy fait la réécriture.
Mon image gonfle à chaque release !Vérifie .dockerignore, passe tous les packages inutiles en devDependencies.
Comment roll-back rapidement ?docker compose -f docker-compose.prod.yml up -d image:tag-précédent.
J’ai un crash Prisma après un reboot !Le conteneur db a-t-il bien redémarré ? docker ps + docker logs db.

Le mot de la fin

Tu viens de parcourir un marathon : Dockerfile, Compose, Docker Hub, GitHub Actions, VPS, Caddy, DNS, HTTPS… Tout ça en partant d’une simple application React Router 7.

Si tu bloques, le serveur Discord Algomax est ouvert 24 h/24 – 7 j/7. Viens partager tes captures d’écran, logs et questions. La communauté (et moi) serons ravis de t’aider.

Inclus
Quiz interactifTestez vos connaissances
Validez votre compréhension du module avec notre quiz interactif personnalisé.
1

Comprendre les concepts fondamentaux

Quelle est la principale différence entre les composants client et serveur dans React ?

Les composants client s'exécutent uniquement dans le navigateur
Les composants serveur peuvent utiliser useState
2

Optimisation des performances

Quelle technique est recommandée pour éviter les rendus inutiles dans React ?

Utiliser React.memo pour les composants fonctionnels
Ajouter plus d'états locaux
3

Architecture des données

Quel hook permet de gérer les effets de bord dans un composant React ?

useEffect
useState

Débloquez ce quiz et tous les autres contenus