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

2025-02-25

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.

Compte Azure avec un abonnement actif. Créez un compte gratuitement.
Un référentiel GitHub avec votre code de site web statique. Si vous n’avez pas de compte GitHub, inscrivez-vous gratuitement.
Un site web statique opérationnel hébergé dans Stockage Azure. Découvrez comment héberger un site web statique dans Stockage Azure. Pour suivre cet exemple, vous devez également déployer Azure CDN.

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

OpenID Connect
Principal du service

Pour utiliser l’action de connexion Azure avec OIDC, vous devez configurer des informations d’identification d’identité fédérée sur une application Microsoft Entra ou une identité managée affectée par l’utilisateur.

Option 1 : application Microsoft Entra

Créez une application Microsoft Entra avec un principal de service par Portail Azure, Azure CLI ou PowerShell.
Copiez les valeurs pour ID client et ID d’abonnement et ID d’annuaire (locataire). Vous en aurez besoin dans votre workflow GitHub Actions.
Attribuez un rôle approprié à votre principal de service par le portail Azure, Azure CLI ou Azure PowerShell.
Configurez des informations d’identification fédérées sur une application Microsoft Entra pour approuver les jetons émis par GitHub Actions pour votre référentiel GitHub.

Option 2 : identité managée affectée par l’utilisateur

Créer une identité managée attribuée par l’utilisateur.
Copiez les valeurs pour ID client et ID d’abonnement et ID d’annuaire (locataire). Vous en aurez besoin dans votre workflow GitHub Actions.
Attribuez un rôle approprié à votre identité managée affectée par l’utilisateur.
Configurez des informations d’identification fédérées sur une identité managée affectée par l’utilisateur pour approuver les jetons émis par GitHub Actions pour votre référentiel GitHub.

Vous devez fournir l’ID de client, l’ID d’annuaire (locataire) et l’ID d’abonnement de votre application à l’action de connexion. Vous pouvez fournir ces valeurs directement dans le workflow ou les stocker dans des secrets GitHub et les référencer dans votre workflow. L’enregistrement des valeurs en tant que secrets GitHub est l’option la plus sécurisée.

Dans GitHub, accédez à votre dépôt.
Sélectionnez Sécurité > Secrets et variables > Actions.
Sélectionnez New repository secret (Nouveau secret de dépôt).

Remarque

Pour améliorer la sécurité des flux de travail dans des référentiels publics, utilisez des secrets d’environnement plutôt que des secrets de référentiel. Si l’environnement nécessite une approbation, un travail ne peut pas accéder aux secrets d’environnement tant que l’un des réviseurs requis ne l’approuve pas.

Créez des secrets pour AZURE_CLIENT_ID, AZURE_TENANT_ID et AZURE_SUBSCRIPTION_ID. Copiez ces valeurs à partir de votre application Microsoft Entra ou de l’identité managée affectée par l’utilisateur pour vos secrets GitHub :

Secret GitHub	Application Microsoft Entra ou identité managée affectée par l’utilisateur
AZURE_CLIENT_ID	ID client
AZURE_SUBSCRIPTION_ID	ID d’abonnement
AZURE_TENANT_ID	ID de l’annuaire (locataire)

Remarque

Pour des raisons de sécurité, nous vous recommandons d’utiliser des secrets GitHub plutôt que de transmettre des valeurs directement au flux de travail.

Dans GitHub, accédez à votre dépôt.
Sélectionnez Paramètres dans le volet de navigation.
Sélectionnez Sécurité > Secrets et variables > Actions.
Sélectionnez New repository secret (Nouveau secret de dépôt).
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.
Sélectionnez Ajouter un secret.

Ajouter votre workflow

OpenID Connect
Principal du service

Accédez à Actions pour votre référentiel GitHub.
Sélectionnez Configurer vous-même un workflow.
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 with OpenID Connect

on:
    push:
        branches: [ main ]
```

Ajoutez une section Autorisations.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

Ajoutez des actions de validation et de connexion. Ces actions extraient votre code de site et vous authentifient auprès d’Azure à l’aide des secrets GitHub que vous avez créés précédemment.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v2
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

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"
```

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: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v2
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

    - 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()

Accédez à Actions pour votre référentiel GitHub.
Sélectionnez Configurer vous-même un workflow.
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 ]
```
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@v2
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}
```
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"
```

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@v2
      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

Accédez à Actions pour votre référentiel GitHub.
Ouvrez le premier résultat pour afficher les journaux détaillés de l’exécution de votre workflow.

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

Partager via