Téléchargement d'Artefacts de Build avec GitHub Actions

Introduction

Dans un pipeline d'Intégration Continue (CI), un job produit souvent des fichiers (tels que des binaires compilés, des bundles webpack ou des rapports de tests) que vous souhaitez conserver ou partager avec d'autres jobs. Ces fichiers sont appelés des artefacts (artifacts).

Par défaut, les fichiers créés lors de l'exécution d'un workflow sont perdus lorsque cette exécution se termine. Pour les conserver, vous devez les "téléverser" (upload) en tant qu'artefacts.

Dans ce laboratoire, vous allez modifier votre workflow Node.js pour simuler un processus de construction (build) qui crée un répertoire dist, puis utiliser l'action actions/upload-artifact pour sauvegarder ce répertoire.

Ce laboratoire s'appuie sur le dépôt que vous avez créé lors des laboratoires précédents. Vous travaillerez avec le dépôt github-actions-demo.

Mise à jour du workflow pour générer un fichier de build

Dans cette étape, vous allez modifier le fichier de workflow pour simuler un processus de build. Vous ajouterez une étape qui crée un répertoire dist et un fichier artefact factice (dummy artifact file).

1. Sur la page de votre dépôt GitHub pour github-actions-demo, cliquez sur le bouton vert Code.
2. Assurez-vous que l'onglet HTTPS est sélectionné et copiez l'URL. Elle devrait ressembler à https://github.com/your-username/github-actions-demo.git.
3. Ouvrez le terminal dans l'environnement LabEx. Le chemin par défaut est ~/project.
4. Utilisez la commande git clone pour télécharger le dépôt. Remplacez your-username par votre nom d'utilisateur GitHub réel.

cd ~/project
git clone https://github.com/your-username/github-actions-demo.git

Exemple de sortie :

Cloning into 'github-actions-demo'...
remote: Enumerating objects: X, done.
remote: Counting objects: 100% (X/X), done.
remote: Total X (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (X/X), done.

5. Naviguez dans le dépôt cloné :

cd ~/project/github-actions-demo

3. Créez un nouveau fichier de workflow .github/workflows/upload-artifacts.yml en utilisant l'éditeur WebIDE. Vous pouvez trouver le fichier dans l'explorateur de fichiers à gauche sous project/github-actions-demo/.github/workflows/.

4. Commencez par créer la structure de workflow de base. Ajoutez le nom du workflow et le déclencheur (trigger) :

name: Upload Artifacts

on: [push]

5. Ajoutez la section des jobs et définissez le job de build avec son exécuteur (runner) :

jobs:
  build:
    runs-on: ubuntu-latest

6. Ajoutez la section des étapes (steps). Tout d'abord, ajoutez l'étape de checkout :

steps:
  - uses: actions/checkout@v4

7. Ajoutez l'étape de configuration de Node.js :

- name: Use Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20"

8. Ajoutez l'étape pour installer les dépendances :

- name: Install dependencies
  run: npm install

9. Ajoutez l'étape de build qui crée le répertoire dist et un fichier à l'intérieur :

- name: Build project
  run: |
    mkdir dist
    echo "This is the build artifact" > dist/build.txt

10. Ajoutez l'étape de test :

- name: Run tests
  run: npm test

Votre fichier complet devrait maintenant ressembler à ceci :

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test

Explication

• mkdir dist: Crée un répertoire nommé dist.
• echo ... > dist/build.txt: Crée un fichier texte simple dans dist pour simuler un actif compilé (compiled asset).

Enregistrez le fichier (Ctrl+S ou Cmd+S) après avoir effectué les modifications.

Utiliser actions/upload-artifact@v4 pour téléverser le répertoire dist

Maintenant que nous avons produit des fichiers, nous devons les télécharger. Nous utiliserons l'action officielle actions/upload-artifact.

1. Dans .github/workflows/upload-artifacts.yml, ajoutez une nouvelle étape à la fin de la tâche (job) :

- name: Upload build artifact
  uses: actions/upload-artifact@v4
  with:
    name: build-assets
    path: dist

2. Votre fichier complet devrait ressembler à ceci :

name: Upload Artifacts

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: |
          mkdir dist
          echo "This is the build artifact" > dist/build.txt
      - name: Run tests
        run: npm test
      - name: Upload build artifact
        uses: actions/upload-artifact@v4
        with:
          name: build-assets
          path: dist

Explication

• uses: actions/upload-artifact@v4: Appelle l'action pour gérer le téléchargement.
• name: build-assets: Le nom de l'artefact tel qu'il apparaîtra dans l'interface utilisateur de GitHub.
• path: dist: Le répertoire (ou fichier) à télécharger.

Enregistrez le fichier (Ctrl+S ou Cmd+S).

Commit, push, et vérifiez l'artefact dans l'interface utilisateur GitHub

Dans cette étape, vous allez commiter les changements et les pousser vers GitHub. Cela déclenchera le workflow que vous venez de mettre à jour.

1. Assurez-vous d'être dans le répertoire du dépôt (repository) :

cd ~/project/github-actions-demo

2. Mettez les changements en zone de staging :

git add .

3. Commitez les changements :

git commit -m "Add build step and upload artifacts"

4. Poussez les changements vers le dépôt distant sur GitHub :

git push

Note sur l'Authentification

Lorsque vous exécutez git push, le WebIDE vous invitera automatiquement à vous authentifier. Suivez ces étapes détaillées :

1. Une fenêtre contextuelle (popup) apparaîtra avec le message : "The extension 'GitHub' wants to sign in using GitHub." Cliquez sur Allow.
2. Une nouvelle notification apparaîtra. Cliquez sur "Copy&Continue to GitHub", puis cliquez sur "Open" dans l'invite suivante.
3. Connectez-vous à votre compte GitHub dans la fenêtre du navigateur qui s'ouvre, et entrez le code d'autorisation qui a été copié. Après avoir confirmé l'autorisation, la page se fermera automatiquement.
4. Attendez quelques secondes, et vous verrez le terminal terminer avec succès l'opération de push.

Note de confidentialité : Le WebIDE demandera un accès complet à votre compte GitHub à des fins d'authentification. Vous n'avez pas à vous soucier des problèmes de confidentialité - la VM LabEx sera immédiatement détruite après avoir terminé le laboratoire actuel, et vos informations d'identification et d'autorisation ne seront pas conservées.

Ce processus d'authentification ne nécessite aucune configuration manuelle du nom d'utilisateur ou du Personal Access Token (Jeton d'Accès Personnel).

Vérification sur GitHub

1. Visitez votre dépôt sur GitHub dans un navigateur web.
2. Cliquez sur l'onglet Actions.
3. Cliquez sur la dernière exécution de workflow (par exemple, "Add build step and upload artifacts").
4. Faites défiler jusqu'au bas de la page de résumé. Vous devriez voir une section intitulée Artifacts.
5. Vous devriez voir un artefact nommé build-assets.
6. Cliquez dessus pour le télécharger. Ce sera un fichier zip contenant build.txt.

Résumé

Dans ce laboratoire, vous avez appris comment persister des données à partir d'une exécution de workflow en utilisant des artefacts. Vous avez :

1. Créé une étape de "build" qui a généré des fichiers de sortie.
2. Utilisé actions/upload-artifact pour sauvegarder le répertoire dist.
3. Vérifié que l'artefact était disponible au téléchargement dans l'interface utilisateur (UI) de GitHub.

Les artefacts sont essentiels pour partager des fichiers entre des jobs (par exemple, d'un job de build à un job de déploiement) ou pour déboguer des échecs en téléversant des journaux (logs).