Partage via


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

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.

    screenshot of the Create repository button.

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.

az login

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

az account set --subscription <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.

resourceGroupName="myfirstswadeployRG"

az group create \
  --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.


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.

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.

Overview window

  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