Image de couverture d’un tutoriel sur l’intégration de Kafka dans une application fullstack avec Spring Boot, Docker, GitLab CI.

Créer une application moderne avec Kafka et Spring Boot : architecture, composants et plan de projet (1/6)

Vous souhaitez comprendre concrètement comment intégrer Apache Kafka dans une application moderne ?
Ce tutoriel est fait pour vous. Si vous découvrez Kafka, il s’agit d’une plateforme de streaming distribuée très utilisée. Ainsi, elle gère des flux de données en temps réel, la communication entre microservices ou la collecte d’événements à grande échelle. Par conséquent, vous pouvez consulter notre article dédié pour en savoir plus : Apache Kafka, le guide complet pour bien débuter.

Dans ce tutoriel, nous allons justement expérimenter Kafka dans un contexte “presque réel”. Pour ce faire, nous allons développer une mini-application de messagerie sociale. Plus précisément, elle sera fullstack (Java Spring Boot, Kafka, MySQL, Vue.js) et aura un environnement Dockerisé. De plus, l’ensemble sera structuré comme un projet professionnel moderne.

Ce projet-exercice a pour objectif principal de vous familiariser avec plusieurs aspects clés, notamment :

  • L’intégration de Kafka dans un backend Spring Boot
  • La communication entre services et bases de données
  • Le déploiement local via Docker Compose

L’interface utilisateur côté frontend reste simple, cela est volontaire. En d’autres termes, le but est d’illustrer le flux complet du message : de la saisie à la persistance et à la diffusion via Kafka.

Un tutoriel découpé en plusieurs étapes

Afin d’assurer une meilleure lisibilité, nous avons choisi de découper ce tutoriel en plusieurs articles. À cet égard, chacun abordera une phase clé du projet. Concrètement, cela va de la configuration initiale jusqu’à la mise en production. De cette manière, vous pourrez alors progresser à votre rythme, tout en suivant une structure logique et cohérente. De surcroît, chaque étape s’appuiera sur la précédente, formant ainsi un chemin d’apprentissage fluide.

👉 Voici le plan que nous allons suivre :

  1. Créer une application moderne avec Kafka et Spring Boot : architecture, composants et plan de projet (1/6)
    Cette première partie pose les bases du projet. Elle présente l’architecture globale et les prérequis nécessaires. (vous êtes ici)
  2. Mettre en place un environnement de développement avec Docker, Kafka et MySQL pour une app Java Fullstack (2/6)
    Nous configurerons et lancerons MySQL et Kafka en local grâce à Docker Compose.
  3. Construire un backend Spring Boot structuré : modèle, repository et configuration Kafka (3/6)
    Cette section se concentrera sur la création des entités, des repositories et des contrôleurs de notre API Spring Boot.
  4. Implémenter la logique métier avec Kafka et Spring Boot : production, consommation, tests et Dockerisation (4/6)
    Nous implémenterons le service métier. De plus, nous intégrerons les fonctionnalités de production et consommation Kafka.
  5. Développer un frontend Vue.js moderne connecté au backend Spring Boot via API REST (5/6)
    Nous construirons une interface utilisateur simple avec Vue.js. Ensuite, nous la packagerons dans un conteneur Docker.
  6. Mettre en place un pipeline CI/CD avec GitLab pour automatiser les tests et déploiements de l’application (6/6)
    Pour finir, nous automatiserons les builds, les tests et le déploiement de notre application avec GitLab CI/CD.

En complément, chaque article contiendra des extraits de code, des captures d’écran et des conseils pratiques.

Les outils à installer avant de commencer

Avant de commencer ce tutoriel, assurez-vous de disposer des outils et connaissances suivants. De ce fait, vous mettrez toutes les chances de votre côté pour bien suivre chaque étape.

Java 17 ou supérieur : Spring Boot 3.x exige Java 17 au minimum. Nous avons choisi Java 21 pour cet exercice. Il convient de noter, cependant, que toute version récente (17, 21…) fonctionne parfaitement. À cette fin, pour vérifier votre version, tapez :

java -version

Docker & Docker Compose : Docker facilite grandement l’orchestration des services du projet. Cela inclut, par exemple, MySQL, Kafka et le backend Spring Boot. Par conséquent, pour l’installer, suivez le guide officiel.

Node.js et npm : L’interface utilisateur repose sur Vue.js. Par conséquent, elle nécessite Node.js (version 18 ou plus) et npm. Il est donc essentiel de vérifier votre installation. Pour ce faire, utilisez :

node -v
npm -v

Un éditeur de code moderne : Nous recommandons Visual Studio Code ou IntelliJ IDEA. Effectivement, ces outils offrent des extensions pour Java et JavaScript. Cela facilite ainsi grandement le développement. C’est pourquoi nous les recommandons.

Git (optionnel) : L’utilisation de Git n’est pas obligatoire pour tester ce projet localement. Cependant, Git est très utile pour versionner votre code. En outre, il permet la collaboration et la découverte de la CI/CD avec GitLab.

Connaissances recommandées

Notions de base sur Spring Boot
Le backend s’appuie sur Spring Boot 3.x. Par conséquent, une compréhension générale du framework vous aidera à suivre plus facilement.

Bases de Docker
Savoir lancer un conteneur, lire un fichier docker-compose.yml ou manipuler des variables d’environnement sera utile. Il faut savoir que cela est même fortement recommandé. En somme, une bonne maîtrise est un atout.

Développement frontend JavaScript
Vous n’avez pas besoin d’être expert en Vue.js. Néanmoins, connaître les bases du développement web et les appels API est un avantage certain.

Git et CI/CD
Enfin, si vous souhaitez aller plus loin avec l’intégration continue (CI) sur GitLab, des notions de Git sont également recommandées.

💡 Code source complet de l’exercice

Vous pouvez consulter et cloner le code source correspondant à ce tutoriel sur GitLab :

👉gitlab.com/springboot-kafka-social-lab/tag=v1.0.0

Ce tag v1.0.0 correspond à la version réalisée dans ce tutoriel.
Le projet continuera à évoluer, donc vous pouvez aussi consulter la branche main ou develop pour suivre les mises à jour ultérieures.

Architecture de l’application

L’objectif de cet exercice est de vous familiariser avec l’architecture d’une application moderne. Il s’agit, en effet, d’un modèle fréquemment rencontré en entreprise. Ainsi, le projet demeure simple et accessible à tous. En outre, l’application est scindée en plusieurs briques indépendantes. Celles-ci communiquent entre elles, facilitant grandement la compréhension et la maintenance.

Vue d’ensemble

Pour commencer, voici les principaux composants :

  • Frontend :
    Une interface web minimaliste réalisée avec Vue.js. Elle permet d’afficher les messages et d’en ajouter de nouveaux.
  • Backend :
    Une API REST conçue avec Spring Boot (Java 21). Cette API propose deux endpoints essentiels : récupérer tous les messages et poster un nouveau message.
  • Base de données :
    Le stockage des messages s’effectue dans une base MySQL. Ainsi, les données sont conservées même après redémarrage.
  • Kafka :
    À chaque message posté, son contenu est publié sur un topic Apache Kafka. Cela vous permet de découvrir la messagerie asynchrone. Pour approfondir, consultez ce guide complet sur Kafka sur notre blog.
  • Orchestration Docker :
    Enfin, tous ces services (backend, MySQL, Kafka, etc.) sont lancés dans des conteneurs Docker via un fichier docker-compose.yml. Par conséquent, il est facile de démarrer ou d’arrêter l’ensemble du projet.

Schéma simplifié

Pour mieux comprendre l’organisation de notre mini-projet, observons d’abord l’architecture globale :

Architecture de l’application : interactions entre utilisateurs, frontend Vue.js, backend Spring Boot, MySQL et Kafka.
Schéma d’architecture : les utilisateurs interagissent via une interface Vue.js, connectée à un backend Spring Boot. Ce backend communique à la fois avec une base MySQL pour le stockage et avec Kafka pour la messagerie asynchrone.

Chaque utilisateur accède à l’application via une interface web, développée en Vue.js. Cette interface, à son tour, transmet les requêtes au backend Spring Boot. En conséquence, ce dernier gère la logique métier et l’accès aux données. En outre, les messages utilisateurs sont stockés dans une base de données MySQL. Parallèlement, le backend publie chaque message dans une file Kafka. Cela a pour effet de permettre une diffusion asynchrone des événements.

Finalement, ce schéma met en avant l’intérêt de combiner une API REST classique avec un système de messagerie moderne tel que Kafka. Ce contexte pédagogique est proche du réel.

En résumé, le flux principal est le suivant :

  1. L’utilisateur publie un message via l’interface web.
  2. Ensuite, le frontend transmet la requête à l’API Spring Boot.
  3. Le backend enregistre le message dans MySQL, puis le publie dans Kafka.
  4. Par ailleurs, il serait possible d’ajouter d’autres services consommateurs de Kafka.

Points techniques mis en avant

  • Utilisation de JPA/Hibernate pour la persistance.
  • Intégration de Kafka dans un projet Spring Boot.
  • Mise en place d’un environnement complet avec Docker Compose.
  • Exemple concret d’échange de données entre frontend et backend par API REST.

En somme, ce premier article a solidement posé les bases de notre projet d’application de messagerie sociale. Nous avons notamment introduit Apache Kafka, présenté l’architecture globale de notre solution fullstack, et détaillé les prérequis techniques essentiels pour démarrer.

Dans le prochain article de ce tutoriel, nous passerons à l’action. Pour ce faire, nous préparerons notre environnement de développement. Nous verrons comment configurer et lancer les services essentiels, tels que MySQL et Kafka, en utilisant Docker Compose. Préparez-vous à démarrer rapidement votre écosystème local !

💬 Une question ou une remarque ?

Nous vous encourageons à poser vos questions en commentaire. Toute remarque ou suggestion est également la bienvenue !

Logo de Izo-Nova

Rejoignez-nous !

Recevez une sélection de nos meilleurs articles, guides d'achat et analyses. L'essentiel de la tech, directement dans votre boîte mail.

0 0 votes
Évaluation de l'article
S’abonner
Notification pour
guest

0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Retour en haut