Mise en place de pipelines CI/CD complètes avec GitLab pour des applications Full Stack Spring Boot + Angular

Dans l'écosystème technologique actuel, la rapidité de livraison et la fiabilité des applications sont des facteurs clés de succès. Pour les développeurs Full Stack travaillant avec des technologies robustes comme Spring Boot pour le backend et Angular pour le frontend, l'intégration continue (CI) et le déploiement continu (CD) ne sont plus une option, mais une nécessité. La mise en place de pipelines CI/CD complètes permet d'automatiser les processus de build, de test et de déploiement, réduisant ainsi les erreurs humaines et accélérant le cycle de développement.

Cet article explore comment mettre en œuvre des pipelines CI/CD efficaces en utilisant GitLab, une plateforme DevOps de premier plan, pour des applications Full Stack combinant Spring Boot et Angular. En suivant les meilleures pratiques, Laty Gueye Samba, Développeur Full Stack basé à Dakar, Sénégal, et expert en Java Spring Boot et Angular, met en lumière les étapes essentielles pour construire un système robuste qui garantit des déploiements fluides et une qualité logicielle constante. L'objectif est de fournir une feuille de route claire pour l'automatisation de vos projets, depuis le commit initial jusqu'à la mise en production.

Les Fondamentaux d'une Pipeline CI/CD GitLab pour le Full Stack

Une pipeline CI/CD GitLab est définie par un fichier .gitlab-ci.yml situé à la racine du dépôt. Ce fichier orchestre une série de jobs exécutés en différentes étapes (stages) pour automatiser le cycle de vie de l'application. Pour une application Full Stack Spring Boot + Angular, il est crucial de structurer la pipeline de manière à traiter indépendamment mais séquentiellement les deux parties de l'application, tout en assurant leur cohérence.

Définition des Stages

Il est recommandé de définir des stages clairs pour chaque phase du processus. Une configuration typique pourrait inclure :

• build: Compiler le code source du backend et du frontend.
• test: Exécuter les tests unitaires et d'intégration pour les deux parties.
• package: Créer les artefacts déployables (JAR pour Spring Boot, fichiers statiques pour Angular).
• deploy: Déployer l'application sur les environnements cibles (développement, staging, production).

Voici un exemple de définition de stages dans .gitlab-ci.yml :

stages:
  - build
  - test
  - package
  - deploy

Image de Base et Services

Chaque job s'exécute dans un environnement Docker spécifié par une image. Pour une application Full Stack, il peut être nécessaire d'utiliser des images différentes ou de combiner des outils spécifiques. Par exemple, une image avec Java (pour Spring Boot) et Node.js (pour Angular) pourrait être utilisée, ou des jobs séparés avec leurs propres images optimisées.

Construire et Tester l'Application Spring Boot (Backend)

Le backend Spring Boot est généralement construit à l'aide de Maven ou Gradle. La pipeline CI/CD doit s'assurer que le code compile, que les dépendances sont résolues et que tous les tests passent.

Job de Build et de Test du Backend

Ce job compile le projet Spring Boot et exécute les tests unitaires et d'intégration. L'utilisation d'une image Docker contenant le JDK et Maven (ou Gradle) est essentielle.

variables:
  MAVEN_OPTS: "-Dmaven.repo.local=$CI_PROJECT_DIR/.m2/repository"

cache:
  paths:
    - .m2/repository

build_backend:
  stage: build
  image: maven:3.8.7-jdk-11 # ou une image Gradle
  script:
    - echo "Building Spring Boot backend..."
    - mvn clean package -DskipTests
  artifacts:
    paths:
      - backend/target/*.jar
    expire_in: 1 day

test_backend:
  stage: test
  image: maven:3.8.7-jdk-11
  script:
    - echo "Running backend tests..."
    - mvn test
  needs: ["build_backend"]

Dans des contextes où des applications métier complexes ou des systèmes ERP sont développés, la robustesse des tests backend est primordiale. L'automatisation des tests garantit que les nouvelles fonctionnalités ne régressent pas les existantes.

Conteneurisation (Packaging) du Backend

Pour un déploiement moderne, conteneuriser l'application Spring Boot avec Docker est une pratique courante. Ce job construit l'image Docker du backend.

package_backend:
  stage: package
  image: docker:latest
  services:
    - docker:dind
  script:
    - echo "Building Docker image for backend..."
    - docker build -t $CI_REGISTRY_IMAGE/backend:$CI_COMMIT_SHORT_SHA backend/
    - docker push $CI_REGISTRY_IMAGE/backend:$CI_COMMIT_SHORT_SHA
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  needs: ["test_backend"]

Le $CI_REGISTRY_IMAGE est une variable prédéfinie par GitLab, pointant vers le registre d'images Docker interne au projet.

Automatiser le Frontend Angular : Build, Test et Déploiement Statique

Le frontend Angular nécessite Node.js et npm (ou yarn) pour son processus de build et de test. Le déploiement est souvent une question de servir des fichiers statiques.

Job de Build et de Test du Frontend

Ce job installe les dépendances npm, compile le projet Angular et exécute les tests.

cache:
  paths:
    - frontend/node_modules/

build_frontend:
  stage: build
  image: node:16 # ou une version plus récente
  script:
    - echo "Building Angular frontend..."
    - cd frontend
    - npm install
    - npm run build --prod --base-href=/
  artifacts:
    paths:
      - frontend/dist/frontend/ # Assurez-vous que ce chemin correspond à votre configuration Angular
    expire_in: 1 day

test_frontend:
  stage: test
  image: node:16
  script:
    - echo "Running frontend tests..."
    - cd frontend
    - npm install # Pour s'assurer que les dépendances sont là si le cache n'est pas utilisé
    - npm test -- --watch=false --browsers=ChromeHeadless
  needs: ["build_frontend"]

Pour des projets comme des applications de gestion des risques ou des plateformes de gestion hospitalière, une interface utilisateur robuste et bien testée est primordiale pour l'expérience utilisateur et la fiabilité des données.

Déploiement Statique du Frontend

Les fichiers statiques générés par Angular peuvent être déployés sur un serveur web (Nginx, Apache), un service de stockage d'objets (AWS S3, Azure Blob Storage) ou un service de CDN.

deploy_frontend_dev:
  stage: deploy
  image: alpine/helm:3.7.1 # Ou toute image avec des outils de déploiement (rsync, aws cli, etc.)
  script:
    - echo "Deploying Angular frontend to dev environment..."
    # Exemple de déploiement SCP pour des fichiers statiques
    - apk add rsync openssh-client
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add - > /dev/null
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - ssh-keyscan -H $DEV_SERVER_IP >> ~/.ssh/known_hosts
    - rsync -avz --delete frontend/dist/frontend/ user@$DEV_SERVER_IP:/var/www/html/frontend/
  environment:
    name: development
    url: https://dev.example.com
  rules:
    - if: $CI_COMMIT_BRANCH == "develop"
  needs: ["build_frontend"]

Conclusion

La mise en place de pipelines CI/CD complètes avec GitLab pour des applications Full Stack Spring Boot + Angular est un investissement stratégique qui se traduit par une amélioration significative de la qualité logicielle, une réduction du temps de mise sur le marché et une plus grande sérénité pour les équipes de développement. En automatisant les tâches répétitives, les développeurs peuvent se concentrer sur l'innovation et la création de valeur.

Laty Gueye Samba, Développeur Full Stack à Dakar, Sénégal, expert Java Spring Boot et Angular, encourage l'exploration et l'implémentation de ces pratiques. L'intégration de Docker pour la conteneurisation et l'utilisation judicieuse des stages et jobs dans .gitlab-ci.yml sont des piliers pour bâtir des infrastructures logicielles résilientes et performantes. La maîtrise de ces outils est essentielle pour tout Développeur Full Stack souhaitant exceller dans le paysage DevOps.

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

• Documentation GitLab CI/CD
• Spring Boot avec Docker
• Guide de déploiement Angular