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
Déverrouillez votre potentiel

avec React Router 7

Vous en avez marre de...

❌ perdre du temps à chercher des informations éparpillées
❌ ne pas avoir de retour sur votre progression
Assistant IA spécialisé

Posez vos questions 24/7 à notre IA experte en React Router 7

Quiz interactifs

Validez vos acquis avec des quiz personnalisés et un feedback instantané

9 modules
53 leçons
Accès à vie
460.75€

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.

Premium
Quiz interactif
Testez vos connaissances et validez votre compréhension du module avec notre quiz interactif.
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
Les composants client sont plus rapides
Il n'y a aucune différence significative
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
Éviter d'utiliser les props
Toujours utiliser les class components
3

Architecture des données

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

useEffect
useState
useMemo
useContext
4

Gestion des erreurs

Comment implémenter la gestion des erreurs pour les requêtes API dans React ?

Utiliser try/catch avec async/await
Ignorer les erreurs
Toujours afficher un message d'erreur
Rediriger l'utilisateur
5

Déploiement et CI/CD

Quelle est la meilleure pratique pour déployer une application React en production ?

Utiliser un service CI/CD comme GitHub Actions
Copier les fichiers manuellement via FTP
Envoyer le code source complet
Ne jamais mettre à jour l'application

Débloquez ce quiz et tous les autres contenus premium en achetant ce cours

Dans cette leçon