Retour aux articles

Mettre en place un pipeline CI/CD avec GitLab pour un projet Full Stack Java/Angular

Mettre en place un pipeline CI/CD avec GitLab pour un projet Full Stack Java/Angular | Laty Gueye Samba - Développeur Full Stack Dakar Sénégal, Expert Java Spring Boot Angular

Dans l'écosystème du développement logiciel moderne, la livraison continue de valeur est une priorité absolue. Pour les projets Full Stack, qui intègrent souvent des technologies backend et frontend distinctes, la mise en place d'un processus d'intégration et de déploiement continus (CI/CD) robuste est essentielle. Il ne s'agit plus d'un luxe, mais d'une nécessité pour garantir la qualité, la rapidité de mise sur le marché et la stabilité des applications.

GitLab, avec ses fonctionnalités CI/CD intégrées, offre une solution complète et puissante pour automatiser ces processus. En tirant parti de ses capacités, un développeur Full Stack peut transformer le cycle de vie de son application, de la phase de développement initial à la mise en production. Cet article explore les étapes clés pour configurer un pipeline CI/CD efficace avec GitLab pour un projet Full Stack combinant Java Spring Boot et Angular.

L'expertise d'un Développeur Full Stack Dakar Sénégal comme Laty Gueye Samba, Expert Java Spring Boot Angular, est souvent mise à profit pour concevoir et implémenter de tels pipelines. La maîtrise des outils comme GitLab CI/CD Full Stack Laty Gueye Samba Dakar permet d'optimiser les flux de travail et d'assurer une intégration harmonieuse entre les différentes composantes d'une application.

Fondamentaux du CI/CD avec GitLab pour les applications Full Stack

Le CI/CD avec GitLab repose sur un fichier de configuration nommé .gitlab-ci.yml, situé à la racine du dépôt. Ce fichier YAML décrit les étapes, ou "jobs", que le pipeline doit exécuter. Chaque job est assigné à une "stage", permettant d'organiser les opérations de manière séquentielle (par exemple, build, test, deploy). Les "runners" de GitLab sont les agents qui exécutent ces jobs, soit sur des machines partagées par GitLab, soit sur des infrastructures auto-hébergées.

Pour un projet Full Stack Java/Angular, le pipeline CI/CD doit gérer séparément la compilation, les tests et le packaging des deux parties de l'application. Idéalement, les artefacts de build de chaque composante devraient être disponibles pour les étapes de déploiement ultérieures. L'utilisation de caches permet d'accélérer les builds en conservant les dépendances téléchargées entre les exécutions de pipeline.

Voici un aperçu de la structure typique d'un fichier .gitlab-ci.yml pour un projet Full Stack:


stages:
  - build-backend
  - test-backend
  - build-frontend
  - test-frontend
  - package-app
  - deploy

cache:
  key: "$CI_COMMIT_REF_SLUG"
  paths:
    - backend/.m2/repository  # Cache pour les dépendances Maven du backend
    - frontend/node_modules/  # Cache pour les dépendances npm du frontend

# D'autres jobs spécifiques pour le backend et le frontend seront définis ici

Mise en œuvre du pipeline pour le Backend Java Spring Boot

La section dédiée au backend Java Spring Boot se concentrera sur la compilation du code, l'exécution des tests unitaires et d'intégration, et le packaging de l'application en un fichier JAR ou WAR exécutable. Il est recommandé d'utiliser une image Docker contenant le JDK et Maven (ou Gradle) pour garantir un environnement de build cohérent.

Un exemple de configuration pour le backend pourrait ressembler à ceci :


# Job de compilation du backend
build_backend_job:
  stage: build-backend
  image: maven:3.8.6-openjdk-17 # Utilise une image Maven avec Java 17
  script:
    - cd backend/ # Assurez-vous d'être dans le répertoire de votre backend
    - echo "Compilation du backend Spring Boot..."
    - mvn compile
  artifacts:
    expire_in: 1 hour
    paths:
      - backend/target/classes/ # Stocke les classes compilées pour les étapes suivantes

# Job de tests du backend
test_backend_job:
  stage: test-backend
  image: maven:3.8.6-openjdk-17
  script:
    - cd backend/
    - echo "Exécution des tests unitaires et d'intégration du backend..."
    - mvn test
  # Des rapports de tests JUnit peuvent être générés et visualisés dans GitLab

# Job de packaging du backend
package_backend_job:
  stage: package-app
  image: maven:3.8.6-openjdk-17
  script:
    - cd backend/
    - echo "Packaging de l'application JAR/WAR..."
    - mvn package -DskipTests # On peut sauter les tests si déjà exécutés dans une étape précédente
  artifacts:
    expire_in: 1 week
    paths:
      - backend/target/*.jar # Ou .war, l'artefact principal du backend

Il est crucial de s'assurer que les chemins (cd backend/, backend/target/) correspondent à la structure réelle du projet dans le dépôt GitLab.

Intégration du Frontend Angular et déploiement combiné

Pour le frontend Angular, le pipeline devra installer les dépendances Node.js, compiler l'application pour la production, et exécuter les tests unitaires. Une image Docker avec Node.js est le choix approprié pour cette tâche.


# Job de compilation du frontend
build_frontend_job:
  stage: build-frontend
  image: node:16 # Ou une version compatible avec Angular
  script:
    - cd frontend/ # Navigue vers le répertoire du frontend
    - echo "Installation des dépendances Angular..."
    - npm ci # npm clean install pour une installation propre
    - echo "Compilation de l'application Angular pour la production..."
    - npm run build -- --configuration=production # Adapter le script de build
  artifacts:
    expire_in: 1 week
    paths:
      - frontend/dist/my-angular-app/ # Adapter le chemin vers le dossier de sortie de votre build Angular

# Job de tests du frontend
test_frontend_job:
  stage: test-frontend
  image: node:16
  script:
    - cd frontend/
    - echo "Exécution des tests unitaires Angular..."
    - npm test -- --watch=false --browsers=ChromeHeadless # Exécute les tests en mode headless
  allow_failure: true # Les tests frontend peuvent être configurés pour ne pas bloquer le pipeline en cas d'échec mineur

# Job de déploiement combiné
deploy_app_job:
  stage: deploy
  image: docker:latest # Utilise une image Docker pour construire et pousser des images
  services:
    - docker:dind # Docker-in-Docker pour les opérations Docker
  variables:
    DOCKER_HOST: tcp://docker:2375/
    DOCKER_TLS_CERTDIR: ""
  script:
    - echo "Déploiement de l'application Full Stack..."
    # Ici, des scripts Docker peuvent être utilisés pour construire des images
    # pour le backend (contenant le JAR) et le frontend (servi par Nginx par exemple),
    # puis les pousser vers un registre Docker.
    # Exemple simplifié :
    - docker build -t registry.example.com/my-fullstack-app-backend:$CI_COMMIT_SHORT_SHA ./backend
    - docker build -t registry.example.com/my-fullstack-app-frontend:$CI_COMMIT_SHORT_SHA ./frontend/dist/my-angular-app/
    - docker login -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" registry.example.com
    - docker push registry.example.com/my-fullstack-app-backend:$CI_COMMIT_SHORT_SHA
    - docker push registry.example.com/my-fullstack-app-frontend:$CI_COMMIT_SHORT_SHA
    - echo "Des scripts de déploiement vers Kubernetes, des serveurs cloud ou d'autres infrastructures peuvent être ajoutés ici."
  rules:
    - if: '$CI_COMMIT_BRANCH == "main"' # Déploie uniquement depuis la branche principale (main ou master)

Le job de déploiement, deploy_app_job, est l'étape finale où les artefacts du backend et du frontend sont combinés et mis à disposition. Cela implique souvent la création d'images Docker distinctes pour chaque partie, qui sont ensuite poussées vers un registre et déployées sur une infrastructure cible (comme Kubernetes, des serveurs virtuels ou des plateformes PaaS).

Point de vue : développeur full stack à Dakar

Pour un développeur travaillant sur des systèmes comme des applications de gestion hospitalière ou des systèmes ERP complexes, la maîtrise de pipelines CI/CD robustes représente un avantage concurrentiel réel sur le marché technologique africain, en pleine expansion. Laty Gueye Samba, Développeur Full Stack à Dakar, observe que cette expertise est de plus en plus recherchée pour garantir la qualité et la rapidité de livraison des projets.

Conclusion

La mise en place d'un pipeline CI/CD avec GitLab pour un projet Full Stack Java/Angular est un investissement stratégique qui se traduit par une amélioration significative de la qualité logicielle, une réduction des erreurs et une accélération des cycles de livraison. En automatisant les processus de build, de test et de déploiement, les équipes de développement peuvent se concentrer sur l'innovation et la création de valeur.

L'approche détaillée ici fournit une base solide, mais chaque projet aura ses spécificités. Il est recommandé d'explorer la documentation officielle de GitLab CI/CD pour approfondir les configurations avancées, telles que les environnements de déploiement, les règles conditionnelles et l'intégration avec des outils de monitoring. Laty Gueye Samba, Développeur Full Stack à Dakar, souligne l'importance de l'adaptation constante de ces pipelines aux besoins évolutifs des projets et des infrastructures.

Ressources officielles :

À propos de l'auteur

Laty Gueye Samba est développeur Full Stack basé à Dakar, Sénégal. Spécialiste des écosystèmes Java / Spring Boot et Angular.

Contact : latygueyesamba@gmail.com  |  Dakar, Sénégal