Stratégies de déploiement d'applications monolithiques Spring Boot et Angular

Le développement d'applications web modernes implique souvent un couplage entre un backend robuste et un frontend dynamique. Pour les développeurs Full Stack, l'architecture monolithique, combinant un backend Spring Boot et un frontend Angular, demeure une approche pertinente pour de nombreux projets. Bien que les microservices gagnent en popularité, la simplicité de gestion et la facilité de déploiement initial d'un monolithe conservent leur attrait, en particulier pour les startups ou les applications métier à portée définie.

Laty Gueye Samba, développeur Full Stack expert en Java Spring Boot et Angular basé à Dakar, Sénégal, observe que cette architecture est couramment employée dans des contextes variés, allant des applications de gestion hospitalière aux systèmes ERP. La clé du succès réside alors dans la mise en place de stratégies de déploiement efficaces et fiables, garantissant la performance et la disponibilité de l'application.

Cet article explore diverses stratégies et meilleures pratiques pour le déploiement d'applications monolithiques Spring Boot et Angular, en se concentrant sur l'intégration du frontend et du backend, la conteneurisation et l'automatisation du processus.

Intégration et Packaging du Monolithe

Lorsqu'il s'agit d'un monolithe combinant Spring Boot et Angular, la première étape cruciale est de décider comment intégrer ces deux parties pour former une unité déployable. Deux approches principales se distinguent :

1. Intégration des Ressources Angular dans le JAR/WAR Spring Boot

Cette méthode consiste à packager les fichiers statiques générés par Angular (HTML, CSS, JavaScript) directement dans le fichier JAR ou WAR de l'application Spring Boot. Le serveur embarqué de Spring Boot (Tomcat par défaut) est alors responsable de servir à la fois les API REST du backend et les ressources statiques du frontend.

Le processus typique implique :

• La construction du projet Angular, qui génère les fichiers statiques optimisés dans un répertoire (généralement dist/your-app-name).
• La copie de ces fichiers dans le répertoire de ressources statiques de Spring Boot (par exemple, src/main/resources/static ou src/main/resources/public) avant la phase de packaging du backend.

Un exemple de configuration Maven pour automatiser la construction d'Angular et la copie des fichiers pourrait impliquer l'utilisation du plugin frontend-maven-plugin :

<build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.12.1</version>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v16.14.0</nodeVersion>
                        <npmVersion>8.3.1</npmVersion>
                    </configuration>
                </execution>
                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>
                <execution>
                    <id>npm run build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build -- --output-path=../target/classes/static</arguments>
                    </configuration>
                </execution>
            </executions>
        </plugin>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

Pour la configuration Spring Boot, il est souvent nécessaire d'ajouter un contrôleur pour rediriger toutes les routes non reconnues par le backend vers l'index.html d'Angular, gérant ainsi le routage côté client :

@Controller
public class ViewController {

    @RequestMapping(value = "/{path:[^\\.]*}")
    public String redirect() {
        // Redirige toutes les requêtes non API vers l'index.html
        return "forward:/";
    }
}

2. Déploiement Séparé avec Reverse Proxy

Bien que moins "monolithique" au sens strict du packaging unique, cette approche est courante. Le backend Spring Boot est déployé en tant que service API, et le frontend Angular est déployé séparément en tant qu'application statique sur un serveur web léger (comme Nginx ou Apache). Un reverse proxy est alors configuré pour :

• Servir les fichiers statiques Angular.
• Transférer les requêtes d'API vers l'instance du backend Spring Boot.

Exemple de configuration Nginx pour un reverse proxy :

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /var/www/angular-app; # Chemin vers les fichiers build d'Angular
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8080/api/; # Adresse de l'application Spring Boot
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

Conteneurisation avec Docker

La conteneurisation avec Docker est une stratégie de déploiement puissante pour les applications monolithiques Spring Boot et Angular. Elle permet d'encapsuler l'application et toutes ses dépendances dans une image portable, garantissant une exécution cohérente dans n'importe quel environnement.

Un Dockerfile bien conçu peut utiliser une approche de "build multi-étapes" pour optimiser la taille de l'image finale en séparant les étapes de compilation des fichiers Angular et Java de l'environnement d'exécution final.

# Étape 1: Construire l'application Angular
FROM node:16 as angular-builder
WORKDIR /app/frontend
COPY frontend/package.json frontend/package-lock.json ./
RUN npm install
COPY frontend/ .
RUN npm run build -- --output-path=./dist --configuration=production

# Étape 2: Construire l'application Spring Boot
FROM maven:3.8.5-openjdk-17 AS maven-builder
WORKDIR /app
COPY pom.xml .
COPY src/ ./src/
# Copie les assets Angular construits par l'étape précédente
COPY --from=angular-builder /app/frontend/dist /app/src/main/resources/static
RUN mvn clean package -DskipTests

# Étape 3: Image d'exécution finale
FROM openjdk:17-jre-slim
WORKDIR /app
COPY --from=maven-builder /app/target/*.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "app.jar"]

Ce Dockerfile illustre une approche où l'application Angular est d'abord construite, puis ses fichiers statiques sont copiés dans le répertoire de ressources de l'application Spring Boot avant la construction du JAR final. L'image résultante est légère et ne contient que le JRE et le JAR de l'application.

Pipeline CI/CD pour un déploiement automatisé

L'automatisation du processus de déploiement via un pipeline d'Intégration Continue et de Déploiement Continu (CI/CD) est essentielle pour garantir des livraisons rapides et fiables. Pour une application monolithique Spring Boot et Angular, un pipeline typique inclut les étapes suivantes :

1. Source Code Management (SCM) : Les développeurs poussent leur code vers un dépôt Git (GitHub, GitLab, Bitbucket).
2. Build (Frontend) : Le pipeline déclenche la construction du projet Angular (npm install && npm run build).
3. Build (Backend) : Parallèlement ou après le frontend, le projet Spring Boot est construit (mvn clean install ou gradle build), intégrant les assets Angular si l'approche de packaging unique est choisie.
4. Tests : Exécution des tests unitaires, d'intégration et end-to-end pour les deux parties de l'application.
5. Conteneurisation : Si Docker est utilisé, une image Docker est construite à partir du Dockerfile et taguée, puis poussée vers un registre d'images (Docker Hub, GitLab Container Registry).
6. Déploiement : L'image Docker est déployée sur le serveur cible (VM, Kubernetes, ou services cloud comme AWS EC2, Azure App Service). Des outils comme Ansible, Kubernetes ou des scripts shell peuvent être utilisés pour l'orchestration.
7. Surveillance et Logging : Mise en place d'outils de surveillance pour suivre les performances et la santé de l'application.

Des outils comme Jenkins, GitLab CI/CD ou GitHub Actions sont couramment utilisés pour orchestrer ces pipelines, permettant de passer d'un simple commit de code à un déploiement en production de manière automatisée et sécurisée.

Conclusion

Le déploiement d'applications monolithiques Spring Boot et Angular, bien que parfois perçu comme une solution plus "traditionnelle", reste une stratégie efficace et viable. Qu'il s'agisse d'intégrer les deux parties au sein d'un même package ou de les déployer séparément derrière un reverse proxy, la clé est la planification et l'automatisation.

La conteneurisation avec Docker simplifie grandement le processus de déploiement en offrant portabilité et cohérence. L'intégration de pipelines CI/CD garantit enfin une livraison continue, réduisant les erreurs manuelles et accélérant la mise à disposition des nouvelles fonctionnalités. En adoptant ces stratégies, les développeurs peuvent assurer la stabilité et la performance de leurs applications, répondant ainsi aux exigences des projets modernes.

Ressources Officielles :

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