Conteneuriser une application Full Stack (Spring Boot, Angular, PostgreSQL) avec Docker Compose

Dans l'écosystème du développement logiciel moderne, la complexité des architectures applicatives ne cesse de croître. Les applications Full Stack, combinant un backend robuste comme Spring Boot, un frontend dynamique avec Angular, et une base de données relationnelle telle que PostgreSQL, nécessitent des méthodes de déploiement et de gestion qui garantissent cohérence, portabilité et scalabilité. C'est précisément là que la conteneurisation avec Docker, orchestrée par Docker Compose, révèle toute sa puissance.

Pour un développeur Full Stack comme Laty Gueye Samba, expert Java Spring Boot et Angular basé à Dakar, l'optimisation des processus de développement et de déploiement est une priorité. La maîtrise de Docker Compose permet de transformer une configuration de développement complexe en un environnement portable et reproductible, facilitant ainsi la collaboration et l'intégration continue. Cet article explore comment conteneuriser une application Full Stack complète, de la base de données au frontend, en utilisant les outils de Docker.

Préparer les services pour la conteneurisation

Avant d'orchestrer l'ensemble des services, chaque composant de l'application (backend Spring Boot, frontend Angular et base de données PostgreSQL) doit être prêt pour la conteneurisation. Cela implique généralement la création d'un Dockerfile pour le backend et le frontend, tandis que PostgreSQL peut être utilisé directement à partir d'une image officielle.

Backend Spring Boot : le Dockerfile Java

Pour l'application Spring Boot, un Dockerfile permet de construire une image légère contenant le JAR exécutable de l'application et une machine virtuelle Java (JVM) optimisée. Il est recommandé d'utiliser une image de base minimaliste pour réduire la taille finale.

# Utilisation d'une image OpenJDK plus légère
FROM openjdk:17-jdk-slim

# Spécifie le répertoire de travail dans le conteneur
WORKDIR /app

# Copie le JAR de l'application compilée dans le conteneur
# Assurez-vous que votre application Spring Boot est déjà packagée en .jar
COPY target/votre-application-backend.jar votre-application-backend.jar

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

# Commande pour démarrer l'application Spring Boot
CMD ["java", "-jar", "votre-application-backend.jar"]

Frontend Angular : le Dockerfile Nginx

L'application Angular, une fois construite, se compose de fichiers statiques (HTML, CSS, JavaScript). Elle est généralement servie par un serveur web léger comme Nginx. Le Dockerfile pour Angular se chargera de construire l'application puis de la placer dans un conteneur Nginx.

# Première étape : construire l'application Angular
FROM node:18-alpine AS build

WORKDIR /app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
RUN npm run build --configuration production

# Deuxième étape : servir l'application avec Nginx
FROM nginx:alpine

# Copie les fichiers de build Angular dans le répertoire de Nginx
COPY --from=build /app/dist/votre-application-frontend /usr/share/nginx/html

# Copie la configuration Nginx personnalisée (optionnel)
# Si vous avez un fichier nginx.conf, copiez-le ici :
# COPY nginx.conf /etc/nginx/conf.d/default.conf

# Expose le port par défaut de Nginx
EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Orchestration de l'écosystème avec Docker Compose

Avec les Dockerfile en place, Docker Compose entre en jeu pour définir et exécuter l'application multi-conteneurs. Un fichier docker-compose.yml décrit tous les services, leurs images, leurs ports, leurs dépendances et leurs réseaux. Ce fichier est la pierre angulaire d'une architecture conteneurisée portable.

version: '3.8'

services:
  # Service de base de données PostgreSQL
  db:
    image: postgres:13
    restart: always
    environment:
      POSTGRES_DB: ma_base_de_donnees
      POSTGRES_USER: utilisateur_db
      POSTGRES_PASSWORD: mot_de_passe_secret
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "5432:5432" # Optionnel, pour accéder directement à la base de données depuis l'hôte

  # Service Backend Spring Boot
  backend:
    build:
      context: ./backend # Chemin vers le répertoire de votre application Spring Boot
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    environment:
      # Configuration de la connexion à la base de données
      SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/ma_base_de_donnees
      SPRING_DATASOURCE_USERNAME: utilisateur_db
      SPRING_DATASOURCE_PASSWORD: mot_de_passe_secret
      SPRING_JPA_HIBERNATE_DDL_AUTO: update # ou none, create, create-drop
    depends_on:
      - db # S'assure que la base de données est démarrée avant le backend
    networks:
      - app-network

  # Service Frontend Angular (servi par Nginx)
  frontend:
    build:
      context: ./frontend # Chemin vers le répertoire de votre application Angular
      dockerfile: Dockerfile
    ports:
      - "4200:80" # Mappe le port 4200 de l'hôte au port 80 de Nginx dans le conteneur
    depends_on:
      - backend # Le frontend peut dépendre du backend si des appels API sont faits au démarrage
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  postgres_data:

Dans cet exemple de docker-compose.yml :

• Le service db utilise l'image officielle PostgreSQL, configure les variables d'environnement nécessaires et persiste les données grâce à un volume nommé postgres_data.
• Le service backend est construit à partir de son Dockerfile. Il expose le port 8080 et se connecte à la base de données via le nom de service db (Docker Compose gère la résolution DNS au sein du réseau).
• Le service frontend construit l'application Angular et la sert via Nginx sur le port 80 du conteneur, mappé au port 4200 de la machine hôte.
• Un réseau personnalisé app-network est créé pour permettre aux services de communiquer entre eux de manière isolée.

Démarrer l'application Full Stack

Une fois le fichier docker-compose.yml configuré, le démarrage de l'ensemble de l'application est simplifié à une seule commande depuis le répertoire contenant ce fichier :

docker compose up --build

L'option --build assure que les images des services (backend et frontend) sont reconstruites si des modifications ont été apportées à leurs Dockerfile ou à leurs sources. Pour arrêter et nettoyer l'environnement :

docker compose down

Conclusion

La conteneurisation d'une application Full Stack (Spring Boot, Angular, PostgreSQL) avec Docker Compose simplifie grandement la gestion des dépendances, assure la cohérence des environnements et accélère le cycle de développement et de déploiement. Elle permet à des développeurs comme Laty Gueye Samba, Développeur Full Stack à Dakar, de se concentrer sur la logique métier plutôt que sur les problématiques d'infrastructure. En adoptant Docker Compose, les équipes bénéficient d'une solution robuste pour orchestrer des architectures complexes, favorisant ainsi l'innovation et l'efficacité.

Pour approfondir vos connaissances sur les outils mentionnés, n'hésitez pas à consulter les ressources officielles :

• Documentation officielle de Docker Compose
• Site officiel de Spring Boot
• Site officiel d'Angular
• Site officiel de PostgreSQL