Partager via

Utiliser un workflow GitHub Actions pour déployer votre site web statique dans Stockage Azure

  • Article

Commencez avec GitHub Actions en utilisant un workflow pour déployer un site statique sur un compte de stockage Azure. Une fois que vous avez configuré un workflow GitHub Actions, vous pouvez automatiquement déployer votre site vers Azure à partir de GitHub lorsque vous apportez des modifications au code de votre site.

Notes

Si vous utilisez Azure Static Web Apps, vous n’avez pas besoin de configurer manuellement un workflow GitHub Actions. Azure Static Web Apps crée automatiquement un workflow GitHub Actions pour vous.

Prérequis

Un abonnement Azure et un compte GitHub.

Notes

Il est courant d’utiliser un réseau de distribution de contenu (CDN) pour réduire la latence pour vos utilisateurs dans le monde entier et pour réduire le nombre de transactions sur votre compte de stockage. Le déploiement de contenu statique dans un service de stockage informatique peut réduire la nécessité d’une instance de calcul potentiellement coûteuse. Pour plus d’informations, consultez Modèle d’hébergement de contenu statique.

Générer les informations d’identification du déploiement

Créez un principal de service à l’aide de la commande az ad sp create-for-rbac dans Azure CLI. Exécutez cette commande en utilisant Azure Cloud Shell dans le portail Azure ou en sélectionnant le bouton Essayer.

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

Le paramètre --json-auth est disponible dans les versions d’Azure CLI >= 2.51.0. Les versions antérieures à celle-ci utilisent --sdk-auth avec un avertissement de dépréciation.

Dans l’exemple ci-dessus, remplacez les espaces réservés par votre ID d’abonnement, le nom de votre groupe de ressources et le nom de votre application. La sortie correspond à un objet JSON avec les informations d’identification de l’attribution de rôle qui fournit l’accès à votre application App Service, similaire à ce qui suit. Copiez cet objet JSON pour une version ultérieure.

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

Configurer les secrets GitHub

  1. Dans GitHub, accédez à votre dépôt.

  2. Sélectionnez Paramètres dans le volet de navigation.

  3. Sélectionnez Sécurité > Secrets et variables > Actions.

    Screenshot of adding a secret

  4. Sélectionnez New repository secret (Nouveau secret de dépôt).

  5. Collez l’intégralité de la sortie JSON de la commande Azure CLI dans le champ de valeur du secret. Nommez le secret AZURE_CREDENTIALS.

  6. Sélectionnez Ajouter un secret.

Ajouter votre workflow

  1. Accédez à Actions pour votre référentiel GitHub.

    GitHub Actions menu item

  2. Sélectionnez Configurer vous-même un workflow.

  3. Supprimez tous les éléments après la section on: de votre fichier de workflow. Par exemple, votre workflow restant peut ressembler à ce qui suit.

    name: CI

on:
    push:
        branches: [ main ]

  4. Renommez votre workflow Blob storage website CI et ajoutez les actions d’extraction et de connexion. Ces actions extraient votre code de site et vous authentifient auprès d’Azure à l’aide du secret GitHub AZURE_CREDENTIALS que vous avez créé précédemment.

    name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

  5. Utilisez l’action Azure CLI pour charger votre code dans le stockage de blob et vider votre point de terminaison CDN. Pour az storage blob upload-batch, remplacez l’espace réservé par le nom de votre compte de stockage. Le script est chargé dans le conteneur $web. Pour az cdn endpoint purge, remplacez les espaces réservés par le nom de votre profil CDN, le nom de votre point de terminaison CDN et votre groupe de ressources. Pour accélérer le vidage de votre CDN, vous pouvez ajouter l’option --no-wait à az cdn endpoint purge . Pour améliorer la sécurité, vous pouvez également ajouter l’option --account-key avec votre clé de compte de stockage.

        - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  6. Terminez votre workflow en ajoutant une action permettant de vous déconnecter d’Azure. Voici le workflow terminé. Le fichier apparaît dans le dossier .github/workflows de votre référentiel.

    name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v1
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

Vérifier votre déploiement

  1. Accédez à Actions pour votre référentiel GitHub.

  2. Ouvrez le premier résultat pour afficher les journaux détaillés de l’exécution de votre workflow.

    Log of GitHub Actions run

Nettoyer les ressources

Lorsque votre site statique et votre référentiel GitHub ne sont plus nécessaires, nettoyez les ressources que vous avez déployées en supprimant le groupe de ressources et votre référentiel GitHub.

Étapes suivantes

En savoir plus sur Azure Static Web Apps