Conteneuriser une application React.js

Table des matières

Prérequis

Avant de commencer, assurez-vous que les outils suivants sont installés et disponibles sur votre système :

Vous avez installé la dernière version de Docker Desktop.
Vous disposez d'un client git. Les exemples de cette section utilisent un client git en ligne de commande, mais vous pouvez utiliser n'importe quel client.

Nouveau sur Docker ?
Commencez par le guide des bases de Docker pour vous familiariser avec les concepts clés comme les images, les conteneurs et les Dockerfiles.

Ce guide vous accompagne tout au long du processus de conteneurisation d'une application React.js avec Docker. Vous apprendrez à créer une image Docker prête pour la production en utilisant les meilleures pratiques qui améliorent la performance, la sécurité, l'évolutivité et l'efficacité du déploiement.

À la fin de ce guide, vous saurez :

Conteneuriser une application React.js en utilisant Docker.
Créer et optimiser un Dockerfile pour les constructions de production.
Utiliser les constructions multi-étapes pour minimiser la taille de l'image.
Servir l'application efficacement avec une configuration NGINX personnalisée.
Suivre les meilleures pratiques pour construire des images Docker sécurisées et maintenables.

Obtenir l'application exemple

Clonez l'application exemple pour l'utiliser avec ce guide. Ouvrez un terminal, placez-vous dans le répertoire de votre choix et exécutez la commande suivante pour cloner le dépôt git :

$ git clone https://github.com/kristiyan-velkov/docker-reactjs-sample

Générer un Dockerfile

Docker fournit un outil CLI interactif appelé docker init qui aide à échafauder les fichiers de configuration nécessaires pour conteneuriser votre application. Cela inclut la génération d'un Dockerfile, .dockerignore, compose.yaml et README.Docker.md.

Pour commencer, naviguez jusqu'à la racine du répertoire de votre projet :

$ cd docker-reactjs-sample

Ensuite, exécutez la commande suivante :

$ docker init

Vous verrez une sortie similaire à :

Bienvenue dans le CLI Docker Init !

Cet utilitaire vous guidera dans la création des fichiers suivants avec des valeurs par défaut pertinentes pour votre projet :
  - .dockerignore
  - Dockerfile
  - compose.yaml
  - README.Docker.md

Commençons !

Le CLI vous posera quelques questions sur la configuration de votre application. Pour des raisons de cohérence, veuillez utiliser les mêmes réponses que celles indiquées dans l'exemple ci-dessous lorsque vous y êtes invité :

Question	Réponse
Quelle plateforme d'application votre projet utilise-t-il ?	Node
Quelle version de Node voulez-vous utiliser ?	22.14.0-alpine
Quel gestionnaire de paquets voulez-vous utiliser ?	npm
Voulez-vous exécuter "npm run build" avant de démarrer le serveur ?	oui
Dans quel répertoire votre build est-il généré ?	dist
Quelle commande voulez-vous utiliser pour démarrer l'application ?	npm run dev
Sur quel port votre serveur écoute-t-il ?	8080

Après avoir terminé, le répertoire de votre projet contiendra les nouveaux fichiers suivants :

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

Construire l'image Docker

Le Dockerfile par défaut généré par docker init sert de point de départ solide pour les applications Node.js générales. Cependant, React.js est une bibliothèque front-end qui se compile en ressources statiques, nous devons donc adapter le Dockerfile pour optimiser la manière dont les applications React sont construites et servies dans un environnement de production.

Étape 1 : Examiner les fichiers générés

Dans cette étape, vous améliorerez le Dockerfile et les fichiers de configuration en suivant les meilleures pratiques :

Utiliser les constructions multi-étapes pour garder l'image finale propre et petite
Servir l'application en utilisant NGINX, un serveur web rapide et sécurisé
Améliorer la performance et la sécurité en n'incluant que ce qui est nécessaire

Ces mises à jour garantissent que votre application est facile à déployer, rapide à charger et prête pour la production.

Note

Un Dockerfile est un fichier texte brut qui contient des instructions étape par étape pour construire une image Docker. Il automatise l'empaquetage de votre application ainsi que de ses dépendances et de son environnement d'exécution.
Pour tous les détails, consultez la référence du Dockerfile.

Étape 2 : Configurer le fichier Dockerfile

Copiez et remplacez le contenu de votre Dockerfile existant par la configuration ci-dessous :

# =========================================
# Étape 1 : Construire l'application React.js
# =========================================
ARG NODE_VERSION=22.14.0-alpine
ARG NGINX_VERSION=alpine3.21

# Utiliser une image Node.js légère pour la construction (personnalisable via ARG)
FROM node:${NODE_VERSION} AS builder

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

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

# Installer les dépendances du projet en utilisant npm ci (assure une installation propre et reproductible)
RUN --mount=type=cache,target=/root/.npm npm ci

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

# Construire l'application React.js (génère dans /app/dist)
RUN npm run build

# =========================================
# Étape 2 : Préparer Nginx pour servir les fichiers statiques
# =========================================

FROM nginxinc/nginx-unprivileged:${NGINX_VERSION} AS runner

# Utiliser un utilisateur non-root intégré pour les meilleures pratiques de sécurité
USER nginx

# Copier la configuration Nginx personnalisée
COPY nginx.conf /etc/nginx/nginx.conf

# Copier la sortie de la construction statique de l'étape de construction vers le répertoire de service HTML par défaut de Nginx
COPY --chown=nginx:nginx  --from=builder /app/dist /usr/share/nginx/html

# Exposer le port 8080 pour autoriser le trafic HTTP
# Remarque : Le conteneur NGINX par défaut écoute maintenant sur le port 8080 au lieu de 80 
EXPOSE 8080

# Démarrer Nginx directement avec la configuration personnalisée
ENTRYPOINT ["nginx", "-c", "/etc/nginx/nginx.conf"]
CMD ["-g", "daemon off;"]

Étape 3 : Configurer le fichier .dockerignore

Le fichier .dockerignore indique à Docker quels fichiers et dossiers exclure lors de la construction de l'image.

Note

Cela aide à :

Réduire la taille de l'image

Accélérer le processus de construction

Empêcher les fichiers sensibles ou inutiles (comme .env, .git ou node_modules) d'être ajoutés à l'image finale.

Pour en savoir plus, consultez la référence .dockerignore.

Copiez et remplacez le contenu de votre .dockerignore existant par la configuration ci-dessous :

# Ignorer les dépendances et la sortie de la construction
node_modules/
dist/
out/
.tmp/
.cache/

# Ignorer les artefacts de construction spécifiques à Vite, Webpack et React
.vite/
.vitepress/
.eslintcache
.npm/
coverage/
jest/
cypress/
cypress/screenshots/
cypress/videos/
reports/

# Ignorer les fichiers d'environnement et de configuration (données sensibles)
*.env*
*.log

# Ignorer les artefacts de construction TypeScript (si vous utilisez TypeScript)
*.tsbuildinfo

# Ignorer les fichiers de verrouillage (facultatif si vous utilisez Docker pour l'installation des paquets)
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Ignorer les fichiers de développement local
.git/
.gitignore
.vscode/
.idea/
*.swp
.DS_Store
Thumbs.db

# Ignorer les fichiers liés à Docker (pour éviter de copier des configurations inutiles)
Dockerfile
.dockerignore
docker-compose.yml
docker-compose.override.yml

# Ignorer les fichiers de cache spécifiques à la construction
*.lock

Étape 4 : Créer le fichier `nginx.conf`

Pour servir efficacement votre application React.js à l'intérieur du conteneur, vous configurerez NGINX avec une configuration personnalisée. Cette configuration est optimisée pour la performance, la mise en cache du navigateur, la compression gzip et la prise en charge du routage côté client.

Créez un fichier nommé nginx.conf à la racine de votre répertoire de projet, et ajoutez le contenu suivant :

Note

Pour en savoir plus sur la configuration de NGINX, consultez la documentation officielle de NGINX.

worker_processes auto;

# Store PID in /tmp (always writable)
pid /tmp/nginx.pid;

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    # Disable logging to avoid permission issues
    access_log off;
    error_log  /dev/stderr warn;

    # Optimize static file serving
    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;
    keepalive_timeout  65;
    keepalive_requests 1000;

    # Gzip compression for optimized delivery
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
    gzip_min_length 256;
    gzip_vary on;

    server {
        listen       8080;
        server_name  localhost;

        # Root directory where React.js build files are placed
        root /usr/share/nginx/html;
        index index.html;

        # Serve React.js static files with proper caching
        location / {
            try_files $uri /index.html;
        }

        # Serve static assets with long cache expiration
        location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|map)$ {
            expires 1y;
            access_log off;
            add_header Cache-Control "public, immutable";
        }

        # Handle React.js client-side routing
        location /static/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

Étape 5 : Construire l'image Docker de l'application React.js

Avec votre configuration personnalisée en place, vous êtes maintenant prêt à construire l'image Docker pour votre application React.js.

La mise à jour inclut :

Optimisation de la mise en cache du navigateur et de la compression gzip
Sécurisation, sans utilisateur root, des journaux pour éviter des problèmes de permission
Prise en charge du routage côté client par redirection des routes non trouvées vers index.html

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

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

Maintenant que votre Dockerfile est configuré, vous pouvez construire l'image Docker pour votre application React.js.

Note

La commande docker build empaquette votre application dans une image en utilisant les instructions du Dockerfile. Elle inclut tous les fichiers nécessaires du répertoire actuel (appelé contexte de construction).

Exécutez la commande suivante à partir de la racine de votre projet :

$ docker build --tag docker-reactjs-sample .

Ce que cette commande fait :

Utilise le Dockerfile dans le répertoire actuel (.)
Empaquette l'application et ses dépendances dans une image Docker
Étiquette l'image comme docker-reactjs-sample pour vous permettre de la référencer plus tard

Étape 6 : Voir les images locales

Après avoir construit votre image Docker, vous pouvez vérifier quelles images sont disponibles sur votre machine locale en utilisant soit la CLI Docker ou Docker Desktop. Étant donné que vous travaillez déjà dans le terminal, utilisons la CLI Docker.

Pour lister toutes les images Docker locales disponibles, exécutez la commande suivante :

$ docker images

Exemple de sortie :

REPOSITORY                TAG               IMAGE ID       CREATED         SIZE
docker-reactjs-sample     latest            f39b47a97156   14 seconds ago   75.8MB

Cette sortie fournit des informations clées sur vos images :

Repository – Le nom attribué à l'image.
Tag – Une étiquette de version qui aide à identifier différentes constructions (par exemple, latest).
Image ID – Un identifiant unique pour l'image.
Created – Le timestamp indiquant quand l'image a été construite.
Size – L'espace disque total utilisé par l'image.

Si la construction a été réussie, vous devriez voir docker-reactjs-sample image listé.

Exécuter l'application conteneurisée

Dans l'étape précédente, vous avez créé un Dockerfile pour votre application React.js et construit une image Docker en utilisant la commande docker build. Maintenant, il est temps d'exécuter cette image dans un conteneur et de vérifier que votre application fonctionne comme prévu.

Dans le répertoire docker-reactjs-sample, exécutez la commande suivante dans un terminal.

$ docker compose up --build

Ouvrez un navigateur et visualisez l'application à http://localhost:8080. Vous devriez voir une simple application React.js web.

Appuyez sur ctrl+c dans le terminal pour arrêter votre application.

Exécuter l'application en arrière-plan

Vous pouvez exécuter l'application détachée du terminal en ajoutant l'option -d . Dans le répertoire docker-reactjs-sample, exécutez la commande suivante dans un terminal.

$ docker compose up --build -d

Ouvrez un navigateur et visualisez l'application à http://localhost:8080. Vous devriez voir une prévisualisation de l'application web.

Pour confirmer que le conteneur est en cours d'exécution, utilisez la commande docker ps :

$ docker ps

Cela listera tous les conteneurs actifs avec leurs ports, noms et état. Cherchez un conteneur exposant le port 8080.

Exemple de sortie :

CONTAINER ID   IMAGE                          COMMAND                  CREATED             STATUS             PORTS                    NAMES
88bced6ade95   docker-reactjs-sample-server   "nginx -c /etc/nginx…"   About a minute ago  Up About a minute  0.0.0.0:8080->8080/tcp   docker-reactjs-sample-server-1

Pour arrêter l'application, exécutez :

$ docker compose down

Note

Pour plus d'informations sur les commandes Compose, consultez la référence CLI Compose.

Résumé

Dans ce guide, vous avez appris à conteneuriser, construire et exécuter une application React.js en utilisant Docker. En suivant les meilleures pratiques, vous avez créé une configuration sécurisée, optimisée et prête pour la production.

Ce que vous avez accompli :

Initialisé votre projet en utilisant docker init pour échafauder les fichiers de configuration Docker essentiels.
Remplacé le Dockerfile par défaut avec une construction multi-étape qui compile l'application React.js et sert les fichiers statiques en utilisant Nginx.
Remplacé le fichier .dockerignore par défaut pour exclure les fichiers inutiles et garder l'image propre et efficace.
Construis l'image Docker de votre application React.js en utilisant docker build.
Exécuté le conteneur en utilisant docker compose up, à la fois en avant-plan et en arrière-plan.
Vérifiez que l'application était en cours d'exécution en visitant http://localhost:8080.
Appris à arrêter le conteneur conteneurisé en utilisant docker compose down.

Vous avez maintenant une application React.js entièrement conteneurisée, en cours d'exécution dans un conteneur Docker, et prête pour le déploiement sur n'importe quel environnement avec confiance et cohérence.

Ressources connexes

Explorez les références officielles et les meilleures pratiques pour affiner votre workflow Docker :

Constructions multi-étapes – Apprenez à séparer les étapes de construction et d'exécution.
Meilleures pratiques pour écrire des Dockerfiles – Écrivez des Dockerfiles efficaces, maintenables et sécurisés.
Contexte de construction dans Docker – Apprenez comment le contexte affecte les constructions d'images.
docker init CLI reference – Échafauder automatiquement les ressources Docker.
docker build CLI reference – Construire des images Docker à partir d'un Dockerfile.
docker images CLI reference – Gérer et inspecter les images Docker locales.
docker compose up CLI reference – Démarrer et exécuter des applications multi-conteneurs.
docker compose down CLI reference – Arrêter et supprimer des conteneurs, des réseaux et des volumes.

Étapes suivantes

Avec votre application React.js maintenant conteneurisée, vous êtes prêt à passer à l'étape suivante.

Dans la section suivante, vous apprendrez à développer votre application en utilisant des conteneurs Docker, ce qui vous permettra de créer un environnement de développement consistant, isolé et reproductible sur n'importe quelle machine.