Déployer une application Spring Boot 3 et Angular 17+ avec Docker Compose

Dans l'écosystème du développement web moderne, les applications sont de plus en plus souvent conçues comme des systèmes distribués, avec un backend robuste et un frontend dynamique. Pour Laty Gueye Samba, Développeur Full Stack à Dakar, Sénégal, expert en Java Spring Boot et Angular, la maîtrise du déploiement de ces architectures est essentielle. La combinaison Spring Boot 3 et Angular 17+ offre une puissance inégalée pour créer des applications performantes, mais leur déploiement peut présenter des défis complexes, notamment en matière de gestion des dépendances, des environnements et de l'orchestration des services.

C'est là que Docker et Docker Compose entrent en jeu. Ces outils révolutionnent la manière dont les applications sont packagées, déployées et exécutées. En encapsulant chaque service (backend, frontend, base de données) dans des conteneurs isolés, Docker garantit une cohérence et une portabilité optimales. Docker Compose, quant à lui, permet de définir et d'exécuter des applications multi-conteneurs d'une seule commande, simplifiant considérablement le processus de déploiement d'une application Docker Compose Spring Boot Angular.

Cet article explore une approche structurée pour déployer efficacement une application Spring Boot 3 et Angular 17+ en utilisant Docker Compose. Il couvrira les étapes clés, de la dockerisation de chaque composant à leur orchestration harmonieuse, offrant ainsi une solution robuste et évolutive pour les développeurs Full Stack à Dakar et au-delà.

Préparation des applications pour Docker

La première étape consiste à créer un fichier Dockerfile pour chaque composant de l'application : le backend Spring Boot et le frontend Angular. Ces fichiers décrivent comment construire l'image Docker de chaque service.

Dockerisation de l'application Spring Boot 3

Pour l'application Spring Boot, l'objectif est de créer une image Docker légère contenant le fichier JAR exécutable et la machine virtuelle Java (JVM) nécessaire. L'utilisation d'une construction multi-étapes est fortement recommandée pour réduire la taille finale de l'image.

# Stage 1: Construction de l'application Spring Boot
FROM maven:3.9.5-amazoncorretto-17 AS build
WORKDIR /app
COPY pom.xml .
COPY src ./src
RUN mvn clean package -DskipTests

# Stage 2: Création de l'image finale
FROM amazoncorretto:17-alpine-jdk
WORKDIR /app
COPY --from=build /app/target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]
    

Ce Dockerfile utilise Maven pour compiler l'application et crée une image finale basée sur une JVM Alpine, connue pour sa petite taille.

Dockerisation de l'application Angular 17+

Pour l'application Angular, le processus implique la compilation des fichiers statiques et leur service via un serveur web léger comme Nginx. Une construction multi-étapes est également bénéfique ici.

# Stage 1: Construction de 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

# Stage 2: Service de l'application Angular avec Nginx
FROM nginx:alpine
COPY --from=build /app/dist/votre-nom-app-angular /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
    

Il est crucial de remplacer votre-nom-app-angular par le nom réel du répertoire de sortie de votre build Angular (souvent le nom de votre projet). Un fichier nginx.conf est également nécessaire pour configurer Nginx afin de servir les fichiers Angular et de proxifier les requêtes API vers le backend Spring Boot.

# nginx.conf
server {
  listen 80;
  server_name localhost;

  root /usr/share/nginx/html;
  index index.html;
  try_files $uri $uri/ /index.html;

  location /api {
    proxy_pass http://backend:8080; # 'backend' est le nom du service Spring Boot dans docker-compose
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}
    

Orchestration avec Docker Compose

Une fois les Dockerfiles pour Spring Boot et Angular créés, l'étape suivante consiste à les orchestrer à l'aide de Docker Compose. Le fichier docker-compose.yml décrit tous les services, réseaux et volumes nécessaires à l'application. Pour un Développeur Full Stack, ce fichier devient la "recette" pour démarrer l'environnement complet.

L'exemple suivant inclut un service de base de données PostgreSQL, souvent un composant essentiel des applications métier complexes.

version: '3.8'

services:
  backend:
    build: ./backend # Chemin vers le Dockerfile de Spring Boot
    ports:
      - "8080:8080"
    environment:
      SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/mydatabase
      SPRING_DATASOURCE_USERNAME: user
      SPRING_DATASOURCE_PASSWORD: password
      SPRING_JPA_HIBERNATE_DDL_AUTO: update
    depends_on:
      - db
    networks:
      - app-network

  frontend:
    build: ./frontend # Chemin vers le Dockerfile d'Angular
    ports:
      - "80:80"
    depends_on:
      - backend
    networks:
      - app-network

  db:
    image: postgres:14-alpine
    environment:
      POSTGRES_DB: mydatabase
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - db_data:/var/lib/postgresql/data
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  db_data:
    

Dans ce fichier docker-compose.yml :

• backend: Construit l'image Spring Boot, expose le port 8080, et configure les variables d'environnement pour la connexion à la base de données.
• frontend: Construit l'image Angular, expose le port 80 (pour Nginx), et dépend du backend pour les requêtes API.
• db: Utilise une image PostgreSQL officielle, configure la base de données et les identifiants, et utilise un volume persistant pour les données.
• Les networks permettent aux services de communiquer entre eux en utilisant leurs noms de service (ex: http://db:5432 pour le backend).
• Les volumes garantissent que les données de la base de données ne sont pas perdues si le conteneur est supprimé.

Déploiement et gestion

Avec le docker-compose.yml configuré, le déploiement devient remarquablement simple. À partir du répertoire contenant le fichier, il suffit d'exécuter une seule commande :

docker compose up --build -d
    

Cette commande va construire les images (si elles n'existent pas ou si des modifications ont été apportées), puis démarrer tous les services en arrière-plan (-d pour "detached mode"). L'application sera alors accessible via http://localhost dans le navigateur (pour le frontend Angular) et http://localhost:8080 (pour le backend Spring Boot, généralement via l'API). Pour arrêter les services, la commande est tout aussi simple :

docker compose down
    

La flexibilité de Docker Compose est un atout majeur pour Laty Gueye Samba et d'autres Développeurs Full Stack à Dakar, notamment pour la gestion de différents environnements (développement, staging, production) via des fichiers docker-compose.yml spécifiques ou l'utilisation de variables d'environnement.

Conclusion

Le déploiement d'une application Spring Boot 3 et Angular 17+ avec Docker Compose est une approche moderne et puissante qui simplifie considérablement la complexité inhérente aux architectures distribuées. Cette méthode offre une portabilité exceptionnelle, une isolation des environnements et une gestion simplifiée des dépendances, des atouts cruciaux pour tout Développeur Full Stack.

En adoptant Docker Compose, les développeurs peuvent se concentrer davantage sur la logique métier et moins sur les problèmes d'infrastructure, garantissant ainsi des cycles de développement plus rapides et des déploiements plus fiables. Laty Gueye Samba, Développeur Full Stack Java Spring Boot + Angular à Dakar, met en avant cette technologie comme un pilier pour la construction et le déploiement d'applications robustes et évolutives.

Pour aller plus loin, il est recommandé de consulter les documentations officielles :

• Documentation officielle de Docker
• Documentation officielle de Docker Compose
• Documentation officielle de Spring Boot
• Documentation officielle d'Angular