Tutoriel : Publier des applications Azure Static Web Apps en utilisant un modèle ARM

Cet article explique comment déployer des applications Azure Static Web Apps en utilisant un modèle Resource Manager (modèle ARM).

Ce didacticiel vous apprend à effectuer les opérations suivantes :

• Créer un modèle ARM pour Azure Static Web Apps
• Déployer le modèle ARM pour créer une instance Azure Static Web Apps

Prérequis

• Compte Azure actif : si vous n’en avez pas, vous pouvez créer un compte gratuitement.

• Compte GitHub : si vous n’en avez pas, vous pouvez créer un compte GitHub gratuitement.

• Éditeur pour les modèles ARM : l’examen et la modification des modèles nécessitent un éditeur JSON. Visual Studio Code avec l’extension Azure Resource Manager Tools convient pour modifier les modèles ARM. Pour obtenir des instructions sur l’installation et la configuration de Visual Studio Code, consultez Démarrage rapide : Créer des modèles ARM avec Visual Studio Code.

• Azure CLI ou Azure PowerShell : le déploiement de modèles ARM nécessite un outil en ligne de commande. Pour les instructions d’installation, consultez :

  • Installer Azure CLI sur un système d’exploitation Windows
  • Installer Azure CLI sur un système d’exploitation Linux
  • Installer Azure CLI sur macOS
  • Installation d'Azure PowerShell

Créer un jeton d’accès personnel GitHub

L’un des paramètres du modèle ARM est repositoryToken, qui permet au processus de déploiement ARM d’interagir avec le dépôt GitHub contenant le code source du site statique.

1. À partir de votre profil de compte GitHub (en haut à droite), sélectionnez Settings.

2. Sélectionnez Developer settings.

3. Sélectionnez Personal access tokens.

4. Sélectionnez Generate new token.

5. Indiquez un nom pour ce jeton dans le champ Nom, par exemple myfirstswadeployment.

6. Sélectionnez une expiration pour le jeton. La valeur par défaut est de 30 jours.

7. Spécifiez les étendues suivantes : repo, workflow, write:packages

8. Sélectionnez Generate token.

9. Copiez la valeur du jeton dans un éditeur de texte à des fins d’utilisation ultérieure.

Important

Veillez à copier ce jeton et à le stocker dans un emplacement sûr. Vous pouvez stocker ce jeton dans Azure Key Vault et y accéder dans votre modèle ARM.

Créer un dépôt GitHub

Cet article utilise un dépôt de modèles GitHub pour vous permettre de démarrer facilement. Le modèle comporte une application de démarrage utilisée pour le déploiement avec Azure Static Web Apps.

1. Accédez à l’emplacement suivant pour créer un nouveau dépôt :

   1. https://github.com/staticwebdev/vanilla-basic/generate

2. Nommez votre dépôt myfirstswadeployment.

   Notes

   Azure Static Web Apps nécessite au moins un fichier HTML pour pouvoir créer une application web. Le référentiel que vous créez lors de cette étape comprend un seul fichier index.html.

3. Cliquez sur Créer un référentiel.

   

Créer le modèle ARM

Une fois les prérequis en place, l’étape suivante consiste à définir le fichier de modèle de déploiement ARM.

1. Créez un dossier destiné à contenir les modèles ARM.

2. Créez un fichier et nommez-le azuredeploy.json.

3. Collez l’extrait de modèle ARM suivant dans azuredeploy.json.

       {
           "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
           "contentVersion": "1.0.0.0",
           "parameters": {
               "name": {
                   "type": "string"
               },
               "location": {
                   "type": "string"
               },
               "sku": {
                   "type": "string"
               },
               "skucode": {
                   "type": "string"
               },
               "repositoryUrl": {
                   "type": "string"
               },
               "branch": {
                   "type": "string"
               },
               "repositoryToken": {
                   "type": "securestring"
               },
               "appLocation": {
                   "type": "string"
               },
               "apiLocation": {
                   "type": "string"
               },
               "appArtifactLocation": {
                   "type": "string"
               },
               "resourceTags": {
                   "type": "object"
               },
               "appSettings": {
                   "type": "object"
               }
           },
           "resources": [
               {
                   "apiVersion": "2021-01-15",
                   "name": "[parameters('name')]",
                   "type": "Microsoft.Web/staticSites",
                   "location": "[parameters('location')]",
                   "tags": "[parameters('resourceTags')]",
                   "properties": {
                       "repositoryUrl": "[parameters('repositoryUrl')]",
                       "branch": "[parameters('branch')]",
                       "repositoryToken": "[parameters('repositoryToken')]",
                       "buildProperties": {
                           "appLocation": "[parameters('appLocation')]",
                           "apiLocation": "[parameters('apiLocation')]",
                           "appArtifactLocation": "[parameters('appArtifactLocation')]"
                       }
                   },
                   "sku": {
                       "Tier": "[parameters('sku')]",
                       "Name": "[parameters('skuCode')]"
                   },
                   "resources":[
                       {
                           "apiVersion": "2021-01-15",
                           "name": "appsettings",
                           "type": "config",
                           "location": "[parameters('location')]",
                           "properties": "[parameters('appSettings')]",
                           "dependsOn": [
                               "[resourceId('Microsoft.Web/staticSites', parameters('name'))]"
                           ]
                       }
                   ]
               }
           ]
       }
   
   

4. Créez un fichier et nommez-le azuredeploy.parameters.json.

5. Collez l’extrait de modèle ARM suivant dans azuredeploy.parameters.json.

       {
           "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
           "contentVersion": "1.0.0.0",
           "parameters": {
               "name": {
                   "value": "myfirstswadeployment"
               },
               "location": { 
                   "value": "Central US"
               },   
               "sku": {
                   "value": "Free"
               },
               "skucode": {
                   "value": "Free"
               },
               "repositoryUrl": {
                   "value": "https://github.com/<YOUR-GITHUB-USER-NAME>/<YOUR-GITHUB-REPOSITORY-NAME>"
               },
               "branch": {
                   "value": "main"
               },
               "repositoryToken": {
                   "value": "<YOUR-GITHUB-PAT>" 
               },
               "appLocation": {
                   "value": "/"
               },
               "apiLocation": {
                   "value": ""
               },
               "appArtifactLocation": {
                   "value": "src"
               },
               "resourceTags": {
                   "value": {
                       "Environment": "Development",
                       "Project": "Testing SWA with ARM",
                       "ApplicationName": "myfirstswadeployment"
                   }
               },
               "appSettings": {
                   "value": {
                       "MY_APP_SETTING1": "value 1",
                       "MY_APP_SETTING2": "value 2"
                   }
               }
           }
       }
   

6. Mettez à jour les paramètres suivants.

   Paramètre	Valeur attendue
   repositoryUrl	Indiquez l’URL de votre dépôt GitHub Static Web Apps.
   repositoryToken	Indiquez le jeton PAT GitHub.

7. Enregistrez les mises à jour avant d’exécuter le déploiement à l’étape suivante.

Exécution du déploiement

Vous avez besoin d’Azure CLI ou d’Azure PowerShell pour déployer le modèle.

Connexion à Azure

Pour déployer un modèle, connectez-vous à Azure CLI ou à Azure PowerShell.

Azure CLI

az login

PowerShell

Connect-AzAccount

Si vous avez plusieurs abonnements Azure, sélectionnez celui que vous souhaitez utiliser. Remplacez <SUBSCRIPTION-ID> par les informations de votre abonnement :

Azure CLI

az account set --subscription <SUBSCRIPTION-ID>

PowerShell

Set-AzContext <SUBSCRIPTION-ID>

Créer un groupe de ressources

Quand vous déployez un modèle, vous indiquez un groupe de ressources qui contient des ressources connexes. Avant d’exécuter la commande de déploiement, créez le groupe de ressources avec Azure CLI ou Azure PowerShell.

Notes

Les exemples CLI de cet article sont écrits pour l’interpréteur de commandes Bash.

Azure CLI

resourceGroupName="myfirstswadeployRG"

az group create \
  --name $resourceGroupName \
  --location "Central US"

PowerShell

$resourceGroupName = "myfirstswadeployRG"

New-AzResourceGroup `
  -Name $resourceGroupName `
  -Location "Central US"

Déployer un modèle

Utilisez l’une de ces options de déploiement pour déployer le modèle.

Azure CLI

az deployment group create \
  --name DeployLocalTemplate \
  --resource-group $resourceGroupName \
  --template-file <PATH-TO-AZUREDEPLOY.JSON> \
  --parameters <PATH-TO-AZUREDEPLOY.PARAMETERS.JSON> \
  --verbose

Pour en découvrir plus sur le déploiement de modèles en utilisant Azure CLI, consultez Déployer des ressources à l’aide de modèles ARM et d’Azure CLI.

PowerShell

$templateFile = Read-Host -Prompt "Enter the template file path and file name"
$templateparameterFile = Read-Host -Prompt "Enter the template parameter file path and file name"

New-AzResourceGroupDeployment `
  -Name DeployLocalTemplate `
  -ResourceGroupName $resourceGroupName `
  -TemplateFile $templateFile `
  -TemplateParameterFile $templateparameterfile `
  -verbose

Pour en découvrir plus sur le déploiement de modèles en utilisant Azure PowerShell, consultez Déployer des ressources à l’aide de modèles ARM et d’Azure PowerShell.

Voir le site web

Le déploiement d’une application statique comporte deux aspects. Le premier provisionne les ressources Azure sous-jacentes qui composent votre application. Le second est un flux de travail GitHub Actions qui génère et publie votre application.

Avant de pouvoir accéder à votre nouveau site statique, la build de déploiement doit d’abord finir de s’exécuter.

La fenêtre de vue d’ensemble de Static Web Apps présente des liens qui vous permettent d’interagir avec votre application web.

1. Cliquez sur la bannière intitulée Cliquez ici pour vérifier l’état de vos exécutions GitHub Actions afin d’accéder aux actions GitHub en cours d’exécution sur votre dépôt. Une fois que vous avez vérifié que le travail de déploiement est terminé, vous pouvez accéder à votre site web à l’aide de l’URL générée.

2. Une fois le flux de travail GitHub Actions terminé, vous pouvez cliquer sur l’URL pour ouvrir le site web dans un nouvel onglet.

Nettoyer les ressources

Nettoyez les ressources que vous avez déployées en supprimant le groupe de ressources.

1. Dans le portail Azure, sélectionnez Groupe de ressources dans le menu de gauche.
2. Entrez le nom du groupe de ressources dans le champ Filtrer par nom.
3. Sélectionnez le nom du groupe de ressources.
4. Sélectionnez Supprimer le groupe de ressources dans le menu supérieur.

Étapes suivantes

Configurer votre application web statique