Conteneuriser une application Full Stack Spring Boot et Angular avec Docker Compose

Dans l'écosystème du développement logiciel moderne, la complexité des applications full stack, combinant un backend robuste comme Spring Boot et un frontend dynamique tel qu'Angular, représente un défi en matière de déploiement et de gestion des environnements. Pour un développeur Full Stack Java Spring Boot + Angular, tel que Laty Gueye Samba basé à Dakar, Sénégal, la capacité à standardiser et simplifier ces processus est cruciale. C'est ici qu'intervient Docker Compose, un outil puissant qui permet de définir et d'exécuter des applications multi-conteneurs de manière déclarative.

La conteneurisation avec Docker a révolutionné la manière dont les applications sont développées, testées et déployées, offrant une isolation et une portabilité inégalées. Cependant, la gestion de plusieurs conteneurs interagissant entre eux, comme une API Spring Boot, une application Angular et une base de données, peut devenir fastidieuse. Docker Compose simplifie cette orchestration en permettant aux développeurs de décrire l'ensemble de leur architecture applicative dans un seul fichier YAML, facilitant ainsi le démarrage et l'arrêt de tous les services d'une application d'un simple coup de commande.

Cet article explore les étapes clés pour conteneuriser une application Full Stack Spring Boot et Angular en utilisant Docker Compose. Il s'agit d'une compétence essentielle pour tout développeur souhaitant optimiser ses flux de travail et garantir des déploiements cohérents sur différents environnements, une pratique courante dans des projets de développement d'applications métier complexes.

Préparer les applications Spring Boot et Angular pour la conteneurisation

Avant d'orchestrer les services avec Docker Compose, il est nécessaire de créer un Dockerfile pour chaque composant de l'application : l'API Spring Boot et le frontend Angular. Ces fichiers décrivent comment construire l'image Docker de chaque application.

Dockerfile pour l'application Spring Boot (Backend)

Pour l'application Spring Boot, l'image sera basée sur une JRE (Java Runtime Environment) pour exécuter le JAR compilé. Il est recommandé d'utiliser une image Alpine pour sa légèreté.

# Utilise une image JRE officielle légère
FROM openjdk:17-jre-slim-buster

# Informations sur le mainteneur (optionnel)
LABEL maintainer="Laty Gueye Samba"

# Définit le répertoire de travail dans le conteneur
WORKDIR /app

# Copie le fichier JAR de l'application dans le conteneur.
# Il est supposé que le fichier JAR est déjà construit et se trouve dans target/
# Exemple: mv target/votre-application-0.0.1-SNAPSHOT.jar app.jar
COPY target/votre-application-0.0.1-SNAPSHOT.jar app.jar

# Expose le port sur lequel l'application Spring Boot écoute
EXPOSE 8080

# Commande pour démarrer l'application Spring Boot
ENTRYPOINT ["java", "-jar", "app.jar"]

Dockerfile pour l'application Angular (Frontend)

Pour l'application Angular, le processus implique de construire l'application puis de servir les fichiers statiques résultants via un serveur web léger comme Nginx.

# Étape 1: Construire l'application Angular
# Utilise une image Node.js pour la compilation
FROM node:18-alpine AS builder

# Définit le répertoire de travail
WORKDIR /app

# Copie package.json et package-lock.json pour installer les dépendances
COPY package*.json ./

# Installe les dépendances
RUN npm install

# Copie le reste du code source de l'application
COPY . .

# Construit l'application Angular pour la production
# La commande 'ng build' peut varier (par ex. avec --configuration production)
RUN npm run build -- --output-path=./dist --configuration production

# Étape 2: Servir l'application Angular avec Nginx
FROM nginx:alpine

# Copie la configuration Nginx personnalisée
# Créez un fichier nginx.conf dans le même répertoire que le Dockerfile
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copie les fichiers statiques de l'application Angular construits par l'étape "builder"
COPY --from=builder /app/dist /usr/share/nginx/html

# Expose le port sur lequel Nginx écoutera
EXPOSE 80

# Commande par défaut pour démarrer Nginx
CMD ["nginx", "-g", "daemon off;"]

Un exemple de nginx.conf simple pour Angular:

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

Orchestration avec Docker Compose

Une fois les Dockerfiles prêts, Docker Compose permet de définir l'ensemble de l'architecture. Le fichier docker-compose.yml décrit les services (backend, frontend, base de données), leurs dépendances, les ports, les volumes et les réseaux.

Un exemple typique inclurait trois services : backend (Spring Boot), frontend (Angular/Nginx) et db (par exemple, PostgreSQL).

version: '3.8'

services:
  db:
    image: postgres:13-alpine
    restart: always
    environment:
      POSTGRES_DB: ma_base_de_donnees
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    ports:
      - "5432:5432" # Mappe le port de la base de données
    volumes:
      - db_data:/var/lib/postgresql/data # Volume persistant pour les données
    networks:
      - app_network

  backend:
    build:
      context: ./backend # Chemin vers le dossier contenant le Dockerfile du backend
      dockerfile: Dockerfile
    restart: always
    environment:
      SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/ma_base_de_donnees
      SPRING_DATASOURCE_USERNAME: user
      SPRING_DATASOURCE_PASSWORD: password
      # Autres variables d'environnement Spring Boot
    ports:
      - "8080:8080" # Mappe le port du backend
    depends_on:
      - db # S'assure que la base de données démarre avant le backend
    networks:
      - app_network

  frontend:
    build:
      context: ./frontend # Chemin vers le dossier contenant le Dockerfile du frontend
      dockerfile: Dockerfile
    restart: always
    ports:
      - "4200:80" # Mappe le port du frontend (Angular/Nginx)
    depends_on:
      - backend # S'assure que le backend démarre avant le frontend (pour les appels API)
    networks:
      - app_network

# Définition des volumes pour la persistance des données
volumes:
  db_data:

# Définition du réseau partagé par tous les services
networks:
  app_network:
    driver: bridge

Dans cet exemple, il est important de noter :

• Le service db utilise une image PostgreSQL et configure les identifiants via des variables d'environnement. Un volume persistant est défini pour que les données ne soient pas perdues à l'arrêt du conteneur.
• Le service backend est construit à partir de son Dockerfile situé dans le sous-dossier ./backend. Les variables d'environnement sont utilisées pour configurer la connexion à la base de données, en utilisant le nom du service db comme hôte.
• Le service frontend est également construit depuis son Dockerfile dans le sous-dossier ./frontend. Il expose le port 80 de Nginx sur le port 4200 de la machine hôte.
• depends_on garantit l'ordre de démarrage des services, bien que cela ne gère pas la disponibilité des applications à l'intérieur des conteneurs.
• Un réseau app_network est créé pour permettre aux services de communiquer entre eux en utilisant leurs noms de service comme hôtes (par exemple, db pour le backend).

Construction et déploiement de l'application Full Stack

Une fois les Dockerfiles et le docker-compose.yml configurés, le déploiement de l'application devient remarquablement simple. À partir du répertoire racine de votre projet (là où se trouve docker-compose.yml), utilisez les commandes suivantes :

• Construire les images et démarrer les conteneurs :

  docker-compose up --build -d

  L'option --build force la reconstruction des images si des modifications ont été apportées aux Dockerfiles. L'option -d détache les conteneurs pour qu'ils s'exécutent en arrière-plan.

• Arrêter et supprimer les conteneurs, réseaux et volumes :

  docker-compose down -v

  L'option -v supprime également les volumes de données anonymes, ce qui peut être utile pour un nettoyage complet.

• Voir l'état des services :

  docker-compose ps

Conclusion

La conteneurisation d'une application Full Stack Spring Boot et Angular avec Docker Compose est une pratique moderne et efficace. Elle offre une portabilité accrue, une isolation des environnements et une simplification significative des processus de développement et de déploiement. Pour les développeurs comme Laty Gueye Samba, Développeur Full Stack à Dakar, Sénégal, expert en Java Spring Boot et Angular, l'intégration de Docker Compose dans la boîte à outils est indispensable pour construire des applications robustes et facilement gérables, répondant aux exigences des projets actuels.

En adoptant Docker Compose, les équipes peuvent réduire les problèmes de "ça marche sur ma machine" et accélérer le cycle de vie de développement logiciel, permettant de se concentrer sur l'innovation et la création de valeur pour l'utilisateur final.

Ressources Officielles :

• Documentation Docker Compose
• Get Started with Docker
• Site Officiel Spring Boot
• Documentation Angular