Docker & Angular : containeriser et déployer votre application en production

Déployer une application Angular en production peut rapidement devenir une source de friction : dépendances de version, configuration d'environnement, reproductibilité entre les machines des développeurs et les serveurs. Docker répond à ces problèmes en encapsulant votre application et toutes ses dépendances dans une image portable et immuable. Dans cet article, nous allons voir comment construire une image Docker optimisée pour Angular, de la compilation à la mise en production derrière Nginx.

Pourquoi containeriser son application Angular ?

Une application Angular est avant tout un ensemble de fichiers statiques (HTML, CSS, JavaScript) produits par la commande ng build. Ces fichiers peuvent être servis par n'importe quel serveur HTTP, mais gérer les versions de Node.js, les variables d'environnement et la configuration du serveur web manuellement est fastidieux. Avec Docker, vous définissez une fois pour toutes dans un Dockerfile l'environnement exact dans lequel votre application tourne. Chaque développeur, chaque pipeline CI/CD et chaque environnement de production obtient exactement le même résultat, éliminant le classique "ça marche sur ma machine". De plus, les conteneurs facilitent le scaling horizontal : il suffit de lancer plusieurs instances de votre image derrière un load balancer.

Écrire un Dockerfile multi-stage pour Angular

La clé d'une image Docker efficace pour Angular est le build multi-stage. Le principe : utiliser une image Node.js pour la phase de compilation, puis copier uniquement les artefacts produits dans une image Nginx légère. Voici un exemple de Dockerfile :

# Étape 1 : Build
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --configuration production

# Étape 2 : Serveur de production
FROM nginx:alpine
COPY --from=builder /app/dist/<nom-projet>/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

Cette approche garantit que l'image finale ne contient pas Node.js ni les node_modules, ce qui la rend beaucoup plus légère (souvent moins de 30 Mo contre plusieurs centaines avec Node.js). Le flag npm ci assure une installation strictement conforme au package-lock.json pour la reproductibilité.

Configurer Nginx pour une SPA Angular

Angular utilise le routing côté client : toutes les URL doivent renvoyer le fichier index.html pour que le router Angular prenne la main. La configuration Nginx doit refléter ce comportement avec la directive try_files :

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  # Cache agressif pour les assets compilés (hash dans le nom)
  location ~* .(js|css|png|jpg|svg|ico|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
}

Sans cette configuration, un rechargement de page sur une route Angular comme /articles/42 renverrait une erreur 404 serveur. Les règles de cache sur les assets exploitent le fait qu'Angular intègre un hash dans le nom de chaque fichier compilé, garantissant que les anciens fichiers ne seront jamais servis par erreur après une mise à jour.

Orchestrer avec Docker Compose et intégrer dans une pipeline CI/CD

Pour un environnement local de développement ou de test d'intégration, Docker Compose simplifie le démarrage de votre stack complète (Angular + API + base de données) en une seule commande :

services:
  frontend:
    build: .
    ports:
      - "4200:80"
    environment:
      - API_URL=http://api:3000
  api:
    image: mon-api:latest
    ports:
      - "3000:3000"

Dans une pipeline CI/CD (GitHub Actions, GitLab CI, Azure Pipelines…), l'intégration Docker est naturelle : on lance docker build, on tague l'image avec le SHA du commit ou le numéro de version, puis on la pousse dans un registre (Docker Hub, GitHub Container Registry, AWS ECR). Le déploiement se résume ensuite à faire tirer la nouvelle image par vos serveurs ou votre cluster Kubernetes. Cette chaîne garantit que ce qui est testé en CI est exactement ce qui part en production, sans aucune dérive de configuration.

Gérer les variables d'environnement Angular dans Docker

Angular compile les variables d'environnement au moment du build, contrairement à Node.js où elles sont disponibles à l'exécution. Pour gérer plusieurs environnements (staging, production) avec la même image Docker, une approche courante est d'injecter un fichier env.js chargé au démarrage du conteneur via un script shell entrypoint. Ce fichier expose les variables sur l'objet window.__env, que votre service Angular lit au runtime. Cette technique vous permet de construire l'image une seule fois et de la déployer sur tous vos environnements sans recompilation, respectant ainsi le principe "build once, deploy anywhere" des applications 12-factor.