Gérer efficacement les artefacts des actions GitHub pour déployer des versions

Tutoriels

Votre équipe a-t-elle investi beaucoup d’efforts dans l’emballage manuel du code ? S’il en est ainsi, il est grand temps d’utiliser les Actions Artifacts de GitHub, afin que votre équipe puisse automatiser cette procédure. Dans le même temps, vous réduisez la variabilité des versions et économisez du temps pour vous consacrer à d’autres tâches cruciales.

Les Actions Artifacts de GitHub vous permettent de transférer efficacement des données d’une tâche active à une autre, éliminant ainsi les tâches répétitives et chronophages liées au déploiement. Dans ce tutoriel, vous apprendrez comment utiliser et gérer les artifacts pour déployer une application React sur Netlify.

Lisez la suite et commencez à créer des déploiements cohérents !

Prérequis

Ce tutoriel sera une démonstration pratique. Si vous souhaitez suivre, assurez-vous d’avoir une application React simple et un dépôt GitHub. Ce tutoriel utilise un dépôt d’application de compteur React.

Création d’un flux de travail CI/CD

Lorsqu’une tâche dans un flux de travail GitHub Actions se termine, les données qu’elle traite et génère sont également terminées. Les données appelées artifacts peuvent être conservées sur la page du dépôt après la fin des tâches et peuvent être téléchargées à l’aide de l’action upload-artifact.

Mais avant d’utiliser les artifacts de GitHub Actions pour vos déploiements, vous devez d’abord créer un flux de travail CI/CD pour votre application :

Articles connexes :Comment créer un pipeline CI/CD avec Jenkins

1. Créez un dossier .github dans le répertoire racine de votre application et créez un sous-dossier appelé workflows.

2. Ensuite, créez le fichier de workflow (un fichier .yml) dans le dossier workflows. Vous pouvez nommer le fichier comme vous le souhaitez. Mais pour ce tutoriel, le fichier est nommé ci.yml.

La structure des ressources de votre fichier de workflow devrait ressembler à celle ci-dessous.

Verifying workflow resource structure

3. Ajoutez le code suivant dans le fichier ci.yml et enregistrez les modifications. Le code ci-dessous crée un workflow appelé CI avec un travail de construction pour l’application.

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
# Le workflow sera déclenché lors d'un événement de push ou de pull sur la branche principale

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
# Système d'exploitation sur lequel s'exécuter
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v3
# Obtenir le code depuis le dépôt
    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
           node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm ci

    - name: Build app
      run: npm run build

    - name: Run tests
      run: npm run test

4. Maintenant, ajoutez et validez les modifications, et poussez-les vers votre dépôt GitHub distant.

Si le push a réussi, vous verrez le commit avec un cercle de couleur ambre, comme indiqué ci-dessous, indiquant que le workflow est en cours d’exécution.

Verifying successful commit and push to the remote repository

5. Cliquez sur l’onglet Actions pour voir le workflow.

Viewing the workflow

6. Cliquez sur n’importe quel travail de construction du côté gauche et développez le travail de construction de l’application. Vous verrez les données du travail de construction (fichiers statiques) générées. Ce sont les fichiers dont vous avez besoin pour le déploiement.

Ces fichiers générés sont perdus lorsque le serveur exécutant le travail est supprimé (ou lorsque le travail se termine). Comme vous aurez besoin de ces fichiers pour le déploiement, vous mettrez en œuvre une étape pour prendre ces fichiers et les télécharger en tant qu’artefact dans la section suivante.

Viewing the builds

7. Enfin, ajoutez le code suivant après l’exécution de vos tests dans le bloc des étapes de votre travail de construction.

Le code ci-dessous télécharge un artefact nommé « production » depuis le répertoire de construction en utilisant l’action actions/upload-artifact@v3.

Les fichiers générés sont perdus lorsque le serveur exécutant le travail est éliminé ou lorsque le travail se termine. Comme vous aurez besoin de ces fichiers pour le déploiement, le code ci-dessous met en œuvre une étape pour les prendre et les télécharger en tant qu’artefact.

# Télécharger l'Artéfact
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build

Configuration d’une période de rétention personnalisée pour l’artefact

Les artefacts sont stockés pendant 90 jours par défaut avant d’être effacés. Mais en fonction du type de dépôt, vous pouvez modifier cette période de rétention.

Voici les valeurs que vous pouvez définir pour personnaliser une période de rétention d’artefact:

  • Dépôt privé – Toute valeur entre 1 et 400 jours.
  • Dépôt public – Toute valeur entre 1 et 90 jours seulement.

Pour définir une période de rétention personnalisée d’artefact, mettez à jour votre fichier YAML de flux de travail en incluant retention-days: 2 dans votre étape # Télécharger l'Artéfact.

# Télécharger l'Artéfact
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build
    # Personnaliser la Période de Rétention de l'Artéfact
		retention-days: 2

Alternativement, configurez la période de rétention de l’artefact comme suit via GitHub:

  • Naviguez vers l’onglet Paramètres dans le dépôt.
  • Cliquez sur Action (panneau de gauche) pour déployer le menu déroulant, et sélectionnez Général.
  • Entrez le nombre de jours pendant lesquels vous souhaitez conserver l’artefact dans la section de rétention de l’artefact et des journaux ci-dessous, puis cliquez sur Enregistrer.
click Save

Importer un projet depuis un dépôt Git vers Netlify

L’artefact de construction peut désormais être accédé dans un autre travail du flux de travail en le téléchargeant car vous avez une étape pour télécharger l’artefact, ce qui réduit le temps de complétion du flux de travail. Vous ajouterez une tâche de déploiement à votre flux de travail, et l’une des étapes de ce travail télécharge l’élément téléversé.

Mais avant de mettre à jour votre flux de travail, vous configurerez Netlify pour le déploiement de l’application:

1. Ouvrez votre navigateur Web préféré, accédez à Netlify et connectez-vous avec votre compte GitHub.

2. Une fois connecté, cliquez sur Ajouter un nouveau site dans la section Sites, et sélectionnez Importer un projet existant pour démarrer l’importation de votre projet.

Initiating importing project to Netlify

3. Cliquez sur GitHub car vous utiliserez le dépôt que vous avez créé pour ce tutoriel sur GitHub. Une fenêtre contextuelle apparaît où vous autoriserez Netlify à accéder à votre identité GitHub.

Choosing GitHub as the Git provider

4. Une fois autorisé, recherchez et sélectionnez le dépôt à partir duquel vous souhaitez importer le projet.

Selecting the GitHub repository to import the project from

5. Sur la nouvelle page, configurez les paramètres de base de la construction du site, tels que la branche à partir de laquelle vous souhaitez déployer et la commande de construction. Mais comme vous déploierez à l’aide des actions GitHub, laissez les champs de commande de construction et de répertoire de publication vides.

Cliquez sur « Déployer le site » après avoir configuré les paramètres de construction, et vous verrez que le site est en cours de déploiement. Une fois déployé, un lien en direct sera généré pour le site.

Si vous avez laissé le champ de commande de construction vide, accéder au lien affichera une page 404 car l’application n’a pas été construite.

Configuring basic build settings for the site

6. Ensuite, cliquez sur « Paramètres du site » pour examiner les informations sur le site (étape six).

Accessing the site details

7. Enfin, sur la page des détails du site, notez l’ID du site ci-dessous dans la section Informations sur le site pour une utilisation ultérieure.

Noting the Site ID

Création d’un jeton d’accès personnel

Maintenant que vous avez votre ID de site, vous devez obtenir un jeton d’accès. Le jeton d’accès personnel donnera accès à votre compte Netlify afin que les actions de GitHub effectuent le déploiement sur Netlify.

1. Cliquez sur votre icône de profil (en haut à droite) et choisissez Paramètres utilisateur pour accéder à vos paramètres de profil.

Accessing the profile settings

2. Sur la nouvelle page, cliquez sur Applications (panneau de gauche) → Nouveau jeton d’accès (sous la section Jetons d’accès personnels) pour initier la création d’un nouveau jeton d’accès.

Initiating creating a new access token

3. Sur la nouvelle page, saisissez un nom descriptif pour le jeton et cliquez sur Générer le jeton.

Generating a new personal access token

4. Maintenant, copiez le jeton dans un endroit sûr.

Copying the new personal access token

Sécurisation de l’ID du site et du jeton d’accès en créant des secrets

Maintenant que vous avez l’ID du site et le jeton d’accès de Netlify, vous pouvez les ajouter à votre dépôt pour les utiliser dans le flux de travail des actions. Mais d’abord, vous devrez sécuriser votre ID de site et votre jeton d’accès en créant des secrets.

Relatif:Lancement des variables d’environnement et des secrets de GitHub Actions

1. Accédez à votre dépôt GitHub sur votre navigateur.

2. Ensuite, cliquez sur l’onglet Paramètres → Secrets (panneau de gauche) → Actions (sous Secrets) pour accéder à la liste des actions disponibles sur votre dépôt.

Accessing the list of actions in the GitHub repository

3. Cliquez sur Nouveau secret de dépôt sur la page des secrets des actions pour initier l’ajout d’un secret.

Initiating creating a new repository secret

4. Maintenant, fournissez un Nom descriptif pour le nouveau secret. Mais ce tutoriel utilise NETLIFY_AUTH_TOKEN comme nom de secret.

Ajoutez votre jeton d’accès en tant que Valeur et cliquez sur Ajouter un secret pour créer le nouveau secret.

Adding a secret for the access token

5. Enfin, répétez l’étape quatre, mais cette fois, ajoutez un secret pour l’ID de votre site.

Une fois ajoutés, vous verrez les secrets dans la section Secrets du dépôt, comme indiqué ci-dessous.

Verifying the newly-added secrets

Téléchargement et déploiement de l’artefact sur Netlify

Maintenant que votre site Netlify et vos secrets sont configurés, vous inclurez une étape dans votre flux de travail pour déployer sur Netlify en utilisant vos secrets.

1. Mettez à jour votre flux de travail en ajoutant le code ci-dessous contenant le travail de déploiement.

Le code suivant contient des étapes pour télécharger l’artefact téléchargé et une autre étape pour le déployer sur Netlify.

Vous pouvez trouver le code complet pour le fichier ci.yml dans le dépôt GitHub de ATA.

deploy:
  name: Deploy Nom du travail
  needs: build # Le travail de construction doit s'exécuter avec succès pour que le travail de déploiement s'exécute
  runs-on: ubuntu-latest

  steps:
  - name: Download artifact
    uses: actions/download-artifact@v3
# Télécharge les fichiers téléchargés
    with:
      name: production
      path: ./build

  - name: Deploy to Netlify
    uses: netlify/actions/cli@master
# Étape de déploiement sur Netlify
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
# Secrets pour l'authentification
    with:
      args: deploy --dir=build --prod

2. Ensuite, ajoutez et poussez les modifications vers le référentiel distant.

Vous devriez voir le dernier commit s’exécuter sur la page des workflows du référentiel, comme indiqué ci-dessous.

Une fois commis, cliquez sur la dernière exécution pour afficher plus de détails.

Verifying the latest commit being run

Si les travaux s’exécutent avec succès, vous verrez une coche verte à côté des travaux et l’artefact de production en bas de la page.

Verifying the jobs run successfully

3. Maintenant, cliquez sur le travail de déploiement (panneau de gauche) et développez la tâche Déployer sur Netlify. Vous verrez la sortie de l’étape, qui contient l’URL du site Web.

Cliquez sur l’URL du site Web pour vérifier que le site fonctionne et est accessible.

Verifying the Website URL

L’URL s’ouvre automatiquement dans un nouvel onglet de votre navigateur Web, comme indiqué ci-dessous. Cette sortie indique que votre site fonctionne correctement.

Verifying the site works correctly and is accessible via a web browser

Suppression des artefacts inutilisés pour économiser de l’espace

Après chaque version, vous utilisez plus d’espace disque lorsque vous téléchargez et téléchargez de nouvelles versions. Comment économisez-vous de l’espace ? Supprimer les artefacts inutilisés est la solution la plus viable. Vous devez limiter le nombre d’artefacts de version résidant sur chaque serveur pour éviter l’accumulation de milliers de versions et un disque plein.

Outre l’utilisation du paramètre de période de rétention pour supprimer les artefacts après un certain temps, vous pouvez également supprimer l’artefact depuis la page des flux de travail sur GitHub :

Sur votre page de flux de travail, cliquez sur l’icône de suppression à côté de l’artefact pour le supprimer.

Deleting an artifact from the workflow on GitHub

Maintenant, cliquez sur OK sur le message (en haut) pour confirmer la suppression de l’artefact.

Confirming artifact deletion

Remarquez ci-dessous que l’artefact n’est plus sur la page, confirmant qu’il a été supprimé avec succès.

Verifying the artifact is deleted

Conclusion

Vous avez vu comment les artefacts facilitent le développement d’automatisations plus complexes dans lesquelles un flux de travail fournit des informations à un autre. À ce stade, vous devriez maintenant avoir une meilleure compréhension des artefacts GitHub Actions et de la manière dont ils peuvent être utilisés pour vos déploiements.

Avec cette nouvelle connaissance, pourquoi ne pas profiter des actions GitHub pour l’automatisation des flux de travail de votre prochain projet ?

Source:
https://adamtheautomator.com/github-actions-artifacts-2/