Övning: Skapa en statisk HTML-webbapp med hjälp av Azure Cloud Shell

  • 15 minuter

Med den kostnadsfria sandbox-miljön kan du skapa resurser i några av Azures globala regioner. Välj en region från följande lista när du skapar resurser:

  • Västra USA 2
  • USA, södra centrala
  • Central US
  • East US
  • Europa, västra
  • Sydostasien
  • Japan, östra
  • Brasilien, södra
  • Sydöstra Australien
  • Indien, centrala

I den här övningen distribuerar du en grundläggande HTML+CSS-webbplats till Azure App Service med hjälp av Azure CLI-kommandot az webapp up . Därefter uppdaterar du koden och distribuerar om den med hjälp av samma kommando.

Kommandot az webapp up gör det enkelt att skapa och uppdatera webbappar. När den körs utför den följande åtgärder:

  • Skapa en standardresursgrupp om en inte har angetts.
  • Skapa en standard App Service-plan.
  • Skapa ett program med det givna namnet.
  • Zip-distribuera filer från den aktuella arbetskatalogen till webbprogrammet.

Viktigt!

För att kunna slutföra den här övningen måste du byta Cloud Shell till den klassiska versionen. När Cloud Shell har lästs in väljer du Inställningar från menyn överst i Cloud Shell och väljer sedan Gå till klassisk version.

Ladda ned exempelprogrammet

I det här avsnittet använder du sandbox-miljön för att ladda ned exempelappen och ange variabler för att göra vissa av kommandona enklare att ange.

  1. I sandbox-miljön skapar du en katalog och navigerar sedan till den.

    mkdir htmlapp

cd htmlapp

  2. Kör följande git kommando för att klona exempelapplagringsplatsen till htmlappkatalogen.

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

  3. Ange variabler som ska innehålla resursgruppen och appnamnen genom att köra följande kommandon.

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

Skapa webbappen

  1. Ändra till den katalog som innehåller exempelkoden och kör az webapp up kommandot.

    cd html-docs-hello-world

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

    Det kan ta några minuter att köra det här kommandot. När kommandot körs visas information som liknar följande exempel.

    {
"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. Öppna en ny flik i webbläsaren och gå till appens URL (https://<myAppName>.azurewebsites.net) och kontrollera att appen körs – anteckna rubriken överst på sidan. Låt webbläsaren vara öppen i appen för nästa avsnitt.

    Kommentar

    Du kan kopiera <myAppName>.azurewebsites.net från utdata från föregående kommando eller välja URL:en i utdata för att öppna webbplatsen på en ny flik.

Uppdatera och distribuera om appen

  1. I Cloud Shell skriver du code index.html för att öppna redigeraren. <h1> I rubriktaggen ändrar du Azure App Service – Exempel på statisk HTML-webbplats till Azure App Service Uppdaterad – eller till något annat som du vill.

  2. Använd kommandona ctrl-s för att spara och ctrl-q för att avsluta.

  3. Distribuera om appen med samma az webapp up kommando som du använde tidigare.

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

    Dricks

    Du kan använda uppåtpilen på tangentbordet för att bläddra igenom tidigare kommandon.

  4. När distributionen är klar växlar du tillbaka till webbläsaren från steg 2 i avsnittet "Skapa webbappen" och uppdaterar sidan.