Exercice 07 : Projet Capstone - Pipeline Multi-Jobs avec Artefacts, Cache et Workflow Réutilisable

🎯 Objectifs

À la fin de cet exercice, vous serez capable de :

✅ Architecturer un pipeline en 3 jobs dépendants (lint → test → deploy-preview)
✅ Partager le rapport de tests entre jobs avec actions/upload-artifact et download-artifact
✅ Configurer un cache node_modules pour éviter les re-téléchargements
✅ Utiliser if: pour conditionner l'exécution d'une étape ou d'un job
✅ Extraire un workflow réutilisable avec workflow_call et l'invoquer depuis le pipeline principal

Durée estimée : 45 minutes

Difficulté : ⭐⭐⭐⭐☆ (Avancé)

Prérequis :

Exercice 06 complété (pipeline CI de base)
Module CI/CD Intermédiaire complété

📖 Contexte

Votre pipeline CI de base fonctionne. Maintenant, l'équipe veut un pipeline plus robuste : un job de lint en parallèle des tests, les rapports de tests accessibles après le run, le cache activé pour accélérer les builds, et la logique de déploiement extraite dans un workflow réutilisable.

📋 Énoncé

Restructurez le pipeline CI en 3 jobs avec cache, artefacts, conditions, et créez un workflow réutilisable pour la logique de notification.

🧭 Déroulement de l'exercice

Tâche 1 : Ajouter un job lint en parallèle

Ajoutez un job lint qui s'exécute en parallèle avec test (pas de needs). Ce job installe ESLint et vérifie la qualité du code. Les deux jobs peuvent tourner simultanément.

Indice : Deux jobs sans relation needs: entre eux s'exécutent en parallèle. npx eslint . --ext .js vérifie les fichiers JavaScript. Ajoutez un .eslintrc.json minimal dans le repo.

Vérification : Dans l'interface GitHub Actions, les jobs lint et test affichent des barres de progression simultanées.

Tâche 2 : Configurer le cache npm

Dans les jobs lint et test, configurez le cache avec actions/setup-node@v4 (option cache: 'npm'). Observez la différence de durée entre le premier run (cache miss) et le second run (cache hit).

Indice : cache: 'npm' dans actions/setup-node génère automatiquement une clé basée sur le hash de package-lock.json. Si package-lock.json n'a pas changé, node_modules est restauré depuis le cache.

Vérification : Le second run affiche "Cache restored from key: ..." dans les logs setup-node. La durée des étapes npm ci passe de ~15s à ~2s.

Tâche 3 : Générer et publier un artefact

Dans le job test, configurez Jest pour générer un rapport en json dans test-results/. Après le run des tests, uploadez ce dossier comme artefact nommé test-report avec une rétention de 7 jours.

Indice : jest --json --outputFile=test-results/results.json. Dans le workflow : uses: actions/upload-artifact@v4 avec name: test-report, path: test-results/, retention-days: 7. L'artefact est disponible dans l'interface Actions même si le job échoue (if: always()).

Vérification : Dans le résumé du run GitHub Actions, un encadré "Artifacts" liste test-report. Le JSON peut être téléchargé.

Tâche 4 : Télécharger l'artefact dans un job suivant

Ajoutez un job deploy-preview (qui dépend de test et lint) qui télécharge l'artefact test-report et affiche son contenu pour simuler une décision de déploiement. Ce job ne s'exécute que sur la branche main.

Indice : uses: actions/download-artifact@v4 avec name: test-report. Le dossier est restauré dans le répertoire courant. if: github.ref == 'refs/heads/main' limite l'exécution à main.

Vérification : Sur un push vers main, les 3 jobs s'exécutent : lint + test en parallèle, puis deploy-preview.

Tâche 5 : Créer un workflow réutilisable

Créez un second fichier .github/workflows/notify.yml avec le trigger workflow_call. Ce workflow accepte un input status (string) et un secret SLACK_WEBHOOK_URL (optionnel). Il affiche un message de notification simulé.

Indice :
`yaml
on:
workflow_call:
inputs:
status:
required: true
type: string
secrets:
SLACK_WEBHOOK_URL:
required: false
`
Le workflow notify.yml n'est jamais déclenché directement, seulement via uses:.

Vérification : Le fichier notify.yml existe et contient on: workflow_call.

Tâche 6 : Appeler le workflow réutilisable

Dans ci.yml, ajoutez un job notify qui appelle notify.yml via uses: ./.github/workflows/notify.yml. Passez status: 'success' comme input.

Indice : uses: ./.github/workflows/notify.yml@main pour un workflow du même repo, ou uses: org/repo/.github/workflows/notify.yml@main pour un repo externe. Les inputs se passent sous with:.

Vérification : Le job notify apparaît dans le graphe du workflow. Les logs affichent le message de notification avec le statut passé.

🗂️ Mini-Projet : Pipeline complet avec 4 jobs

Structure des workflows :

.github/
└── workflows/
    ├── ci.yml       ← pipeline principal
    └── notify.yml   ← workflow réutilisable

Graphe d'exécution :

[lint] ─┐
        ├──→ [deploy-preview] ──→ [notify]
[test] ─┘

Checkpoints de validation :

lint et test s'exécutent en parallèle (sans needs entre eux)
Le second run est plus rapide grâce au cache (logs : "Cache restored")
L'artefact test-report est visible dans l'interface Actions
deploy-preview ne s'exécute que sur main
notify.yml contient on: workflow_call
Le graphe du workflow dans GitHub affiche les 4 jobs

Exercice 07 : Projet Capstone - Pipeline Multi-Jobs avec Artefacts, Cache et Workflow Réutilisable

🎯 Objectifs

À la fin de cet exercice, vous serez capable de :

✅ Architecturer un pipeline en 3 jobs dépendants (lint → test → deploy-preview)
✅ Partager le rapport de tests entre jobs avec actions/upload-artifact et download-artifact
✅ Configurer un cache node_modules pour éviter les re-téléchargements
✅ Utiliser if: pour conditionner l'exécution d'une étape ou d'un job
✅ Extraire un workflow réutilisable avec workflow_call et l'invoquer depuis le pipeline principal

Durée estimée : 45 minutes

Difficulté : ⭐⭐⭐⭐☆ (Avancé)

Prérequis :

Exercice 06 complété (pipeline CI de base)
Module CI/CD Intermédiaire complété

📖 Contexte

📋 Énoncé

Restructurez le pipeline CI en 3 jobs avec cache, artefacts, conditions, et créez un workflow réutilisable pour la logique de notification.

🧭 Déroulement de l'exercice

Tâche 1 : Ajouter un job lint en parallèle

Ajoutez un job lint qui s'exécute en parallèle avec test (pas de needs). Ce job installe ESLint et vérifie la qualité du code. Les deux jobs peuvent tourner simultanément.

Indice : Deux jobs sans relation needs: entre eux s'exécutent en parallèle. npx eslint . --ext .js vérifie les fichiers JavaScript. Ajoutez un .eslintrc.json minimal dans le repo.

Vérification : Dans l'interface GitHub Actions, les jobs lint et test affichent des barres de progression simultanées.

Tâche 2 : Configurer le cache npm

Indice : cache: 'npm' dans actions/setup-node génère automatiquement une clé basée sur le hash de package-lock.json. Si package-lock.json n'a pas changé, node_modules est restauré depuis le cache.

Vérification : Le second run affiche "Cache restored from key: ..." dans les logs setup-node. La durée des étapes npm ci passe de ~15s à ~2s.

Tâche 3 : Générer et publier un artefact

Indice : jest --json --outputFile=test-results/results.json. Dans le workflow : uses: actions/upload-artifact@v4 avec name: test-report, path: test-results/, retention-days: 7. L'artefact est disponible dans l'interface Actions même si le job échoue (if: always()).

Vérification : Dans le résumé du run GitHub Actions, un encadré "Artifacts" liste test-report. Le JSON peut être téléchargé.

Tâche 4 : Télécharger l'artefact dans un job suivant

Indice : uses: actions/download-artifact@v4 avec name: test-report. Le dossier est restauré dans le répertoire courant. if: github.ref == 'refs/heads/main' limite l'exécution à main.

Vérification : Sur un push vers main, les 3 jobs s'exécutent : lint + test en parallèle, puis deploy-preview.

Tâche 5 : Créer un workflow réutilisable

Indice :
`yaml
on:
workflow_call:
inputs:
status:
required: true
type: string
secrets:
SLACK_WEBHOOK_URL:
required: false
`
Le workflow notify.yml n'est jamais déclenché directement, seulement via uses:.

Vérification : Le fichier notify.yml existe et contient on: workflow_call.

Tâche 6 : Appeler le workflow réutilisable

Dans ci.yml, ajoutez un job notify qui appelle notify.yml via uses: ./.github/workflows/notify.yml. Passez status: 'success' comme input.

Indice : uses: ./.github/workflows/notify.yml@main pour un workflow du même repo, ou uses: org/repo/.github/workflows/notify.yml@main pour un repo externe. Les inputs se passent sous with:.

Vérification : Le job notify apparaît dans le graphe du workflow. Les logs affichent le message de notification avec le statut passé.

🗂️ Mini-Projet : Pipeline complet avec 4 jobs

Structure des workflows :

.github/
└── workflows/
    ├── ci.yml       ← pipeline principal
    └── notify.yml   ← workflow réutilisable

Graphe d'exécution :

[lint] ─┐
        ├──→ [deploy-preview] ──→ [notify]
[test] ─┘

Checkpoints de validation :

lint et test s'exécutent en parallèle (sans needs entre eux)
Le second run est plus rapide grâce au cache (logs : "Cache restored")
L'artefact test-report est visible dans l'interface Actions
deploy-preview ne s'exécute que sur main
notify.yml contient on: workflow_call
Le graphe du workflow dans GitHub affiche les 4 jobs