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

Dans le monde actuel du développement logiciel, la livraison rapide et fiable d'applications est devenue une exigence fondamentale. Les applications Full Stack, combinant un backend robuste comme Spring Boot et un frontend dynamique tel qu'Angular, présentent des défis de déploiement qui peuvent être efficacement résolus par la conteneurisation. Cette approche garantit une cohérence de l'environnement, de la phase de développement à la production.

La conteneurisation, grâce à des outils comme Docker, permet d'empaqueter une application et toutes ses dépendances dans une unité isolée et portable : le conteneur. Pour les applications multipartis comme une solution Spring Boot et Angular, l'orchestration de plusieurs conteneurs devient cruciale. C'est là que Docker Compose intervient, simplifiant la définition et l'exécution d'applications Docker multi-conteneurs.

Laty Gueye Samba, Développeur Full Stack à Dakar, expert en Java Spring Boot et Angular, utilise régulièrement Docker Compose pour rationaliser le développement et le déploiement de ses applications. Ce guide technique explore les étapes essentielles pour conteneuriser une application Full Stack Spring Boot et Angular en utilisant Docker Compose, offrant ainsi aux développeurs une méthode efficace pour gérer leurs projets complexes.

Préparation des applications Spring Boot et Angular pour la conteneurisation

Avant de pouvoir orchestrer une application Full Stack avec Docker Compose, chaque composant (backend Spring Boot, frontend Angular) doit être préparé individuellement pour être exécuté dans un conteneur Docker. Cela implique la création d'un Dockerfile pour chaque service.

Application Spring Boot (Backend)

Pour l'application Spring Boot, le Dockerfile se charge de compiler le projet en un fichier JAR exécutable et de l'exécuter dans un conteneur. Il est recommandé d'utiliser une image de base légère comme OpenJDK.

# Utilise une image de base OpenJDK pour Java 17
FROM openjdk:17-jdk-slim

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

# Copie le fichier JAR de l'application (supposant qu'il est déjà construit)
# Avant de construire l'image Docker, exécutez "mvn clean package" dans votre projet Spring Boot
COPY target/*.jar app.jar

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

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

Application Angular (Frontend)

Pour l'application Angular, le processus implique généralement de construire l'application pour la production, puis de servir les fichiers statiques résultants via un serveur web léger comme Nginx. Un Dockerfile multi-étapes est souvent employé pour réduire la taille de l'image finale.

# Étape 1 : 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

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

# Copie la configuration Nginx personnalisée
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copie les fichiers statiques de l'application Angular construits depuis l'étape précédente
COPY --from=build /app/dist/ /usr/share/nginx/html

# Expose le port 80 pour Nginx
EXPOSE 80

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

Un exemple de nginx.conf minimal pour une application Angular :

server {
    listen 80;
    server_name localhost;

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

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

Orchestration de l'application Full Stack avec Docker Compose

Une fois les Dockerfiles créés pour le backend Spring Boot et le frontend Angular, Docker Compose permet de définir, d'exécuter et de connecter ces services (ainsi qu'une base de données) à travers un unique fichier docker-compose.yml. Ce fichier configure l'ensemble de l'environnement de l'application Full Stack.

Pour un développeur Full Stack à Dakar, la maîtrise de Docker Compose est essentielle pour gérer des environnements de développement et de production complexes, comme ceux rencontrés dans des applications de gestion des risques ou des systèmes ERP.

version: '3.8'

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

  # Service backend Spring Boot
  backend:
    build:
      context: ./backend # Chemin vers le répertoire de votre projet Spring Boot
      dockerfile: Dockerfile
    depends_on:
      - db # S'assure que la base de données démarre avant le backend
    environment:
      SPRING_DATASOURCE_URL: jdbc:postgresql://db:5432/mydatabase
      SPRING_DATASOURCE_USERNAME: myuser
      SPRING_DATASOURCE_PASSWORD: mypassword
      SPRING_JPA_HIBERNATE_DDL_AUTO: update # Ou none, en fonction de votre stratégie
    ports:
      - "8080:8080" # Mappe le port 8080 du conteneur au port 8080 de l'hôte

  # Service frontend Angular (via Nginx)
  frontend:
    build:
      context: ./frontend # Chemin vers le répertoire de votre projet Angular
      dockerfile: Dockerfile
    depends_on:
      - backend # Le frontend peut avoir besoin du backend pour des appels API
    ports:
      - "4200:80" # Mappe le port 80 (Nginx) du conteneur au port 4200 de l'hôte
    environment:
      # Si votre application Angular a besoin de l'URL du backend, gérez-le via des variables d'environnement
      # ou un proxy Nginx si l'API est sur un sous-chemin du frontend.
      # Exemple : API_URL=http://backend:8080
      # Cela dépend de la configuration de votre application Angular
      API_BASE_URL: http://localhost:8080 # ou une autre URL si déployé

volumes:
  db-data: # Volume persistant pour les données de la base de données

Pour lancer l'ensemble de l'application, il suffit de naviguer dans le répertoire contenant le fichier docker-compose.yml et d'exécuter :

docker compose up --build

L'option --build assure que les images sont reconstruites si des modifications ont été apportées aux Dockerfiles ou au code source. Pour arrêter et supprimer les conteneurs, les réseaux et les volumes créés par up, utilisez :

docker compose down -v

Conclusion

La conteneurisation d'une application Full Stack Spring Boot et Angular avec Docker Compose simplifie considérablement les processus de développement, de test et de déploiement. En définissant chaque service (backend, frontend, base de données) de manière isolée et en orchestrant leur interaction via un fichier docker-compose.yml, les développeurs peuvent garantir la portabilité et la reproductibilité de leur environnement.

Laty Gueye Samba, Développeur Full Stack à Dakar et expert en Java Spring Boot et Angular, souligne l'importance d'adopter ces pratiques pour bâtir des applications robustes et facilement gérables. Cette approche non seulement optimise le workflow de développement mais prépare également l'application à des déploiements plus complexes sur des infrastructures cloud.

Pour approfondir vos connaissances sur ces technologies, il est recommandé de consulter les ressources officielles :

• Documentation officielle de Docker Compose
• Guide de démarrage de Docker
• Spring Boot et Docker
• Guide de déploiement Angular