Utilisation de l'Action Checkout dans GitHub Actions

Introduction

Dans ce laboratoire, vous apprendrez à utiliser l'action actions/checkout, qui est l'une des étapes les plus essentielles de tout workflow GitHub Actions. Par défaut, un runner GitHub Actions démarre dans un répertoire vide. Pour construire, tester ou déployer votre code, vous devez d'abord cloner le dépôt dans l'espace de travail du runner.

Vous allez créer un fichier de workflow, le configurer pour cloner votre code, puis vérifier que les fichiers sont accessibles en les listant dans les journaux (logs). Ce processus simule la configuration standard d'un pipeline d'Intégration Continue (CI).

Ce laboratoire s'appuie sur le dépôt que vous avez créé lors des laboratoires précédents. Vous allez cloner le dépôt github-actions-demo et créer un nouveau workflow qui utilise l'action checkout.

Ajouter une étape pour utiliser actions/checkout@v4 dans le workflow

Dans cette étape, vous allez cloner le dépôt et créer un workflow qui utilise l'action actions/checkout. Cette action extrait (checks out) votre dépôt sous $GITHUB_WORKSPACE, permettant ainsi à votre workflow d'y accéder.

Sur la page de votre dépôt GitHub pour github-actions-demo, cliquez sur le bouton vert Code.
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.
Ouvrez le terminal dans l'environnement LabEx. Le chemin par défaut est ~/project.
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

Naviguez dans le dépôt cloné :

cd ~/project/github-actions-demo

Créez un nouveau fichier de workflow nommé ci.yml à l'intérieur du répertoire .github/workflows :

touch .github/workflows/ci.yml

Ouvrez .github/workflows/ci.yml dans l'éditeur WebIDE et ajoutez le contenu suivant. Cette configuration définit un workflow nommé "CI" qui s'exécute à chaque événement push. Il comprend un seul job nommé build s'exécutant sur ubuntu-latest, avec une étape pour extraire le code (checkout the code).

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

Cette ligne uses: actions/checkout@v4 indique à GitHub Actions de télécharger et d'exécuter la version v4 de l'action de checkout officielle.

Ajouter une étape pour lister les fichiers avec la commande run ls -la

Dans cette étape, vous allez ajouter une deuxième étape à votre workflow pour vérifier que l'action de checkout a bien récupéré vos fichiers. Vous utiliserez une commande shell standard pour lister les fichiers dans le répertoire courant.

Ouvrez .github/workflows/ci.yml et ajoutez l'étape suivante à la liste des steps. Assurez-vous que l'indentation est correctement alignée avec l'étape précédente.

- name: List files
  run: ls -la

Votre fichier .github/workflows/ci.yml complet devrait maintenant ressembler à ceci :

name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: List files
        run: ls -la

Le mot-clé run vous permet d'exécuter des programmes en ligne de commande. Ici, ls -la listera tous les fichiers, y compris les fichiers cachés, à la racine du dépôt (repository root).

Créer un fichier exemple nommé index.js dans le dépôt

Dans cette étape, vous allez créer un fichier d'exemple dans votre dépôt. Ce fichier servira de preuve que l'action actions/checkout fonctionne correctement lorsque nous la verrons listée dans les journaux (logs) du workflow.

Assurez-vous d'être dans le répertoire du dépôt :

cd ~/project/github-actions-demo

Créez un fichier JavaScript simple nommé index.js à la racine de votre dépôt :

echo "console.log('Hello, GitHub Actions!');" > index.js

Vous pouvez vérifier la création du fichier en exécutant :

ls -l index.js

Ce fichier représente le code source de votre application que le pipeline CI (Intégration Continue) construirait ou testerait habituellement.

Commit et push du fichier exemple et des mises à jour du workflow

Dans cette étape, vous allez commiter vos changements et les pousser vers GitHub. Le fait de pousser ce commit déclenchera le workflow que nous avons défini grâce à la configuration on: [push].

Assurez-vous d'être dans le répertoire du dépôt :

cd ~/project/github-actions-demo

Vérifiez le statut de votre dépôt pour voir les fichiers non suivis (untracked files) :

git status

Vous devriez voir .github/workflows/ci.yml et index.js comme non suivis.

Mettez en staging (stage) tous les changements :

git add .

Commitez les changements avec un message descriptif :

git commit -m "Add CI workflow and index.js"

Exemple de sortie :

[main ... ] Add CI workflow and index.js
 2 files changed, 14 insertions(+), 0 deletions(-)
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 index.js

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 :

Une fenêtre contextuelle apparaîtra avec le message : "The extension 'GitHub' wants to sign in using GitHub." Cliquez sur Allow.
Une nouvelle notification apparaîtra. Cliquez sur "Copy&Continue to GitHub", puis cliquez sur "Open" dans l'invite suivante.
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.
Attendez quelques secondes, et vous verrez le terminal terminer avec succès l'opération de push.

Note sur la 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).

Exemple de sortie :

Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 4 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 512 bytes | 512.00 KiB/s, done.
Total 4 (delta 1), reused 0 (delta 0), pack-reused 0
To https://github.com/your-username/github-actions-demo.git
   1234567..abcdef1  main -> main

Ce push déclenche le workflow sur GitHub.

Vérifier l'exécution du workflow pour confirmer la liste des fichiers dans les journaux

Après avoir poussé votre code, le workflow se déclenchera automatiquement sur GitHub. Vous pouvez consulter les journaux d'exécution du workflow pour vérifier que l'action checkout a bien récupéré vos fichiers.

Visitez votre dépôt sur GitHub dans un navigateur web : https://github.com/your-username/github-actions-demo
Cliquez sur l'onglet Actions en haut de la page du dépôt.
Vous devriez voir une exécution de workflow listée, probablement nommée "Add CI workflow and index.js" ou "CI".

Note : Lorsque vous poussez du code, plusieurs Actions peuvent être déclenchées si vous avez plusieurs fichiers de workflow dans votre dépôt. Veuillez identifier l'exécution de workflow correcte en vérifiant le nom du workflow dans la barre latérale gauche ou en utilisant la liste des exécutions de workflow sur le côté droit.

Cliquez sur le titre de l'exécution du workflow, puis cliquez sur le job build.
Développez l'étape List files pour voir la sortie.

Vous devriez voir la sortie de la commande ls -la, qui inclut index.js et d'autres fichiers de votre dépôt :

Run ls -la
  ls -la
  shell: /usr/bin/bash -e {0}
total XX
drwxr-xr-x  X runner ... .
drwxr-xr-x  X runner ... ..
drwxr-xr-x  X runner ... .git
drwxr-xr-x  X runner ... .github
-rw-r--r--  X runner ... index.js
...

Ceci confirme que l'étape actions/checkout a réussi à récupérer (checked out) votre dépôt. Sans l'étape de checkout, la commande ls -la n'afficherait qu'un répertoire vide. Cela démontre pourquoi l'action de checkout est essentielle : elle rend les fichiers de votre dépôt disponibles pour l'exécuteur (runner) du workflow.

Résumé

Dans ce laboratoire, vous avez réussi à créer un workflow GitHub Actions qui utilise l'action actions/checkout. Vous avez appris à :

Configurer la structure de répertoire .github/workflows.
Définir un workflow qui se déclenche lors des événements push.
Utiliser actions/checkout@v4 pour cloner votre dépôt dans l'exécuteur (runner).
Ajouter une étape pour vérifier la présence des fichiers en utilisant ls -la.

Ceci constitue l'étape fondamentale pour presque tous les pipelines CI/CD (Intégration Continue/Déploiement Continu), permettant aux étapes suivantes de construire, tester et déployer le code de votre application.

GitHub Actions Utilisant l'Action Checkout