Déploiement sur Azure Static Web Apps

Introduction

Ce guide explique comment utiliser GitHub Actions pour générer et déployer une application web sur Azure Static Web Apps.

Note

Remarque : Si vos workflows GitHub Actions doivent accéder aux ressources d’un fournisseur de cloud qui prend en charge OpenID Connecter (OIDC), vous pouvez configurer vos workflows pour qu’ils s’authentifient directement auprès du fournisseur de cloud. Cela vous permet d’arrêter de stocker ces informations d’identification en tant que secrets de longue durée, et de fournir d’autres avantages en matière de sécurité. Pour plus d’informations, consultez « À propos du renforcement de la sécurité avec OpenID Connect ». et « Configuration d’OpenID Connect dans Azure ».

Prérequis

Pour pouvoir créer votre flux de travail GitHub Actions, vous devez d’abord suivre la procédure de configuration ci-dessous :

Créez une application Azure Static Web Apps en utilisant l’option « Autre » comme source de déploiement. Pour plus d’informations, consultez « Démarrage rapide : Création d’un premier site statique sur le Portail Azure » dans la documentation Azure.
Créez un secret appelé AZURE_STATIC_WEB_APPS_API_TOKEN avec la valeur de votre jeton de déploiement d’application Static Web Apps. Pour savoir comment trouver votre jeton de déploiement, consultez « Réinitialisation des jetons de déploiement dans Azure Static Web Apps » dans la documentation Azure.

Création du flux de travail

Une fois que vous avez rempli les prérequis, vous pouvez passer à la création du flux de travail.

L’exemple de flux de travail suivant montre comment générer et déployer une application Azure Static Web Apps en cas d’envoi (push) vers la branche main ou lorsqu’une demande de tirage (pull request) ciblant main est ouverte, synchronisée ou rouverte. Le flux de travail supprime également le déploiement de préproduction correspondant dès lors qu’une demande de tirage visant main est fermée.

Sous la clé de flux de travail env, remplacez les valeurs suivantes :

APP_LOCATION par l’emplacement de votre code client ;
API_LOCATION par l’emplacement de votre code source d’API (si API_LOCATION n’est pas pertinent, vous pouvez supprimer la variable et les lignes où elle est utilisée) ;
OUTPUT_LOCATION par l’emplacement de la sortie de build de votre code client.

Pour plus d’informations sur ces valeurs, consultez « Configuration de build pour Azure Static Web Apps » dans la documentation Azure.

YAML

# Ce workflow utilise des actions qui ne sont pas certifiées par GitHub.
# Elles sont fournies par un tiers et régies par
# des conditions d’utilisation du service, une politique de confidentialité et un support distincts.
# documentation en ligne.

# GitHub recommande d’épingler les actions à un SHA de commit.
# Pour obtenir une version plus récente, vous devez mettre à jour le SHA.
# Vous pouvez également référencer une balise ou une branche, mais l’action peut changer sans avertissement.

name: Deploy web app to Azure Static Web Apps

env:
  APP_LOCATION: "/" # location of your client code
  API_LOCATION: "api" # location of your api source code - optional
  OUTPUT_LOCATION: "build" # location of client code build output

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

permissions:
  issues: write
  contents: read
  pull-requests: write

jobs:
  build_and_deploy:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          output_location: ${{ env.OUTPUT_LOCATION }}

  close_pull_request:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request
    steps:
      - name: Close Pull Request
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

# Ce workflow utilise des actions qui ne sont pas certifiées par GitHub.
# Elles sont fournies par un tiers et régies par
# des conditions d’utilisation du service, une politique de confidentialité et un support distincts.
# documentation en ligne.

# GitHub recommande d’épingler les actions à un SHA de commit.
# Pour obtenir une version plus récente, vous devez mettre à jour le SHA.
# Vous pouvez également référencer une balise ou une branche, mais l’action peut changer sans avertissement.

name: Deploy web app to Azure Static Web Apps

env:
  APP_LOCATION: "/" # location of your client code
  API_LOCATION: "api" # location of your api source code - optional
  OUTPUT_LOCATION: "build" # location of client code build output

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

permissions:
  issues: write
  contents: read
  pull-requests: write

jobs:
  build_and_deploy:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: true
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          output_location: ${{ env.OUTPUT_LOCATION }}

  close_pull_request:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request
    steps:
      - name: Close Pull Request
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

Ressources supplémentaires

Les ressources suivantes peuvent également être utiles :

Pour le modèle de workflow d’origine, consultez azure-staticwebapp.yml dans le référentiel GitHub Actions starter-workflows.
L’action utilisée pour déployer l’application web est l’action Azure Azure/static-web-apps-deploy officielle.
Pour obtenir d’autres exemples de workflows GitHub Action qui se déploient sur Azure, reportez-vous au dépôt actions-workflow-samples.

Dans cet article

Introduction

Prérequis

Création du flux de travail

Ressources supplémentaires