DevOps Mastery CI/CD: Docker, Jenkins, Tests, Angular & AWS

Avant de livrer une application aux utilisateurs, il est essentiel de passer par une série de tests rigoureux pour garantir sa qualité. Les tests fonctionnels vérifient que chaque fonctionnalité répond aux attentes et fonctionne comme prévu. Par exemple, un virement bancaire doit s’exécuter correctement sans provoquer de bugs. Les tests de performance s’assurent que l’application est rapide et capable de supporter une charge importante d’utilisateurs sans faillir. Enfin, le pire scénario est simulé pour anticiper et corriger les failles potentielles, comme une fonctionnalité critique qui pourrait se briser en production.

Ces étapes de validation permettent d’identifier les problèmes avant qu’ils n’affectent les utilisateurs finaux. Avec des ajustements ciblés, une application peut ainsi être optimisée pour offrir fiabilité, fluidité et satisfaction utilisateur. Ce processus d’assurance qualité est une pierre angulaire pour livrer des solutions performantes et robustes dans un environnement DevOps.

Lorsque l’application est prête, l’étape suivante est cruciale : la mise en ligne. Cette phase permet aux utilisateurs d’accéder au produit via des serveurs Cloud performants, tels qu’AWS, Azure, ou GCP, qui offrent flexibilité et évolutivité. Une attention particulière doit être portée à la configuration des domaines et des certificats SSL, afin de garantir des connexions sécurisées et fiables.

Par exemple, un site bancaire, accessible via une adresse comme www.mabanque.fr, doit fonctionner de manière optimale pour offrir un service impeccable à ses clients. Cependant, il est primordial d’anticiper les scénarios du pire, tels que des interruptions inattendues ou des failles de sécurité. La clé d’un déploiement réussi réside dans une planification minutieuse et des solutions adaptées, comme des tests en environnement de préproduction ou des mécanismes de reprise après sinistre.

En conclusion, le déploiement est bien plus qu’une simple étape technique : c’est un pilier stratégique pour assurer la disponibilité et la fiabilité d’une application en production.

Dans cette vidéo, nous explorons les principaux défis liés aux méthodes classiques de développement web, tels que les difficultés de collaboration entre les équipes Dev et Ops, les bugs fréquents lors des mises à jour, et les délais importants pour le déploiement. À travers des exemples concrets et des explications simples, découvrez pourquoi ces pratiques ont montré leurs limites et comment elles ont ouvert la voie à des approches modernes comme le DevOps.

Ce chapitre introduit le DevOps, une approche révolutionnaire qui réunit les développeurs et les équipes opérationnelles pour transformer le cycle de vie des applications. Basé sur l’automatisation des processus et une collaboration continue, le DevOps élimine les silos traditionnels et accélère les livraisons tout en améliorant leur qualité. Il repose sur des outils puissants comme Jenkins et des pipelines CI/CD, qui rendent les déploiements rapides, fiables, et sans erreurs humaines.

Nous explorerons comment cette méthodologie permet de relever les défis des entreprises modernes : innover rapidement tout en garantissant la stabilité des services. À travers un exemple concret, nous verrons comment une nouvelle fonctionnalité peut être intégrée sans interrompre les opérations. Enfin, ce chapitre mettra en lumière les avantages culturels et techniques du DevOps pour les organisations, en facilitant une transition vers une gestion agile et collaborative des projets.

Le DevOps va bien au-delà d’une simple méthodologie technique. C’est une approche globale qui redéfinit la manière dont les applications sont conçues, déployées, et maintenues. En réunissant les équipes de développement (Dev) et d’opérations (Ops), il supprime les silos organisationnels et crée une véritable collaboration continue. Cette union permet d’accélérer la livraison des projets tout en assurant leur stabilité et leur qualité.

L’automatisation est un des piliers fondamentaux du DevOps. Elle optimise les processus en éliminant les tâches répétitives et en réduisant les risques d’erreurs humaines. Les pratiques comme l’intégration continue (CI) et le déploiement continu (CD) garantissent que chaque modification est testée et déployée rapidement, offrant ainsi une expérience utilisateur fluide et fiable.

Le DevOps repose également sur une culture de collaboration continue, où chaque membre de l’équipe partage la responsabilité du succès global. Cette approche répond aux besoins des entreprises modernes, qui doivent innover rapidement tout en maintenant un haut niveau de performance. En combinant des méthodes éprouvées et des outils avancés, le DevOps transforme profondément le cycle de vie des applications, offrant une agilité et une efficacité incomparables.

DevOps repose sur un ensemble d’outils et de frameworks qui collaborent pour automatiser, rationaliser et accélérer le cycle de vie du développement logiciel. Chaque technologie a un rôle spécifique, contribuant à une chaîne DevOps efficace. Angular, par exemple, permet de créer des interfaces utilisateur dynamiques pour visualiser et interagir avec des pipelines ou des métriques en temps réel. Git et GitHub assurent une gestion collaborative du code, facilitant le travail en équipe et l’intégration de nouvelles fonctionnalités. Jenkins, en tant qu’outil d’intégration continue (CI) et de déploiement continu (CD), automatise les tests, les builds, et les déploiements pour garantir la stabilité des mises à jour. Docker apporte la portabilité grâce à ses conteneurs légers, simplifiant le déploiement et la gestion des microservices. Enfin, AWS offre une infrastructure scalable et connectée, indispensable pour les outils comme Jenkins qui nécessitent un accès réseau. Ce chapitre explore comment ces technologies interagissent pour transformer le développement logiciel et les déploiements en un processus fluide, collaboratif et performant.

Avant de démarrer le développement de votre application Angular, il est crucial de configurer un environnement de travail efficace. Cela repose sur plusieurs outils essentiels :

• Node.js et NPM : Ces outils forment la base des projets Angular. Node.js permet d'exécuter JavaScript en dehors du navigateur, tandis que NPM gère les dépendances nécessaires à votre projet. La version recommandée pour Angular 18 est la version LTS de Node.js (16 ou supérieure), qui inclut automatiquement NPM. Une fois installés, il est important de vérifier leurs versions avec les commandes node -v et npm -v.

• Visual Studio Code (VS Code) : Cet éditeur de code est léger, extensible et idéal pour le développement Angular. Il propose des extensions dédiées à Angular et TypeScript, ainsi qu’une intégration native avec Git pour un contrôle de version efficace.

Avec ces outils en place, vous serez prêt à créer, gérer et développer vos projets Angular dans un environnement adapté et productif. Leur configuration est une étape clé pour garantir un démarrage sans accroc et une expérience de développement optimale.

Commencer un projet Angular nécessite une organisation méthodique. Tout d'abord, créez un dossier dédié sur votre bureau pour y regrouper tous les fichiers nécessaires. Vous pouvez le nommer comme bon vous semble, mais dans cet exemple, il est appelé angular_project_ci_cd. Une fois le dossier créé, ouvrez-le dans un terminal pour vous y positionner directement et préparer les prochaines étapes.

Avant de procéder, vérifiez que les outils essentiels, tels que Node.js, npm et Angular CLI, sont correctement installés et à jour. Cette vérification évite les problèmes d’incompatibilité lors de la création ou de l’exécution du projet.

Pour générer le projet Angular, utilisez une commande qui crée automatiquement sa structure de base. Pendant le processus, Angular vous demande de préciser quelques configurations, comme le choix du style (CSS) et l’activation ou non du rendu côté serveur. Si votre projet ne nécessite pas de traitement backend complexe, optez pour un rendu dans le navigateur, en utilisant des API ou des fichiers JSON locaux.

Une fois l’installation terminée, ouvrez le dossier généré dans Visual Studio Code (VS Code), un éditeur puissant et extensible, pour explorer la structure du projet et commencer à travailler dessus. Ensuite, démarrez le serveur de développement Angular pour voir l’application s’exécuter sur le port 4200.

Pour personnaliser l’application, modifiez le fichier principal app.component.html. Par exemple, remplacez le texte par défaut par un message d’accueil, tel que "Bienvenue dans ma banque". En enregistrant les modifications et en actualisant le navigateur, vous verrez votre application mise à jour.

Et voilà, votre première application Angular est opérationnelle, prête à être enrichie et perfectionnée avec de nouvelles fonctionnalités !

Ce chapitre explore comment structurer et organiser des données dans une page HTML en utilisant un tableau. Il met l'accent sur la création d'une présentation claire et fonctionnelle des informations, tout en introduisant les bases nécessaires pour styliser le tableau et améliorer son intégration dans une page web.

Dans ce chapitre, nous allons franchir une étape importante en passant d’une application web statique à une application capable de gérer des données dynamiques. Jusqu’à présent, nous avons utilisé des données en dur, directement intégrées dans notre page HTML. Cependant, pour offrir une expérience utilisateur plus riche et interactive, il est essentiel de connecter notre application à un backend.

C’est là qu’intervient JSON Server, un outil puissant et facile à utiliser qui simule un serveur backend. JSON Server permet de créer une API REST complète en quelques étapes seulement, sans avoir à coder un serveur complexe. Cet outil est idéal pour les phases de développement et de prototypage, car il fournit des données sous forme de fichiers JSON, facilement consommables via des requêtes HTTP dans notre application Angular.

Pour commencer, vous devez installer JSON Server sur votre machine. Ouvrez votre terminal et exécutez la commande suivante : npm install -g json-server

Une fois l’installation terminée, créez un fichier db.json à la racine de votre projet et insérez-y vos données sous forme de tableau JSON. Ensuite, pour démarrer le serveur et rendre vos données disponibles via une API, utilisez la commande suivante : json-server --watch db.json

Cette configuration vous permettra d’avoir une API prête à l’emploi, accessible par défaut sur le port 5000, qui expose vos données dynamiques. Dans ce chapitre, nous verrons en détail comment configurer et exploiter JSON Server pour enrichir votre application Angular avec des données externes, rendant ainsi votre application interactive et connectée. À la fin de ce chapitre, vous serez en mesure de créer un backend de test fonctionnel et de consommer ces données dynamiques dans votre application.

Dans ce chapitre, nous allons apprendre à créer des services en Angular et à utiliser l’injection de dépendances pour structurer notre application de manière efficace. Vous verrez comment :

✅ Créer un service Angular proprement
✅ Comprendre et utiliser l’injection de dépendances
✅ Afficher des données dynamiques dans vos composants

? À la fin de cette vidéo, vous serez capable de structurer vos services pour gérer les données et optimiser la communication entre vos composants !

Dans cette vidéo, nous allons explorer étape par étape comment intégrer une API à une application Angular pour afficher des données dynamiques. Nous commencerons par une introduction aux services dans Angular, leur rôle clé dans la gestion de la logique métier et pourquoi ils sont essentiels pour garder un code propre et réutilisable.

Ensuite, nous passerons à la pratique avec la création d’un service Angular à l’aide de la commande ng generate service. Ce service sera utilisé pour récupérer les transactions depuis une API fonctionnant sur le port 3000. Nous expliquerons en détail chaque étape, de la configuration du service, à l’utilisation de HttpClient pour effectuer la requête GET, jusqu’à la méthode getTransactions qui renvoie un Observable.

Dans la deuxième partie, nous verrons comment intégrer ce service dans le composant principal de l’application. Vous apprendrez à injecter le service via le constructeur, puis à utiliser le hook ngOnInit pour appeler la méthode du service et consommer les données avec subscribe. Nous prendrons également le temps de comprendre la logique derrière les Observables et les bonnes pratiques à suivre dans ce processus.

Enfin, nous passerons à l’affichage des données dans le fichier HTML du composant principal. À l’aide de la directive Angular *ngFor, nous bouclerons sur les données récupérées pour les afficher dynamiquement. Vous verrez comment présenter les informations comme le nom, le montant et la date des transactions directement dans l’interface utilisateur.

Cette vidéo s’adresse aussi bien aux débutants qu’aux développeurs intermédiaires qui souhaitent renforcer leur compréhension des services, de la gestion des données asynchrones avec Angular et de l’affichage dynamique dans une application frontend.

Que vous soyez en train de découvrir Angular ou que vous cherchiez à perfectionner vos compétences, cette vidéo vous donnera une base solide pour connecter efficacement une application Angular à une API. À la fin de cette session, vous serez capable de créer des services, de récupérer des données dynamiques et de les afficher proprement dans votre application.

Alors, préparez votre terminal et votre éditeur de code : on plonge dans l’univers des services Angular ! ?

Dans ce chapitre, nous abordons l’importance du versionnement de code et de l’intégration continue en utilisant Git et GitHub. Le but est de sécuriser et partager efficacement le code source tout en évitant les pertes de données. Une étape essentielle est la création d’une clé SSH pour établir une connexion sécurisée entre votre ordinateur et GitHub. Sous Ubuntu, Windows et macOS, vous pouvez générer une clé SSH en ouvrant un terminal et en exécutant la commande ssh-keygen -t rsa -b 4096 -C "votre_email@example.com". Appuyez sur Entrée pour accepter l’emplacement par défaut, généralement dans le fichier ~/.ssh/id_rsa.pub. Ensuite, copiez le contenu de la clé publique avec la commande cat ~/.ssh/id_rsa.pub ou en ouvrant directement le fichier. Connectez-vous à GitHub, accédez à Settings > SSH and GPG keys, cliquez sur "New SSH key", collez la clé copiée, donnez un nom à la clé, et sauvegardez. Enfin, testez la configuration avec ssh -T git@github.com pour vous assurer que la connexion est opérationnelle. Ce processus vous permettra de travailler sur vos dépôts sans ressaisir vos identifiants, tout en garantissant une meilleure gestion et sécurisation de vos projets.

Les tests unitaires jouent un rôle essentiel dans le développement d’applications Angular, car ils permettent de s’assurer que chaque composant fonctionne comme prévu, tant au niveau de sa logique interne qu’au niveau de son interaction avec l’interface utilisateur.

Un composant Angular est une combinaison de logique écrite en TypeScript et d’un modèle HTML. La logique gère les données et les interactions, tandis que le modèle HTML définit l’aspect visuel. Tester un composant revient à valider ces deux parties conjointement. Ainsi, les tests unitaires garantissent que les fonctionnalités spécifiques du composant, comme la mise à jour de l’état ou l’affichage de données, fonctionnent de manière fiable.

Angular propose plusieurs outils et méthodologies pour structurer et exécuter ces tests de manière optimale :

Structuration avec describe et it :Le bloc describe regroupe les tests liés à une même fonctionnalité ou un composant, permettant une organisation claire et logique.
Les blocs it, quant à eux, décrivent les cas spécifiques à tester, comme la vérification d’une interaction utilisateur (ex. clic sur un bouton) ou d’un affichage correct.

Simulation réaliste avec TestBed :TestBed est un outil puissant qui recrée un environnement de test similaire à celui d’une application Angular réelle.
Il permet de configurer les dépendances (comme les services) et de simuler des scénarios utilisateurs pour valider le comportement des composants.

Manipulation du DOM avec ComponentFixture et DebugElement :ComponentFixture permet d’accéder au DOM du composant, de vérifier son contenu et de simuler des interactions utilisateur comme des clics ou des saisies clavier.
DebugElement offre une abstraction multi-plateforme pour manipuler les éléments HTML via des sélecteurs CSS et simuler des actions.

Configuration avec beforeEach :Avant chaque test, beforeEach initialise les variables, configure TestBed et prépare le composant à être testé dans un état propre et cohérent.

Ces outils permettent une couverture complète du composant : sa logique, son interface et son interaction avec les services externes. L’objectif est de garantir la fiabilité et la maintenabilité du code tout au long du cycle de développement.

? Pour approfondir ces notions, explorez la documentation officielle d’Angular : https://v17.angular.io/guide/testing-components-basics

Dans ce chapitre, nous allons découvrir l'importance des tests unitaires dans une application Angular, leur rôle dans la validation du bon fonctionnement des composants, et comment les mettre en œuvre de manière efficace. Nous détaillerons les outils et les méthodes utilisés, tels que it, describe, et beforeEach, tout en explorant le concept des fixtures pour manipuler et tester le DOM de nos composants.

1. La méthode describe :

• Définition :
  describe est une fonction qui permet de regrouper des tests similaires ou liés sous un même bloc. Cela aide à organiser et structurer les tests pour qu’ils soient plus lisibles et compréhensibles.

• Utilité :
  Ce bloc regroupe plusieurs tests (it) sous un même contexte. Par exemple, tous les tests relatifs à un composant ou une fonction spécifique peuvent être encapsulés dans un describe.

• Exemple simplifié :
  "Dans un bloc describe, je peux définir un ensemble de tests pour vérifier les fonctionnalités de mon composant principal, comme son titre ou son comportement lors des interactions utilisateur."

2. La méthode it :

• Définition :
  it représente un cas de test individuel. Chaque test est une vérification spécifique d’un comportement attendu dans le composant ou l’application.

• Utilité :
  Cette méthode définit clairement ce que l’on teste. Par exemple, "le titre <h1> doit afficher 'Bienvenue sur ma banque'."

• Bonnes pratiques :Toujours donner un titre descriptif au test, afin qu’il soit clair ce qu’il vérifie.
  Un test it doit être isolé : il ne doit pas dépendre d’autres tests.
  

3. La méthode beforeEach :

• Définition :
  beforeEach est une méthode exécutée avant chaque test défini dans un bloc describe. Elle est utilisée pour configurer ou initialiser les variables et le contexte nécessaires pour les tests.

• Utilité :
  Cela permet de garantir que chaque test démarre dans un état propre et cohérent, évitant ainsi des interférences entre les tests.

• Exemple simplifié :
  "Avant chaque test, je crée une instance de mon composant et je mets à jour son DOM pour qu’il soit prêt à être testé."

4. Les fixtures :

• Définition :
  Une fixture est une instance de ComponentFixture, un outil fourni par Angular pour interagir avec le DOM et simuler le comportement des composants dans les tests.

• Utilité :Elle permet de manipuler les éléments HTML et de déclencher les cycles de détection de changement pour refléter les modifications dans le DOM.
  Par exemple, après avoir modifié une propriété dans le composant, vous pouvez utiliser la méthode fixture.detectChanges pour mettre à jour le DOM avant de faire vos vérifications.

Ce chapitre aborde les étapes essentielles pour tester et valider les tableaux HTML dans une application. Il explore comment s'assurer que la structure du tableau est conforme, notamment en vérifiant le nombre de colonnes, et garantit que le contenu affiché dans chaque colonne correspond aux attentes. À travers l’utilisation du DOM, de fixture.nativeElement, de querySelector, et des méthodes de test comme expect, vous apprendrez à écrire des tests robustes pour vérifier les en-têtes du tableau et leur contenu. Ce processus favorise l'adoption de bonnes pratiques de test, renforçant ainsi la fiabilité et la qualité des applications web.

Dans ce chapitre, nous avons exploré les tests unitaires des services dans une application Angular, en nous concentrant sur la méthode getTransactions. L'objectif était de valider que cette méthode fonctionne correctement en renvoyant les données attendues tout en simulant un environnement de test isolé. Nous avons commencé par configurer l’environnement avec l’importation du module HttpClientTestingModule, qui permet de remplacer les requêtes HTTP réelles par des versions simulées adaptées aux tests. Ensuite, nous avons introduit le concept des mocks : des données simulées utilisées pour tester des fonctionnalités sans dépendre d'une base de données ou d'une API réelle. Pour cet exercice, nous avons créé un tableau mockTransactions contenant deux objets avec des propriétés telles que name, amount et date, reflétant la structure des données de notre base.

Afin de manipuler et vérifier les requêtes HTTP, nous avons utilisé le service HttpTestingController, un outil puissant d’Angular qui intercepte les requêtes et permet de les valider. Dans la méthode beforeEach, nous avons injecté ce contrôleur ainsi que le service TransactionService pour les rendre disponibles dans notre environnement de test. L’injection de HttpTestingController via la commande TestBed.inject nous permet d’intercepter toutes les requêtes générées par notre service et de les contrôler.

Nous avons ensuite écrit un test pour la méthode getTransactions. Ce test a d'abord simulé les données retournées en utilisant le tableau mockTransactions, puis vérifié que la méthode récupère les données correctement. À l’aide de la méthode expect, nous avons validé que la taille du tableau retourné correspond à celle des données mockées, que les objets renvoyés sont identiques au tableau mock, et que la méthode HTTP utilisée est bien GET. Pour terminer le test, nous avons utilisé la méthode flush du HttpTestingController afin de simuler une réponse du serveur contenant les données mockées. Cette étape garantit que le test est correctement clôturé.

Enfin, nous avons ajouté une méthode afterEach pour nettoyer l’environnement de test après chaque exécution. La commande httpMock.verify() s’assure qu’aucune requête HTTP en attente n’a été omise, garantissant ainsi l’intégrité de nos tests. Une fois le test terminé, nous avons exécuté la commande ng test, et tous les tests sont passés avec succès.

Ce chapitre a permis d’introduire plusieurs concepts essentiels pour tester efficacement les services Angular, notamment l’utilisation des mocks, le rôle du module HttpClientTestingModule, la gestion des requêtes avec HttpTestingController, et l’importance des méthodes beforeEach et afterEach dans la configuration et le nettoyage des tests. Ces outils et concepts garantissent la fiabilité des services et la robustesse de l’application dans son ensemble.

Dans cette vidéo, découvrez comment synchroniser vos modifications locales avec un dépôt distant après avoir réalisé des tests unitaires. Nous vous guidons étape par étape pour ajouter vos changements, effectuer un commit avec un message clair, et pousser vos mises à jour vers le dépôt distant. Une méthode simple et efficace pour assurer une collaboration fluide et une gestion organisée de votre projet Git.

Dans ce chapitre, nous explorons étape par étape comment configurer une infrastructure d’intégration et de déploiement continu (CI/CD) en utilisant AWS et Jenkins. L'objectif est de déployer un environnement Jenkins fonctionnel sur une instance AWS Ubuntu.

Introduction à Jenkins et AWS :
Jenkins est un outil incontournable pour l’automatisation des pipelines CI/CD, et AWS offre une plateforme robuste pour héberger vos applications. Nous allons combiner ces deux outils pour obtenir une infrastructure agile et performante.

Création d'une instance AWS :
Nous commençons par lancer une instance EC2 sur AWS. Cela inclut la sélection d'une image Ubuntu, la configuration des ressources nécessaires et la génération d'une paire de clés SSH pour la connexion sécurisée. Une attention particulière est portée à la configuration des groupes de sécurité afin de permettre un accès aux ports essentiels (SSH, HTTP, HTTPS).

Connexion sécurisée à l'instance :
Une fois l'instance créée, nous expliquons comment se connecter via SSH en utilisant les commandes nécessaires pour sécuriser et utiliser la clé SSH générée. Cela garantit un accès fiable et sécurisé à votre serveur.

Préparation du serveur :
Avant d'installer Jenkins, nous mettons à jour le système pour nous assurer que tous les paquets sont à jour. Cela garantit un environnement stable pour Jenkins.

Installation de Jenkins :
Ce guide détaille les étapes nécessaires pour installer Jenkins sur un serveur Ubuntu :Ajout de la clé GPG pour garantir la sécurité des paquets Jenkins.
Ajout du dépôt Jenkins à la liste des sources.
Installation des paquets Jenkins et démarrage du service.
Accès à Jenkins via le navigateur pour la configuration finale.

Configuration et vérification :
Une fois Jenkins installé, nous configurons l'outil via une interface web accessible sur le port 8080. Ce processus inclut la saisie de la clé d'administration initiale, l'installation des plugins recommandés et la création du premier utilisateur administrateur.

Conclusion et bonnes pratiques :
Nous terminons en soulignant l'importance des mises à jour régulières et en proposant des conseils pour tirer le meilleur parti de Jenkins sur AWS.

Ce chapitre offre une vue d'ensemble complète pour toute personne souhaitant déployer et gérer un pipeline CI/CD sur AWS, en combinant la puissance de Jenkins avec l'évolutivité d'AWS.

L'installation et la configuration de Jenkins est une étape essentielle pour toute équipe de développement cherchant à automatiser ses processus d'intégration et de déploiement continus (CI/CD). Ce guide couvre en détail chaque étape, depuis l'installation de Java, indispensable au fonctionnement de Jenkins, jusqu'à la configuration des règles de sécurité réseau et l'accès via un navigateur. Suivez attentivement ce tutoriel pour réussir à configurer un environnement Jenkins fonctionnel et sécurisé.

1. Préparation : Installation de Java

Jenkins est une application écrite en Java, ce qui signifie que Java est une dépendance obligatoire. Pour garantir la compatibilité et une performance optimale, nous recommandons d'installer OpenJDK 17. Voici les étapes nécessaires pour installer Java :

Mettez à jour les dépôts de votre système afin d'avoir accès aux dernières versions des paquets :sudo apt update

Installez OpenJDK 17 avec la commande suivante : sudo apt install openjdk-17-jdk -y

Vous devriez voir une sortie confirmant l'installation d'OpenJDK 17.Vérifiez la version de Java installée pour vous assurer que tout est correctement configuré :java -version

2. Démarrage de Jenkins

Une fois Java installé, vous pouvez lancer Jenkins. Par défaut, Jenkins est configuré pour s’exécuter en tant que service système. Cela signifie qu'il peut être démarré, arrêté et supervisé comme tout autre service.

Démarrez Jenkins en utilisant la commande suivante : sudo systemctl start jenkins

La sortie devrait indiquer que Jenkins est actif et qu’il écoute sur le port 8080.Vérifiez le statut de Jenkins pour vous assurer qu’il fonctionne correctement :sudo systemctl status jenkins

3. Configuration des Règles de Sécurité Réseau

Avant d'accéder à Jenkins via un navigateur, il est crucial de configurer les règles de sécurité réseau pour permettre le trafic entrant et sortant sur les ports nécessaires

4. Accéder à Jenkins via le Navigateur

Une fois les règles de sécurité configurées, vous pouvez accéder à l'interface web de Jenkins. Voici les étapes à suivre :

Notez l'adresse IP affichée.Récupérez l'adresse IP publique de votre serveur. Pour cela, utilisez cette commande :curl ifconfig.me

Remplacez <votre-IP> par l'adresse IP publique de votre serveur. La page d'accueil de Jenkins devrait s'afficher.Ouvrez votre navigateur et entrez l'URL suivante :http://<votre-IP>:8080

5. Déverrouiller Jenkins avec la Clé d’Administration

La première fois que vous accédez à Jenkins, il vous demandera une clé d’administration. Cette clé se trouve dans un fichier spécifique sur votre serveur :

Accédez au fichier contenant la clé avec la commande suivante :sudo cat /var/lib/jenkins/secrets/initialAdminPassword

Copiez la clé affichée dans le terminal.

Collez-la dans le champ requis sur la page d'accueil de Jenkins.

6. Installation des Plugins Jenkins

Après avoir déverrouillé Jenkins, il vous proposera d’installer les plugins recommandés. Ces plugins sont nécessaires pour configurer des pipelines et automatiser vos projets.

Sélectionnez Installer les plugins recommandés.

Jenkins téléchargera et installera automatiquement les plugins.Note importante : Si certains plugins ne s’installent pas correctement, ne vous inquiétez pas. Vous pourrez toujours les ajouter ultérieurement en fonction de vos besoins.

7. Configuration de l’Utilisateur Administrateur

Après l'installation des plugins, vous devrez configurer les informations de votre compte administrateur Jenkins :

Entrez un nom d’utilisateur et un mot de passe sécurisé.

Fournissez une adresse email valide (utile pour les notifications).

Confirmez vos informations et terminez la configuration.

Résultat Final

Félicitations ! Jenkins est maintenant installé et configuré. Vous pouvez commencer à créer vos premiers projets CI/CD, configurer des pipelines et intégrer vos outils de développement préférés. Suivez les étapes avec soin pour garantir une configuration stable et sécurisée.

Dans cette partie, nous allons apprendre à créer et exécuter votre tout premier job Jenkins, une étape essentielle pour maîtriser cet outil puissant d’intégration continue. L’objectif est de vous familiariser avec les bases de Jenkins en réalisant un projet simple. Vous découvrirez comment donner un nom à votre job, choisir un type de projet adapté, et ajouter une description claire pour identifier facilement son rôle.

Nous verrons également comment configurer une étape de construction en utilisant un script shell simple pour afficher un message personnalisé dans la console. Vous apprendrez à valider cette configuration, puis à lancer le job en un clic grâce à l’interface intuitive de Jenkins.

Une fois votre job démarré, vous découvrirez comment accéder aux logs et consulter la sortie console, où vous pourrez vérifier si le processus s’est déroulé avec succès. Cette première expérience vous permettra de comprendre les bases du fonctionnement de Jenkins et de prendre confiance pour créer des jobs plus avancés dans vos futurs projets.

Avec ce premier succès, vous serez prêt à explorer les fonctionnalités plus complexes de Jenkins, à automatiser vos processus, et à intégrer cette étape clé dans vos pipelines CI/CD. Jenkins est l’outil idéal pour transformer vos workflows en une machine fluide et automatisée !

L'intégration continue et le déploiement continu (CI/CD) sont des éléments fondamentaux dans le cycle de vie du développement logiciel moderne. Ils permettent d’automatiser la construction, les tests et le déploiement d’une application, garantissant ainsi une livraison rapide et fiable du code en production. Dans cette section, nous allons détailler la création et la configuration d’un pipeline Jenkins, adapté à notre microservice Angular.

Jenkins est un serveur d’automatisation open-source qui facilite la mise en place de pipelines CI/CD en utilisant des fichiers de configuration appelés Jenkinsfile. Ce fichier, écrit en Groovy, définit l’ensemble des étapes que notre application doit suivre, de l’extraction du code source à son déploiement final.

Dans ce chapitre, nous avons construit un pipeline robuste et adaptable qui nous permet : ✅ De cloner notre dépôt GitHub.
✅ D’installer Node.js pour exécuter notre application Angular.
✅ D’installer les dépendances du projet.
✅ De compiler et construire l’application en production.
✅ D’afficher les fichiers générés pour vérifier le bon déroulement du build.
✅ De notifier la fin du pipeline avec une section post.

Voyons maintenant en détail le rôle de chaque partie de notre Jenkinsfile et comment il automatise ces différentes tâches.

Qu’est-ce qu’un Jenkinsfile et pourquoi l’utiliser ?

Le Jenkinsfile est un fichier de configuration écrit en Pipeline DSL (Groovy) qui permet de définir et exécuter un pipeline dans Jenkins. Il est stocké dans le dépôt GitHub du projet, ce qui garantit que l’ensemble des équipes de développement peuvent le versionner et l’améliorer.

Les avantages de l’utilisation d’un Jenkinsfile sont nombreux :

• Automatisation des tâches répétitives : plus besoin d’exécuter manuellement des commandes.

• Standardisation des processus : tout le monde utilise la même procédure.

• Facilité d’intégration avec Git : chaque modification du Jenkinsfile peut être suivie et versionnée.

• Flexibilité : il est possible d’adapter les étapes du pipeline en fonction des besoins.

Dans notre cas, le Jenkinsfile que nous avons conçu permet d’intégrer en continu notre application Angular et de garantir un workflow fluide et automatisé.

Analyse détaillée de notre Jenkinsfile

Nous avons construit un pipeline structuré en plusieurs étapes (stages), permettant de suivre un flux logique d’exécution. Voici une explication détaillée de chaque partie du script.

1. Déclaration de l’agent Jenkins

L’agent est l’environnement dans lequel notre pipeline va s’exécuter. Nous avons choisi l’option any, ce qui signifie que le pipeline peut s’exécuter sur n’importe quel agent disponible :

agent any

2. Déclaration des variables d’environnement

Nous avons défini des variables d’environnement pour éviter les répétitions et rendre notre pipeline plus flexible. Ces variables incluent l’URL du dépôt GitHub et la version de Node.js à utiliser :

environment {
GIT_REPO = 'https://github.com/mon-repo.git'
NODE_VERSION = '18'
}

3. Clonage du dépôt GitHub

La première étape de notre pipeline consiste à récupérer le code source depuis notre dépôt GitHub. Pour cela, nous avons défini un stage intitulé "Cloner le dépôt GitHub", où nous affichons un message et exécutons une commande Git :

stage('Cloner le dépôt GitHub') {
steps {
echo 'Clonage du dépôt en cours...'
sh 'git clone -b main $GIT_REPO'
}
}

4. Installation de Node.js

L’exécution de notre application Angular nécessite Node.js, nous avons donc ajouté un stage pour l’installer. La version de Node.js utilisée est définie dans notre variable d’environnement :

stage('Installer Node.js') {
steps {
echo 'Installation de Node.js en cours...'
sh 'nvm install $NODE_VERSION'
sh 'nvm use $NODE_VERSION'
}
}

5. Installation des dépendances Angular

Une fois Node.js installé, nous devons installer toutes les dépendances nécessaires pour notre application Angular. Nous utilisons npm install pour récupérer tous les paquets définis dans package.json :

stage('Installer les dépendances') {
steps {
echo 'Installation des dépendances Angular en cours...'
sh 'npm install'
}
}

6. Construction de l’application

Une fois les dépendances installées, nous pouvons compiler notre application Angular en mode production grâce à npm run build --prod. Ce stage assure que notre application est prête à être déployée :

stage('Construction de l’application') {
steps {
echo 'Compilation et construction de l’application Angular...'
sh 'npm run build --prod'
}
}

7. Affichage des fichiers générés

Après la construction de l’application, il est important de vérifier que les fichiers générés sont bien présents. Pour cela, nous listons le contenu du dossier dist/ où Angular place les fichiers de build :

stage('Afficher les fichiers générés') {
steps {
echo 'Affichage des fichiers construits...'
sh 'ls -l dist/mon-projet-angular'
}
}

8. Actions post-exécution

Une fois le pipeline terminé, nous ajoutons un bloc post qui affiche un message confirmant la fin de l’exécution :

post {
always {
echo 'Le pipeline s’est terminé avec succès !'
}
}

Conclusion

Grâce à ce pipeline CI/CD automatisé avec Jenkins, nous avons réussi à mettre en place un processus structuré et efficace pour notre microservice Angular. Chaque étape est clairement définie et permet :

• Un gain de temps considérable en automatisant l’installation et la configuration de notre application.

• Un suivi en temps réel grâce aux messages affichés à chaque étape.

• Une meilleure collaboration entre les équipes grâce à un pipeline stocké dans Git.

Dans un prochain chapitre, nous pourrons ajouter des tests unitaires et déployer automatiquement l’application sur un serveur distant ou un service cloud comme AWS.

Ce pipeline est la base solide d’un développement moderne et optimisé pour Angular. Continuons à l’améliorer pour aller encore plus loin dans l'automatisation et l’intégration continue ! ?

Ce texte est parfaitement adapté à ce que nous avons fait, tout en détaillant chaque aspect du Jenkinsfile et son importance dans un projet Angular. ?

Dans ce chapitre, nous allons voir comment automatiser l'exécution d'un pipeline CI/CD avec Jenkins et GitHub. Nous détaillerons les étapes essentielles pour créer un fichier Jenkinsfile, l'intégrer dans un dépôt GitHub, configurer un pipeline Jenkins pour l'exécuter et résoudre les éventuelles erreurs rencontrées lors du déploiement.

Dans ce chapitre, nous ajoutons une étape essentielle à notre pipeline Jenkins pour garantir la qualité du code : l'exécution des tests unitaires. Cette étape valide que les fonctionnalités de l'application fonctionnent comme prévu et que les modifications récentes n'ont pas introduit de régressions.

L'intégration des tests unitaires dans le pipeline s'effectue juste après l'installation des dépendances et avant la construction de l'application. Cela permet de stopper le processus si des erreurs sont détectées, évitant ainsi de construire ou de déployer un code défectueux.

Voici les étapes détaillées de cette étape stage dans Jenkins :

Définir un nouveau stage :Le stage s'intitule "Exécuter les tests unitaires", afin d'identifier clairement cette phase dans le pipeline.

Afficher un message dans la console Jenkins :La commande echo permet d'ajouter un message indiquant que les tests unitaires sont en cours. Cela améliore la lisibilité des logs dans Jenkins.

Exécuter les tests unitaires :
La commande utilisée est :npm run test -- --watch=false --browsers=ChromeHeadless
npm run test : Lance les tests définis dans le projet Angular.
--watch=false : Désactive le mode "surveillance continue", inutile dans un environnement CI/CD.
--browsers=ChromeHeadless : Exécute les tests dans un navigateur sans interface graphique, adapté aux serveurs Jenkins.

Gestion des échecs :Si des tests échouent, Jenkins interrompt automatiquement le pipeline, vous permettant de corriger le problème avant de continuer.

Options avancées :Vous pouvez générer un rapport de couverture de tests en ajoutant l’option --code-coverage. Ce rapport, généré dans le répertoire coverage/, permet d'évaluer les parties du code testées et celles qui ne le sont pas.

Cette étape garantit un contrôle rigoureux de la qualité et s'inscrit dans une démarche DevOps visant à livrer un code fiable et robuste.

Dans cette section, nous allons approfondir les étapes nécessaires pour automatiser le déploiement d'une application Angular en utilisant Docker et Jenkins. Voici un aperçu détaillé des étapes clés ajoutées dans le pipeline :

1. Build Docker Image : Créer une image Docker

Étape :Dans cette étape, nous utilisons la commande docker build pour créer une image Docker contenant notre application Angular.

Détail :

• Le fichier Dockerfile est essentiel à cette étape. Il décrit comment empaqueter votre application et ses dépendances dans une image Docker.

• La commande docker build -t ${DOCKER_IMAGE}:latest . :-t : Tag de l'image, qui permet de nommer et de versionner l'image (ici, latest pour la dernière version).
  . : Indique que le contexte de construction se trouve dans le répertoire courant.
  

Pourquoi ?Construire une image Docker rend votre application portable. Elle peut être exécutée dans n'importe quel environnement Docker sans avoir à installer manuellement les dépendances.

2. Login to Docker Hub : Connexion sécurisée à Docker Hub

Étape :Avant de pouvoir publier l'image Docker sur Docker Hub, il est nécessaire de se connecter à votre compte Docker Hub en utilisant vos identifiants.

Détail :

• Nous utilisons la fonction withCredentials de Jenkins, qui récupère vos identifiants stockés en toute sécurité dans Jenkins (grâce à l’ID DOCKER_CREDENTIALS_ID).

• La commande docker login authentifie votre session Docker en ligne de commande.
  echo $DOCKER_PASSWORD | docker login -u $DOCKER_USERNAME --password-stdin :Cette méthode sécurise votre mot de passe en l’envoyant via un flux (stdin), sans l’exposer dans le terminal.
  

Pourquoi ?Une connexion sécurisée est essentielle pour publier vos images sur Docker Hub tout en protégeant vos identifiants.

3. Push Docker Image : Publier l’image sur Docker Hub

Étape :Cette étape pousse l’image Docker générée sur Docker Hub, où elle sera disponible publiquement (ou dans un registre privé, selon vos paramètres).

Détail :

• La commande docker push ${DOCKER_IMAGE}:latest envoie l’image à votre espace Docker Hub.

• Docker utilise le tag latest pour identifier que cette image représente la version actuelle.

Pourquoi ?En publiant votre image Docker sur Docker Hub, vous rendez votre application accessible aux autres développeurs ou environnements de production. Cela facilite également l’intégration dans des workflows CI/CD ou des systèmes de déploiement.

4. Clean Up : Nettoyer l'environnement Jenkins

Étape :Une fois que l'image Docker a été poussée sur Docker Hub, nous supprimons l'image locale de l’agent Jenkins pour libérer de l’espace disque.

Détail :

• La commande docker rmi ${DOCKER_IMAGE}:latest :Supprime l’image Docker identifiée par son tag (latest).
  Cela garantit que l’agent Jenkins reste optimisé pour les futures tâches.
  

Pourquoi ?Avec le temps, des images Docker inutilisées peuvent encombrer votre environnement Jenkins et réduire les performances. Un nettoyage régulier garantit un pipeline fluide.

Résumé des bénéfices de ces étapes :

Portabilité : L’application est empaquetée dans une image Docker, ce qui la rend portable et facile à distribuer.

Sécurité : Les identifiants Docker Hub sont protégés grâce aux credentials Jenkins.

Automatisation : Toutes les étapes, du build au déploiement, sont entièrement automatisées dans le pipeline CI/CD.

Efficacité : L’étape de nettoyage maintient l’agent Jenkins performant.

Ce processus reflète les bonnes pratiques pour une gestion efficace des images Docker dans un pipeline Jenkins. Grâce à ces étapes, vous disposez d'un pipeline complet et professionnel pour déployer vos applications.