Configurer le fichier Docker Compose

Pourquoi passer par Docker Compose ?

Ton Dockerfile compile déjà l’image de production (cf. leçon précédente). Mais lancer l’image à la main avec docker build + docker run devient vite pénible :

• tu oublies une variable d’environnement → boom, crash ;
• impossible de redémarrer automatiquement le conteneur ;
• tu veux ajouter PostgreSQL ou Redis ? il faut tout refaire à la main.

Docker Compose te permet de décrire plusieurs conteneurs dans un seul fichier declaratif. Une seule commande ➜ Build, lancement, restart, logs, volumes, réseaux : tout est orchestré.

Créer le fichier docker-compose.yml

1
services:
2
  react_router:
3
    build:
4
      context: .
5
      dockerfile: Dockerfile          # même Dockerfile qu'en prod
6
    container_name: react_router
7
    ports:
8
      - "3000:3000"                   # host:container
9
    restart: always                   # relance après crash ou reboot
10
    environment:
11
      - DATABASE_URL
12
      - SESSION_SECRET
13
      - FRONTEND_URL

1. services : un objet par conteneur.
2. build.context : le dossier où se trouve ton Dockerfile.
3. restart: always : le conteneur redémarre si ton VPS reboot.
4. environment : Compose lit la valeur dans le .env du dossier courant.

Lancer l’environnement local

1
docker compose up --build -d

• up : démarre tous les services.
• --build : force un docker build si l’image n’existe pas encore.
• -d : détache le terminal (le conteneur s’exécute en arrière-plan).

1
docker compose ps

1
NAME            STATUS          PORTS
2
react_router    Up 30s          0.0.0.0:3000->3000/tcp

Navigue sur http://localhost:3000 ➜ l’app tourne comme en prod, mais sur ta machine.

Gérer les variables d’environnement

Tout ce qui est listé sous environment: est lue depuis .env.

1
DATABASE_URL="postgresql://postgres@localhost:5432/react_router_7"
2
SESSION_SECRET="my_ultra_secret"
3
FRONTEND_URL="http://localhost:5173"

Si tu oublies une variable, Zod (mis en place dans la leçon « Variables d’environnement typées ») fera planter l’app dès le démarrage. Le conteneur redémarrera en boucle : pense à bien compléter ton .env !

S’occuper du fameux prisma generate

Au premier lancement tu as peut-être vu :

1
Error: Could not find schema.prisma

Le problème vient du Dockerfile : on ne copiait pas le dossier prisma/. Voici le correctif :

1
-COPY ./package.json package-lock.json /app/
2
+COPY ./package.json package-lock.json /app/
3
+COPY ./prisma /app/prisma

Puis regénérer le client :

1
 RUN npm ci --omit=dev
2
+RUN npx prisma generate        # ^? client généré dans l'image

Redémarre Compose : plus d’erreur Prisma.

Ajouter PostgreSQL en un claquement de doigts

1
--- docker-compose.yml
2
services:
3
  db:
4
    image: postgres:16
5
    restart: always
6
    environment:
7
      POSTGRES_PASSWORD: postgres
8
    volumes:
9
      - db_data:/var/lib/postgresql/data
10
  react_router:
11
    build:
12
      context: .
13
    ports:
14
      - "3000:3000"
15
    depends_on:
16
      - db
17
volumes:
18
  db_data:

1. On importe l’image officielle postgres.
2. volumes garde tes données persistantes même si tu rebuild l’image.
3. depends_on garantit que Postgres sera prêt avant que React Router ne démarre.

Mets à jour DATABASE_URL :

1
DATABASE_URL="postgresql://postgres:postgres@db:5432/postgres"

Note le host db : c’est le nom du service dans Compose, résolu automatiquement par Docker via le réseau interne.

Gérer le cache ou les uploads : les volumes

Tu stockes des thumbnails générées à la volée ? Ajoute un volume dédié :

1
    volumes:
2
      - ./image-cache:/app/image-cache

• ./image-cache côté hôte
• /app/image-cache côté conteneur

Même après un docker compose down, les fichiers restent sur ton disque.

Inspecter et déboguer depuis Docker Desktop

Dans l’onglet Containers :

1. clique sur react_router ;
2. Logs affiche la sortie console.log (très pratique pour les erreurs Prisma) ;
3. Exec ouvre un shell : tu peux parcourir /app, vérifier la présence des fichiers, lancer node.

Commandes Compose à retenir

1
docker compose up -d          # build + start
2
docker compose logs -f        # suivre les logs
3
docker compose restart        # redémarrer tous les services
4
docker compose down           # stop + remove containers
5
docker compose down -v        # …et les volumes (⚠️ supprime tes données)

Bonnes pratiques Algomax

• Un fichier compose = un contexte docker-compose.yml (local), docker-compose.prod.yml (VPS). Lance le bon fichier avec docker compose -f docker-compose.prod.yml up -d.
• Volumise ce qui doit survivre (Bdd, uploads, cache).
• Loggue en JSON (option --log-format json dans react-router-serve) pour un parsing plus facile par Grafana ou Logtail.
• Restart Always : indispensable sur un VPS. Sur ton Mac, tu peux préférer restart: on-failure pour éviter les boucles infinies.

En résumé

1. docker-compose.yml décrit ton application et, demain, toute ton stack.
2. Une seule commande pour builder, lancer, relancer.
3. Les variables .env sont injectées automatiquement.
4. Ajouter Postgres ou Redis = trois lignes de YAML.
5. Grâce aux volumes, tes données résistent aux rebuilds.
6. Docker Desktop devient ton meilleur ami pour inspecter les logs et les fichiers internes.

La prochaine étape ? Brancher GitHub Actions pour builder l’image et pousser automatiquement sur Docker Hub — puis l’installer sur ton VPS. Rendez-vous dans la leçon suivante !