Exercice : créer une application web HTML statique à l’aide d’Azure Cloud Shell

  • 15 minutes

Le bac à sable gratuit vous permet de créer des ressources dans certaines régions Azure du monde. Sélectionnez une région dans la liste suivante au moment où vous créez des ressources :

  • USA Ouest 2
  • États-Unis - partie centrale méridionale
  • USA Centre
  • USA Est
  • Europe Ouest
  • Asie Sud-Est
  • Japon Est
  • Brésil Sud
  • Australie Sud-Est
  • Inde centrale

Dans cet exercice, vous allez déployer un site HTML+CSS de base sur Azure App Service avec la commande Azure CLI az webapp up. Ensuite, vous mettez à jour le code et vous le redéployez en utilisant la même commande.

La commande az webapp up facilite la création et la mise à jour d’applications Web. Une fois exécutée, elle effectue les actions suivantes :

  • Créez un groupe de ressources par défaut si aucun n’est spécifié.
  • Créer un plan App Service par défaut
  • Créer une application avec le nom spécifié
  • Décompressez les fichiers depuis le répertoire de travail en cours sur l’application web.

Important

Pour effectuer cet exercice, vous devez basculer Cloud Shell vers la version classique. Une fois le chargement de Cloud Shell terminé, sélectionnez Paramètres dans le menu directement en haut de Cloud Shell, puis sélectionnez Accéder à la version classique.

Télécharger l’exemple d’application

Dans cette section, vous utilisez le bac à sable pour télécharger l’exemple d’application et vous définissez des variables pour faciliter l’entrée de certaines commandes.

  1. Dans le bac à sable, créez un répertoire, puis accédez-y.

    mkdir htmlapp

cd htmlapp

  2. Exécutez la commande git suivante pour cloner le référentiel de l’exemple d’application dans votre répertoire htmlapp.

    git clone https://github.com/Azure-Samples/html-docs-hello-world.git

  3. Définissez des variables destinées à contenir les noms du groupe de ressources et de l’application en exécutant les commandes suivantes.

    resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

Créer l’application web

  1. Passez au répertoire qui contient l’exemple de code et exécutez la commande az webapp up.

    cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

    Cette commande peut prendre quelques minutes pour s’exécuter. Pendant que la commande s’exécute, elle affiche des informations similaires à l’exemple suivant.

    {
"app_url": "https://<myAppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
< JSON data removed for brevity. >
}

  2. Ouvrez un nouvel onglet dans votre navigateur et accédez à l’URL de l’application (https://<myAppName>.azurewebsites.net),puis vérifiez que l’application est en cours d’exécution ; prenez note du titre en haut de la page. Laissez le navigateur ouvert sur l’application pour la section suivante.

    Notes

    Vous pouvez copier <myAppName>.azurewebsites.net à partir de la sortie de la commande précédente ou sélectionner l’URL dans la sortie pour ouvrir le site dans un nouvel onglet.

Mise à jour et redéploiement de l’application

  1. Dans Cloud Shell, tapez code index.html pour ouvrir l’éditeur. Dans l’étiquette de titre <h1>, remplacez Azure App Service - Sample Static HTML Site par Azure App Service Updated ou par la valeur de votre choix.

  2. Utilisez la commande ctrl-s pour enregistrer, et la commande ctrl-q pour quitter.

  3. Redéployez l’application avec la même commande az webapp up que celle utilisée plus tôt.

    az webapp up -g $resourceGroup -n $appName --html

    Conseil

    Vous pouvez utiliser la flèche vers le haut de votre clavier pour faire défiler les commandes précédentes.

  4. Une fois le déploiement terminé, revenez au navigateur de l’étape 2 de la section « Créer l’application web», puis actualisez la page.