Exercice 03 : Utiliser des actions du Marketplace

🎯 Objectifs

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

✅ Utiliser actions/checkout@v4 pour cloner le code dans le runner
✅ Configurer actions/setup-node@v4 avec version et cache npm
✅ Installer des dépendances et construire une application Node.js
✅ Uploader des artefacts de build avec actions/upload-artifact@v4
✅ Comprendre la différence entre run: et uses: dans un step

Durée estimée : 20 min | Difficulté : ⭐⭐☆☆☆

📖 Contexte

Le Marketplace GitHub Actions contient des milliers d'actions prêtes à l'emploi. Au lieu de réinventer la roue, vous utilisez des actions maintenues par GitHub ou la communauté.

Les trois actions les plus utilisées dans tout pipeline Node.js :

Action	Rôle
`actions/checkout@v4`	Clone votre repository dans le runner
`actions/setup-node@v4`	Installe Node.js et configure le cache
`actions/upload-artifact@v4`	Sauvegarde des fichiers entre jobs ou pour téléchargement

Sans actions/checkout, le runner démarre sur une machine vide - votre code n'y est pas.

📋 Énoncé

Vous allez créer un workflow qui clone votre repository, installe les dépendances d'une application Node.js, lance le build, puis uploade le dossier dist/ comme artefact téléchargeable.

Résultat attendu :

Le workflow s'exécute sur chaque push
Les dépendances npm sont cachées entre les runs
Le dossier dist/ est disponible en téléchargement dans l'onglet Actions

🧭 Déroulement

Tâche 1 : Créer une application Node.js minimale

Dans votre repository, créez un package.json avec un script build qui génère un fichier dans dist/. Ce sera la cible de votre pipeline.

Indice :
`json
{
"name": "mon-app",
"version": "1.0.0",
"scripts": {
"build": "mkdir -p dist && echo 'build OK' > dist/output.txt"
}
}
`
Ce script minimal crée dist/output.txt - suffisant pour tester l'upload d'artefact.

Vérification : npm run build crée bien le fichier dist/output.txt en local.

Tâche 2 : Ajouter actions/checkout

Créez .github/workflows/build.yml. Dans le job build, ajoutez un premier step qui utilise actions/checkout@v4. Sans ce step, les steps suivants n'ont pas accès à votre code.

Indice :
`yaml
steps:
- name: Récupérer le code
uses: actions/checkout@v4
`
uses: référence une action externe. Le format est {propriétaire}/{repo}@{version}. Toujours épingler à une version majeure (@v4) plutôt qu'à @latest pour la stabilité.

Vérification : Le step s'exécute sans erreur. Les logs montrent "Checking out the ref".

Tâche 3 : Configurer actions/setup-node@v4

Ajoutez un step actions/setup-node@v4 qui installe Node.js 20 et active le cache npm. Le cache évite de re-télécharger node_modules à chaque run.

Indice :
`yaml
- name: Configurer Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
`
with: passe des paramètres à l'action, comme des arguments de fonction. cache: 'npm' met en cache ~/.npm basé sur le hash de package-lock.json.

Vérification : Les logs affichent "Setup node Version 20.x.x". Lors du second run, vous voyez "Cache hit" dans les logs.

Tâche 4 : Installer les dépendances et lancer le build

Ajoutez deux steps : un pour installer les dépendances avec npm ci, un pour lancer le build avec npm run build.

Indice : npm ci (clean install) est préféré à npm install en CI car il :
- Utilise exactement package-lock.json (reproductibilité)
- Supprime node_modules avant d'installer (environnement propre)
- Est plus rapide grâce au cache configuré à l'étape précédente

Vérification : Les logs montrent "added X packages" puis le script build s'exécute sans erreur.

Tâche 5 : Uploader le dossier dist/ comme artefact

Ajoutez un step final qui utilise actions/upload-artifact@v4 pour uploader le contenu du dossier dist/ sous le nom build-output.

Indice :
`yaml
- name: Uploader les artefacts
uses: actions/upload-artifact@v4
with:
name: build-output
path: dist/
`
Les artefacts sont conservés 90 jours par défaut. Ils sont téléchargeables depuis la page du run dans l'onglet Actions.

Vérification : En bas de la page du run GitHub Actions, une section "Artifacts" apparaît avec build-output téléchargeable.

🗂️ Mini-Projet

Étendez le workflow pour supporter plusieurs versions de Node.js en parallèle grâce à une matrix strategy.

yaml

# Checkpoints à valider :
# [ ] actions/checkout@v4 est présent avant tout step accédant au code
# [ ] actions/setup-node@v4 est configuré avec node-version et cache
# [ ] npm ci est utilisé (pas npm install)
# [ ] npm run build s'exécute sans erreur
# [ ] Un artefact "build-output" apparaît dans le run Actions
# [ ] Bonus : matrix strategy teste Node.js 18, 20 et 22

Indice pour la matrix :

yaml

strategy:
  matrix:
    node-version: [18, 20, 22]

Exercice 03 : Utiliser des actions du Marketplace

🎯 Objectifs

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

✅ Utiliser actions/checkout@v4 pour cloner le code dans le runner
✅ Configurer actions/setup-node@v4 avec version et cache npm
✅ Installer des dépendances et construire une application Node.js
✅ Uploader des artefacts de build avec actions/upload-artifact@v4
✅ Comprendre la différence entre run: et uses: dans un step

Durée estimée : 20 min | Difficulté : ⭐⭐☆☆☆

📖 Contexte

Le Marketplace GitHub Actions contient des milliers d'actions prêtes à l'emploi. Au lieu de réinventer la roue, vous utilisez des actions maintenues par GitHub ou la communauté.

Les trois actions les plus utilisées dans tout pipeline Node.js :

Action	Rôle
`actions/checkout@v4`	Clone votre repository dans le runner
`actions/setup-node@v4`	Installe Node.js et configure le cache
`actions/upload-artifact@v4`	Sauvegarde des fichiers entre jobs ou pour téléchargement

Sans actions/checkout, le runner démarre sur une machine vide - votre code n'y est pas.

📋 Énoncé

Vous allez créer un workflow qui clone votre repository, installe les dépendances d'une application Node.js, lance le build, puis uploade le dossier dist/ comme artefact téléchargeable.

Résultat attendu :

Le workflow s'exécute sur chaque push
Les dépendances npm sont cachées entre les runs
Le dossier dist/ est disponible en téléchargement dans l'onglet Actions

🧭 Déroulement

Tâche 1 : Créer une application Node.js minimale

Dans votre repository, créez un package.json avec un script build qui génère un fichier dans dist/. Ce sera la cible de votre pipeline.

Indice :
`json
{
"name": "mon-app",
"version": "1.0.0",
"scripts": {
"build": "mkdir -p dist && echo 'build OK' > dist/output.txt"
}
}
`
Ce script minimal crée dist/output.txt - suffisant pour tester l'upload d'artefact.

Vérification : npm run build crée bien le fichier dist/output.txt en local.

Tâche 2 : Ajouter actions/checkout

Créez .github/workflows/build.yml. Dans le job build, ajoutez un premier step qui utilise actions/checkout@v4. Sans ce step, les steps suivants n'ont pas accès à votre code.

Indice :
`yaml
steps:
- name: Récupérer le code
uses: actions/checkout@v4
`
uses: référence une action externe. Le format est {propriétaire}/{repo}@{version}. Toujours épingler à une version majeure (@v4) plutôt qu'à @latest pour la stabilité.

Vérification : Le step s'exécute sans erreur. Les logs montrent "Checking out the ref".

Tâche 3 : Configurer actions/setup-node@v4

Ajoutez un step actions/setup-node@v4 qui installe Node.js 20 et active le cache npm. Le cache évite de re-télécharger node_modules à chaque run.

Indice :
`yaml
- name: Configurer Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
`
with: passe des paramètres à l'action, comme des arguments de fonction. cache: 'npm' met en cache ~/.npm basé sur le hash de package-lock.json.

Vérification : Les logs affichent "Setup node Version 20.x.x". Lors du second run, vous voyez "Cache hit" dans les logs.

Tâche 4 : Installer les dépendances et lancer le build

Ajoutez deux steps : un pour installer les dépendances avec npm ci, un pour lancer le build avec npm run build.

Indice : npm ci (clean install) est préféré à npm install en CI car il :
- Utilise exactement package-lock.json (reproductibilité)
- Supprime node_modules avant d'installer (environnement propre)
- Est plus rapide grâce au cache configuré à l'étape précédente

Vérification : Les logs montrent "added X packages" puis le script build s'exécute sans erreur.

Tâche 5 : Uploader le dossier dist/ comme artefact

Ajoutez un step final qui utilise actions/upload-artifact@v4 pour uploader le contenu du dossier dist/ sous le nom build-output.

Indice :
`yaml
- name: Uploader les artefacts
uses: actions/upload-artifact@v4
with:
name: build-output
path: dist/
`
Les artefacts sont conservés 90 jours par défaut. Ils sont téléchargeables depuis la page du run dans l'onglet Actions.

Vérification : En bas de la page du run GitHub Actions, une section "Artifacts" apparaît avec build-output téléchargeable.

🗂️ Mini-Projet

Étendez le workflow pour supporter plusieurs versions de Node.js en parallèle grâce à une matrix strategy.

yaml

# Checkpoints à valider :
# [ ] actions/checkout@v4 est présent avant tout step accédant au code
# [ ] actions/setup-node@v4 est configuré avec node-version et cache
# [ ] npm ci est utilisé (pas npm install)
# [ ] npm run build s'exécute sans erreur
# [ ] Un artefact "build-output" apparaît dans le run Actions
# [ ] Bonus : matrix strategy teste Node.js 18, 20 et 22

Indice pour la matrix :

yaml

strategy:
  matrix:
    node-version: [18, 20, 22]