Oefening: Een statische HTML-web-app maken met behulp van Azure Cloud Shell

  • 15 minuten

Met de gratis sandbox kunt u resources maken in een subset met wereldwijde Azure-regio's. Selecteer een regio in de volgende lijst wanneer u resources maakt:

  • VS - west 2
  • VS - zuid-centraal
  • Central US
  • VS - oost
  • Europa -west
  • Azië - zuidoost
  • Japan East
  • Brazilië - zuid
  • Australië - zuidoost
  • India - centraal

In deze oefening implementeert u een eenvoudige HTML+CSS-site naar Azure-app Service met behulp van de Azure CLI-opdrachtaz webapp up. Vervolgens werkt u de code bij en implementeert u deze opnieuw met behulp van dezelfde opdracht.

Met de az webapp up opdracht kunt u eenvoudig web-apps maken en bijwerken. Wanneer deze wordt uitgevoerd, worden de volgende acties uitgevoerd:

  • Maak een standaardresourcegroep als deze niet is opgegeven.
  • Er wordt een standaardserviceplan voor de app gemaakt.
  • Er wordt een app met de opgegeven naam gemaakt.
  • Er worden via zip bestanden van de huidige werkmap naar de web-app geïmplementeerd.

Belangrijk

Als u deze oefening wilt voltooien, moet u de Cloud Shell overschakelen naar de klassieke versie. Wanneer het laden van Cloud Shell is voltooid, selecteert u Instellingen in het menu bovenaan de Cloud Shell en selecteert u vervolgens Ga naar klassieke versie.

De voorbeeld-app downloaden

In deze sectie gebruikt u de sandbox om de voorbeeld-app te downloaden en variabelen in te stellen om sommige opdrachten gemakkelijker in te voeren.

  1. Maak in de sandbox een map en navigeer ernaartoe.

    mkdir htmlapp

cd htmlapp

  2. Voer de volgende git opdracht uit om de opslagplaats van de voorbeeld-app te klonen naar uw htmlapp-map .

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

  3. Stel variabelen in voor het opslaan van de resourcegroep en app-namen door de volgende opdrachten uit te voeren.

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

De web-app maken

  1. Ga naar de map die de voorbeeldcode bevat en voer de opdracht az webapp up uit.

    cd html-docs-hello-world

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

    Het uitvoeren van deze opdracht kan enkele minuten duren. Terwijl de opdracht wordt uitgevoerd, wordt informatie weergegeven die vergelijkbaar is met het volgende voorbeeld.

    {
"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. Open een nieuw tabblad in uw browser en navigeer naar de URL van de app (https://<myAppName>.azurewebsites.net) en controleer of de app wordt uitgevoerd. Noteer de titel boven aan de pagina. Laat de browser geopend in de app voor de volgende sectie.

    Notitie

    U kunt kopiëren <myAppName>.azurewebsites.net uit de uitvoer van de vorige opdracht of de URL in de uitvoer selecteren om de site op een nieuw tabblad te openen.

De app bijwerken en opnieuw implementeren

  1. Typ code index.html in Cloud Shell om de editor te openen. Wijzig in de <h1> koptag Azure-app Service - Voorbeeld van statische HTML-site in Azure-app service bijgewerkt of naar iets anders dat u wilt.

  2. Gebruik de opdrachten ctrl-s om op te slaan en ctrl-q om af te sluiten.

  3. Implementeer de app opnieuw met dezelfde az webapp up opdracht die u eerder hebt gebruikt.

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

    Tip

    U kunt de pijl-omhoog op het toetsenbord gebruiken om door eerdere opdrachten te bladeren.

  4. Nadat de implementatie is voltooid, gaat u terug naar de browser vanuit stap 2 in de sectie 'De web-app maken' en vernieuwt u de pagina.