Conteneuriser une application Angular

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 Les bases de Docker pour vous familiariser avec les concepts clés tels que les images, les conteneurs et les Dockerfiles.

Ce guide vous accompagne tout au long du processus de conteneurisation d'une application Angular 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 Angular en utilisant Docker.
Créer et optimiser un Dockerfile pour les constructions de production.
Utiliser des constructions multi-étapes pour minimiser la taille de l'image.
Servir l'application efficacement avec une configuration NGINX personnalisée.
Construire des images Docker sécurisées et maintenables en suivant les meilleures pratiques.

Obtenir l'application d'exemple

Clonez l'application d'exemple à utiliser avec ce guide. Ouvrez un terminal, naviguez jusqu'au répertoire où vous voulez travailler, et exécutez la commande suivante pour cloner le dépôt git :

$ git clone https://github.com/kristiyan-velkov/docker-angular-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-angular-sample

Ensuite, exécutez la commande suivante :

$ docker init

Vous verrez une sortie similaire à :

Bienvenue dans la 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 !

La 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 ?	23.11.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 se trouve votre sortie de construction ?	dist
Quelle commande voulez-vous utiliser pour démarrer l'application ?	npm run start
Sur quel port votre serveur écoute-t-il ?	8080

Une fois terminé, le répertoire de votre projet contiendra les nouveaux fichiers suivants :

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

Construire l'image Docker

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

Étape 1 : Améliorer le Dockerfile et la configuration générés

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

Utiliser des 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 aident à garantir 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 avec ses dépendances et son environnement d'exécution.
Pour tous les détails, consultez la référence du Dockerfile.

Étape 2 : Configurer le Dockerfile

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

# =========================================
# Étape 1 : Construire l'application Angular
# =========================================
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 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 en utilisant npm ci (garantit 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 Angular
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 construction statique de l'étape de construction dans le répertoire de service HTML par défaut de Nginx
COPY --chown=nginx:nginx --from=builder /app/dist/*/browser /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;"]

Note

Nous utilisons nginx-unprivileged au lieu de l'image NGINX standard pour suivre les meilleures pratiques de sécurité. Exécuter en tant qu'utilisateur non root dans l'image finale :

Réduit la surface d'attaque

S'aligne sur les recommandations de Docker pour le durcissement des conteneurs

Aide à se conformer aux politiques de sécurité plus strictes dans les environnements de production

É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 :

# ================================
# Node et sortie de construction
# ================================
node_modules
dist
out-tsc
.angular
.cache
.tmp

# ================================
# Test et couverture
# ================================
coverage
jest
cypress
cypress/screenshots
cypress/videos
reports
playwright-report
.vite
.vitepress

# ================================
# Fichiers d'environnement et de log
# ================================
*.env*
!*.env.production
*.log
*.tsbuildinfo

# ================================
# Fichiers spécifiques à l'IDE et à l'OS
# ================================
.vscode
.idea
.DS_Store
Thumbs.db
*.swp

# ================================
# Contrôle de version et fichiers CI
# ================================
.git
.gitignore

# ================================
# Docker et orchestration locale
# ================================
Dockerfile
Dockerfile.*
.dockerignore
docker-compose.yml
docker-compose*.yml

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

Pour servir votre application Angular efficacement à l'intérieur du conteneur, vous configurerez NGINX avec un réglage personnalisé. Ce réglage est optimisé pour la performance, la mise en cache des ressources, la compression gzip, et le support du routage côté client.

Créez un fichier nommé nginx.conf dans le répertoire racine de votre 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;

pid /tmp/nginx.pid;

events {
    worker_connections 1024;
}

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

    # Logging
    access_log off;
    error_log  /dev/stderr warn;

    # Performance
    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;
    keepalive_timeout  65;
    keepalive_requests 1000;

    # Compression
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_min_length 256;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/x-javascript
        application/json
        application/xml
        application/xml+rss
        font/ttf
        font/otf
        image/svg+xml;

    server {
        listen       8080;
        server_name  localhost;

        root /usr/share/nginx/html;
        index index.html;

        # Angular Routing
        location / {
            try_files $uri $uri/ /index.html;
        }

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

        # Optional: Explicit asset route
        location /assets/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

Étape 5 : Construire l'image Docker de l'application Angular

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

Le réglage mis à jour inclut :

Le réglage mis à jour inclut une configuration NGINX personnalisée spécifique à Angular.
Une construction Docker multi-étape efficace, garantissant une image finale petite et sécurisée.

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

├── docker-angular-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 Angular.

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-angular-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-angular-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, soit 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-angular-sample     latest            34e66bdb9d40   14 seconds ago   76.4MB

Cette sortie fournit des informations clés 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-angular-sample image répertoriée.

Exécuter l'application conteneurisée

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

Dans le répertoire docker-angular-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 application Angular simple.

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-angular-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 votre application Angular en cours d'exécution dans le navigateur.

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
eb13026806d1   docker-angular-sample-server   "nginx -c /etc/nginx…"   About a minute ago  Up About a minute  0.0.0.0:8080->8080/tcp   docker-angular-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 Angular en utilisant Docker. En suivant les meilleures pratiques, vous avez créé un réglage sécurisé, optimisé et prêt pour la production.

Ce que vous avez accompli :

Initialisé votre projet en utilisant docker init pour échafauder les fichiers Docker de configuration essentiels.
Remplacé le Dockerfile par défaut avec une construction multi-étape qui compile l'application Angular 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.
Construisit votre image Docker 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 Angular 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 actifs 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 Angular maintenant conteneurisée, vous êtes prêt pour la prochaine étape.

Dans la section suivante, vous apprendrez à développer votre application en utilisant des conteneurs Docker, permettant un environnement de développement cohérent, isolé et reproductible sur n'importe quelle machine.