Introduction
Ce guide explique comment utiliser GitHub Actions pour générer et déployer une application web sur Azure Static Web Apps.
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_TOKENavec 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_LOCATIONpar l’emplacement de votre code client ;API_LOCATIONpar l’emplacement de votre code source d’API (siAPI_LOCATIONn’est pas pertinent, vous pouvez supprimer la variable et les lignes où elle est utilisée) ;OUTPUT_LOCATIONpar 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.
# 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 workflow de démarrage d’origine, consultez
azure-staticwebapp.ymldans le dépôtstarter-workflowsde GitHub Actions. - L’action utilisée pour déployer l’application web est l’action Azure
Azure/static-web-apps-deployofficielle. - Pour obtenir d’autres exemples de workflows GitHub Action qui se déploient sur Azure, reportez-vous au dépôt actions-workflow-samples.