Déploiement d'une application React Router 7

Pourquoi un module “Déploiement” ?

Bravo ! Tu viens de terminer la partie back-end : base PostgreSQL, sessions cookies, authentification sécurisée. Il reste une dernière marche avant de montrer ton application au monde : la mettre en production.

Dans la vidéo (voir transcript) je t’explique qu’un déploiement nécessite deux éléments :

1. un serveur qui exécute le code ;
2. un nom de domaine qui pointe vers ce serveur.

L’objectif de cette leçon est de t’aider à choisir la bonne stratégie et de te présenter l’architecture que j’utilise sur tous mes projets.

Deux briques indispensables

Les noms de domaine s’achètent chez n’importe quel registrar (OVH, Ionos…). Le serveur, lui, peut prendre plusieurs formes ; c’est là que se situe l’arbre de décision.

Panorama des solutions d’hébergement

Les enseignements du transcript

• Vercel & Netlify sont ultra rapides à configurer mais limitent parfois les process (pas de cron, WebSocket instable).
• Un VPS demande plus de configuration mais offre – pour le même prix – un salaire complet de liberté (SMTP, stockage de fichiers, services self-hosted, plusieurs sites, etc.).

Étape 1 – Acheter son nom de domaine

Le plus simple : se rendre chez un registrar et taper son idée dans la barre de recherche. Le transcript montre react-routeur-france.com à 13 €/an, alors que algomax.com coûte 26 000 € (oui, ça pique !). Une fois le domaine acheté, tu auras accès aux champs A et AAAA (DNS) pour le pointer vers l’adresse IP de ton serveur.

Étape 2 – Louer un VPS et se connecter

1
# Exemple : Hostinger KV M 2 (7 €/mois)
2
ssh root@146.59.123.42

Sur la console de gestion (capture dans la vidéo) tu vois une douzaine de services : deux applis Remix, deux bases PostgreSQL, un Redis, un serveur SMTP… et le CPU plafonne à 50 %. Bref : largement de la marge pour ton projet React Router 7.

Étape 3 – Installer la stack serveur

1. Docker + Docker Compose pour conteneuriser l’app.
2. Caddy (ou Nginx) pour le reverse-proxy HTTPS automatique.
3. PostgreSQL (ou MariaDB) via un conteneur dédié.

1
apt update && apt install docker.io docker-compose caddy -y

Étape 4 – Conteneuriser l’application

1
services:
2
  web:
3
    build: .
4
    ports:
5
      - "3000:3000"
6
    env_file: .env.production
7
    restart: always
8

9
  db:
10
    image: postgres:16
11
    environment:
12
      POSTGRES_PASSWORD: supersecret
13
    volumes:
14
      - ./data/db:/var/lib/postgresql/data

• web : l’image générée par docker build ..
• db : PostgreSQL persistant.

Étape 5 – Automatiser avec GitHub Actions

1
name: Deploy
2
on:
3
  push:
4
    branches: [ "main" ]
5

6
jobs:
7
  deploy:
8
    runs-on: ubuntu-latest
9
    steps:
10
      - uses: actions/checkout@v4
11
      - uses: docker/setup-qemu-action@v3
12
      - uses: docker/setup-buildx-action@v3
13
      - name: Build image
14
        run: |
15
          docker build -t myapp:${{ github.sha }} .
16
      - name: Push via ssh
17
        uses: appleboy/ssh-action@v0.1.10
18
        with:
19
          host: ${{ secrets.VPS_HOST }}
20
          username: root
21
          key: ${{ secrets.VPS_KEY }}
22
          script: |
23
            docker stop myapp || true
24
            docker rm   myapp || true
25
            docker pull myapp:${{ github.sha }}
26
            docker run -d --name myapp -p 3000:3000 myapp:${{ github.sha }}

1. La build tourne gratuitement sur GitHub.
2. Le binaire est envoyé sur le VPS via SSH et redémarre sans downtime.
3. Aucun rayon-laser de CI payante : full open-source.

Étape 6 – Lier domaine ⇄ VPS

1. Récupère l’adresse IP publique dans la console de ton hébergeur.
2. Crée un enregistrement A chez ton registrar vers cette IP.
3. Lance Caddy : il ira chercher le certificat Let’s Encrypt automatiquement.

1
caddy reverse-proxy --from https://www.mon-site.com --to http://localhost:3000

30 s plus tard : HTTPS vert, l’app est en ligne !

Pourquoi cette stack vaut l’effort ?

• Coût : ~19 €/mois (domaine + VPS) → illimité en nombre de projets.
• Contrôle total : ajoute un cron, un service Redis, un micro-service IA sans demander la permission.
• Skills transférables : comprendre le Linux que tu pilotes vaut de l’or sur le marché.

Plan d’action résumé

1
+ Acheter le domaine (OVH, IONOS…)
2
+ Louer un VPS 2 vCPU / 2 Go (Hostinger KVM 2)
3
+ Pointer l’enregistrement DNS vers l’IP du VPS
4
+ Installer Docker + Caddy sur le serveur
5
+ Conteneuriser l’app React Router 7
6
+ Écrire le workflow GitHub Actions
7
+ Valider le déploiement HTTPS

👊 7 étapes et ton application est publique, sécurisée et prête à encaisser la production.

En guise de conclusion

Le déploiement peut paraître impressionnant ; en réalité c’est un processus répété. En maîtrisant ta propre infrastructure tu élimines les coûts cachés et tu acquiers des super-pouvoirs : héberger plusieurs projets, tester des services self-hosted, déployer une mise à jour en une commande.

À toi de jouer : réserve ce VPS, configure ton domaine et rejoins-moi dans la prochaine leçon où l’on écrira ensemble le Dockerfile de production !