⚠️ Traduction non officielle - Cette documentation est une traduction communautaire non officielle de Docker.

Utiliser des conteneurs pour le développement React.js

Table des matières

Prérequis

Terminez Conteneuriser une application React.js.

Aperçu

Dans cette section, vous apprendrez à configurer des environnements de production et de développement pour votre application React.js conteneurisée en utilisant Docker Compose. Cette configuration vous permet de servir une construction de production statique via Nginx et de développer efficacement à l'intérieur de conteneurs en utilisant un serveur de développement avec rechargement en direct grâce à Compose Watch.

Vous apprendrez à :

  • Configurer des conteneurs distincts pour la production et le développement
  • Activer la synchronisation automatique des fichiers en utilisant Compose Watch en développement
  • Déboguer et prévisualiser vos modifications en temps réel sans reconstruction manuelle

Mettre à jour automatiquement les services (Mode Développement)

Utilisez Compose Watch pour synchroniser automatiquement les modifications des fichiers sources dans votre environnement de développement conteneurisé. Cela offre une expérience de développement fluide et efficace sans avoir besoin de redémarrer ou de reconstruire manuellement les conteneurs.

Étape 1 : Créer un Dockerfile de développement

Créez un fichier nommé Dockerfile.dev à la racine de votre projet avec le contenu suivant :

# =========================================
# Étape 1 : Développer l'application React.js
# =========================================
ARG NODE_VERSION=22.14.0-alpine

# Utiliser une image Node.js légère pour le développement
FROM node:${NODE_VERSION} AS dev

# Définir le répertoire de travail à l'intérieur du conteneur
WORKDIR /app

# Copier d'abord les fichiers liés aux paquets pour tirer parti du mécanisme de mise en cache de Docker
COPY package.json package-lock.json ./

# Installer les dépendances du projet
RUN --mount=type=cache,target=/root/.npm npm install

# Copier le reste du code source de l'application dans le conteneur
COPY . .

# Exposer le port utilisé par le serveur de développement Vite
EXPOSE 5173

# Utiliser une commande par défaut, peut être surchargée dans le fichier Docker compose.yml
CMD ["npm", "run", "dev"]

Ce fichier met en place un environnement de développement léger pour votre application React en utilisant le serveur de développement.

Étape 2 : Mettre à jour votre fichier compose.yaml

Ouvrez votre fichier compose.yaml et définissez deux services : un pour la production (react-prod) et un pour le développement (react-dev).

Voici un exemple de configuration pour une application React.js :

services:
  react-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-reactjs-sample
    ports:
      - "8080:8080"

  react-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app
  • Le service react-prod construit et sert votre application de production statique en utilisant Nginx.
  • Le service react-dev exécute votre serveur de développement React avec rechargement en direct et remplacement de module à chaud.
  • watch déclenche la synchronisation des fichiers avec Compose Watch.
Note

Pour plus de détails, consultez le guide officiel : Utiliser Compose Watch.

Étape 3 : Mettre à jour vite.config.ts pour s'assurer qu'il fonctionne correctement dans Docker

Pour que le serveur de développement de Vite fonctionne de manière fiable à l'intérieur de Docker, vous devez mettre à jour votre vite.config.ts avec les bons paramètres.

Ouvrez le fichier vite.config.ts à la racine de votre projet et mettez-le à jour comme suit :

/// <reference types="vitest" />

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/",
  plugins: [react()],
  server: {
    host: true,
    port: 5173,
    strictPort: true,
  },
});
Note

Les options server dans vite.config.ts sont essentielles pour exécuter Vite dans Docker :

  • host: true permet au serveur de développement d'être accessible depuis l'extérieur du conteneur.
  • port: 5173 définit un port de développement cohérent (doit correspondre à celui exposé dans Docker).
  • strictPort: true garantit que Vite échoue clairement si le port n'est pas disponible, plutôt que de changer silencieusement.

Pour plus de détails, consultez la documentation de configuration du serveur Vite.

Après avoir terminé les étapes précédentes, votre répertoire de projet devrait maintenant contenir les fichiers suivants :

├── docker-reactjs-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

Étape 4 : Démarrer Compose Watch

Exécutez la commande suivante depuis la racine de votre projet pour démarrer votre conteneur en mode watch :

$ docker compose watch react-dev

Étape 5 : Tester Compose Watch avec React

Pour vérifier que Compose Watch fonctionne correctement :

  1. Ouvrez le fichier src/App.tsx dans votre éditeur de texte.

  2. Localisez la ligne suivante :

    <h1>Vite + React</h1>

  3. Changez-la en :

    <h1>Bonjour depuis Docker Compose Watch</h1>

  4. Enregistrez le fichier.

  5. Ouvrez votre navigateur à l'adresse http://localhost:5173.

Vous devriez voir le texte mis à jour apparaître instantanément, sans avoir besoin de reconstruire manuellement le conteneur. Cela confirme que la surveillance des fichiers et la synchronisation automatique fonctionnent comme prévu.

Résumé

Dans cette section, vous avez mis en place un flux de travail complet de développement et de production pour votre application React.js en utilisant Docker et Docker Compose.

Voici ce que vous avez accompli :

  • Créé un Dockerfile.dev pour rationaliser le développement local avec le rechargement à chaud
  • Défini des services react-dev et react-prod distincts dans votre fichier compose.yaml
  • Activé la synchronisation des fichiers en temps réel en utilisant Compose Watch pour une expérience de développement plus fluide
  • Vérifié que les mises à jour en direct fonctionnent de manière transparente en modifiant et en prévisualisant un composant

Avec cette configuration, vous êtes maintenant équipé pour construire, exécuter et itérer sur votre application React.js entièrement à l'intérieur de conteneurs — de manière efficace et cohérente entre les environnements.

Ressources associées

Approfondissez vos connaissances et améliorez votre flux de travail de développement conteneurisé avec ces guides :

Prochaines étapes

Dans la section suivante, vous apprendrez à exécuter des tests unitaires pour votre application React.js à l'intérieur de conteneurs Docker. Cela garantit des tests cohérents dans tous les environnements et supprime les dépendances à la configuration de la machine locale.

Exécuter des tests React.js dans un conteneur »