Exercice : créer et exécuter un workflow de base

Effectué

Important

Vous avez besoin de votre propre abonnement Azure pour exécuter cet exercice et des frais pourraient vous être facturés. Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.

Vous souhaitez automatiser le déploiement des mises à jour sur le site web de votre société de jouets. La première étape consiste à créer un workflow de base dans GitHub Actions.

Dans cet exercice, vous allez :

  • Créez un compte GitHub et votre référentiel.
  • Créez un workflow de base.
  • Exécutez votre workflow de base.

Créez un référentiel dans GitHub

  1. Dans un navigateur, accédez à GitHub. Connectez-vous à l’aide de votre compte GitHub, ou créez un nouveau compte si vous n’en avez pas.

  2. Sélectionnez l’icône de plus (+) en haut à droite de la fenêtre, puis sélectionnez Nouveau dépôt.

    Screenshot of the GitHub interface that shows the menu for creating a new repository.

  3. Entrez les détails de votre nouveau référentiel :

    • Propriétaire : sélectionnez votre nom d’utilisateur GitHub dans le menu déroulant. Dans la capture d’écran, mygithubuser est le nom du compte GitHub du propriétaire du dépôt. Vous utiliserez le nom de votre compte plus loin dans ce module.
    • Nom du référentiel : entrez un nom explicite mais concis. Pour ce module, utilisez toy-website-workflow.
    • Description : incluez une description pour aider les autres utilisateurs à comprendre à quoi sert le dépôt.
    • Privé : vous pouvez utiliser GitHub pour créer des référentiels publics et privés. Créez un référentiel privé, car seules les personnes au sein de votre organisation doivent accéder aux fichiers de votre site Web de jouets. Vous pouvez accorder l’accès à d’autres utilisateurs ultérieurement.

    Une fois que vous avez terminé, la configuration de votre référentiel doit ressembler à la capture d’écran suivante :

    Screenshot of the GitHub interface showing the configuration for the repository to create.

  4. Cliquez sur Create repository (Créer le dépôt).

Cloner le référentiel

Dans Visual Studio Code, clonez votre référentiel.

  1. Sur la page du référentiel, sélectionnez le bouton Copier pour copier l’URL dans votre référentiel Git.

    Screenshot of the GitHub interface showing the new empty repository, with the repository URL copy button highlighted.

  2. Ouvrez Visual Studio Code.

  3. Ouvrez une fenêtre de terminal Visual Studio Code en sélectionnant Terminal>Nouveau terminal. Elle s’ouvre généralement en bas de l’écran.

  4. Dans le terminal, accédez au répertoire dans lequel vous souhaitez cloner le référentiel GitHub sur votre ordinateur local. Par exemple, pour cloner le référentiel dans le dossier toy-website-workflow, exécutez la commande suivante :

    cd toy-website-workflow
    
  5. Tapez git clone, puis collez l’URL que vous avez copiée précédemment et qui ressemble à ceci :

    git clone https://github.com/mygithubuser/toy-website-workflow
    

    Vous allez recevoir un avertissement indiquant que vous avez cloné un référentiel vide. Vous pouvez ignorer le message.

  6. C’est la première fois que vous utilisez ce dépôt : vous êtes donc invité à vous connecter.

    Sur Windows, tapez 1 pour vous authentifier à l’aide d’un navigateur web, puis sélectionnez Entrée.

    Sur macOS, sélectionnez Autoriser.

  7. Une fenêtre de navigateur s’affiche. Vous devrez peut-être vous reconnecter à GitHub. Sélectionnez Autoriser.

  8. Rouvrez Visual Studio Code dans le dossier du référentiel en exécutant la commande suivante :

    code -r toy-website-workflow
    

Conseil

Vous pouvez également modifier vos définitions de workflow GitHub Actions à l’aide de l’interface utilisateur web GitHub. Lorsque vous ouvrez une définition de workflow, GitHub vous aide à utiliser la syntaxe et la mise en retrait du fichier YAML, et fournit des exemples d’extraits de code pour les actions que vous souhaitez peut-être utiliser. Dans ce module, vous travaillerez avec le fichier de définition dans Visual Studio Code, mais vous pouvez utiliser l’éditeur de GitHub pour voir comment il fonctionne.

Créer une définition de workflow YAML

Maintenant que vous avez créé et cloné votre référentiel, vous êtes prêt à créer une définition de workflow de base.

  1. Dans Visual Studio Code, ouvrez l’Explorateur.

  2. À la racine de votre structure de dossiers toy-website-workflow, créez un nouveau dossier nommé .github.

    Notes

    Veillez à inclure le point au début du nom du dossier. Cela indique qu’il s’agit d’un dossier masqué, et GitHub a besoin du point pour que GitHub Actions puisse détecter la définition de workflow.

  3. Dans le dossier .github, créez un autre dossier nommé workflows.

  4. Dans le dossier workflows, créez un nouveau fichier nommé workflow.yml.

    Screenshot of the Visual Studio Code Explorer, with the .github/workflows folder and the workflow.yml file shown.

  5. Copiez la définition de workflow suivante dans ce fichier :

    name: deploy-toy-website
    
    on: [workflow_dispatch]
    
    jobs:
      say-hello:
        runs-on: ubuntu-latest
        steps:
          - name: 'placeholder step'
            run: echo "Hello world!"
    
  6. Enregistrez le fichier .

  7. Commitez et envoyez (push) le fichier à votre dépôt GitHub avec les commandes suivantes :

    git add .
    git commit -m "Add initial workflow definition"
    git push
    

Conseil

Visual Studio Code vous aide à utiliser la mise en retrait pour votre fichier YAML. Recherchez les lignes ondulées qui indiquent des erreurs de syntaxe, ou sélectionnez Afficher>Problèmes pour afficher une liste des problèmes dans votre fichier.

Exécuter le workflow

Vous avez créé une définition de workflow. GitHub Actions détecte automatiquement votre fichier de workflow, car il se trouve dans le répertoire .github/workflows.

  1. Dans votre navigateur, naviguez vers votre référentiel. Vous devrez peut-être actualiser la page pour voir vos modifications.

  2. Sélectionnez l’onglet Actions.

    Screenshot of the GitHub interface showing the repository page, and the Actions tab highlighted.

  3. Sélectionnez le workflow deploy-toy-website.

    Screenshot of the GitHub interface showing the Actions tab, with the deploy-toy-website workflow selected.

  4. Sélectionnez la liste déroulante Exécuter le workflow, puis sélectionnez le bouton Exécuter le workflow.

    Screenshot of the GitHub interface showing the Actions tab, with the Run workflow dropdown and button selected.

  5. Le workflow commence à s’exécuter. L’exécution peut prendre un certain temps et vous pouvez actualiser la page, mais elle doit normalement s’actualiser automatiquement, et vous montrer l’exécution en file d’attente ou en cours d’exécution, ou même terminée.

    Screenshot of the GitHub interface showing the Actions tab, with one workflow running.

    Notez que l’état de l’exécution est affiché initialement en file d’attente. Le démarrage de votre workflow peut prendre un certain temps. Votre travail est ajouté à une file d’attente pour un exécuteur et, une fois qu’un exécuteur est disponible, GitHub Actions attribue l’exécuteur et démarre le travail. La tâche travail passe alors à En cours d’exécution.

    Chaque exécution du workflow comprend un identifiant. Vous pouvez cet identificateur quand vous avez besoin de faire référence à l’exécution du workflow et pour trouver une exécution de workflow spécifique.

Vérifier l’exécution du workflow

  1. Quand l’exécution du workflow démarre, sélectionnez deploy-toy-website pour voir les détails de l’exécution. Actualisez la page jusqu’à ce que l’état de la tâche affiche Réussie.

    Screenshot of the GitHub interface showing the details of the workflow run, with the status and commit identifier highlighted.

    Notez également que la page contient un identificateur de la validation Git utilisée par l’exécution. L’identificateur du commit indique la version du contenu de votre dépôt utilisé par le workflow.

  2. Dans la liste des travaux, sélectionnez say-hello.

    Screenshot of the GitHub interface showing the run details menu, with the say-hello job highlighted.

  3. La page informations sur la tâche s’affiche, avec le journal des étapes exécutées par le workflow. Notez que votre étape « Espace réservé » est incluse.

    Screenshot of the GitHub interface showing the workflow run log, with the placeholder step highlighted.

    Notez que la liste comprend des étapes que vous n’avez pas spécifiées. Ces étapes sont créées automatiquement par GitHub Actions.

  4. Sélectionnez Étape Espace réservé.

    Screenshot of the GitHub interface showing the workflow run log, with the placeholder step log shown.

    Les journaux de cette étape comprennent le contenu de la commande tel qu’il a été spécifié dans le fichier YAML de votre workflow et le texte Hello world! envoyé par le script.

Il est judicieux de comprendre comment faire une référence croisée entre l’exécution de workflow et la validation qu’elle contenait. La liaison de l’exécution du workflow à une validation peut vous aider à suivre l’historique de vos déploiements et à diagnostiquer les problèmes.

  1. Sélectionnez Résumé pour revenir au résumé de l’exécution.

  2. Sélectionnez l’identifiant de commit. GitHub affiche les détails de la validation qui a déclenché l’exécution du workflow.