Übung: Erstellen einer statischen HTML-Web-App mit Azure Cloud Shell

  • 15 Minuten

Mit der kostenlosen Sandbox können Sie Ressourcen in einem Teil der globalen Azure-Regionen erstellen. Wählen Sie eine Region aus der folgenden Liste aus, wenn Sie Ressourcen erstellen:

  • USA, Westen 2
  • USA Süd Mitte
  • USA (Mitte)
  • East US
  • Europa, Westen
  • Asien, Südosten
  • Japan, Osten
  • Brasilien, Süden
  • Australien, Südosten
  • Indien, Mitte

In dieser Übung stellen Sie mithilfe des Azure CLI-Befehls az webapp up eine einfache HTML+CSS-Website in Azure App Service bereit. Als Nächstes aktualisieren Sie den Code und stellen ihn mit demselben Befehl erneut bereit.

Der Befehl az webapp up vereinfacht das Erstellen und Aktualisieren von Web-Apps. Bei der Ausführung werden die folgenden Aktionen ausgeführt:

  • Erstellen Sie eine Standardressourcegruppe, wenn keine angegeben ist.
  • Erstellen eines standardmäßigen App Service-Plans
  • Erstellen einer App mit dem angegebenen Namen
  • Bereitstellen von ZIP-Dateien aus dem aktuellen Arbeitsverzeichnis für die Web-App

Wichtig

Um diese Übung abzuschließen, müssen Sie die Cloud Shell auf die klassische Version umstellen. Nachdem die Cloud Shell geladen worden ist, wählen Sie Einstellungen aus dem Menü direkt oben in der Cloud Shell aus, und wählen Sie dann Zur klassischen Version wechseln aus.

Herunterladen der Beispiel-App

In diesem Abschnitt verwenden Sie die Sandbox zum Herunterladen der Beispiel-App sowie zum Festlegen von Variablen, um die Eingabe einiger Befehle zu vereinfachen.

  1. Erstellen Sie in der Sandbox ein Verzeichnis, und navigieren Sie dann in dieses Verzeichnis.

    mkdir htmlapp

cd htmlapp

  2. Führen Sie den folgenden git-Befehl aus, um das Beispiel-App-Repository in Ihrem Verzeichnis htmlapp zu klonen.

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

  3. Legen Sie Variablen zur Aufnahme der Ressourcengruppen- und App-Namen fest, indem Sie die folgenden Befehle ausführen.

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

Erstellen der Web-App

  1. Wechseln Sie zum Verzeichnis mit dem Beispielcode, und führen Sie den Befehl az webapp up aus.

    cd html-docs-hello-world

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

    Die Ausführung dieses Befehls kann einige Minuten dauern. Während der Befehl ausgeführt wird, werden Informationen ähnlich wie im folgenden Beispiel angezeigt.

    {
"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. Öffnen Sie eine neue Registerkarte in Ihrem Browser, navigieren Sie zur App-URL (https://<myAppName>.azurewebsites.net), und überprüfen Sie, ob die App ausgeführt wird. Notieren Sie sich den Titel oben auf der Seite. Lassen Sie den Browser für den nächsten Abschnitt mit der App geöffnet.

    Hinweis

    Sie können aus der Ausgabe des vorherigen Befehls <myAppName>.azurewebsites.net kopieren oder die URL in der Ausgabe auswählen, um die Website auf einer neuen Registerkarte zu öffnen.

Aktualisieren und erneutes Bereitstellen der App

  1. Geben Sie in Cloud Shell code index.html ein, um den Editor zu öffnen. Ändern Sie im <h1>-Headertag Azure App Service - Sample Static HTML Site in Azure App Service Updated oder eine andere gewünschte B Bezeichnung.

  2. Drücken Sie zum Speichern STRG+S und zum Beenden STRG+Q.

  3. Stellen Sie die App mit demselben az webapp up-Befehl erneut bereit, den Sie zuvor verwendet haben.

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

    Tipp

    Sie können den Pfeil nach oben auf der Tastatur verwenden, um frühere Befehle zu durchlaufen.

  4. Wechseln Sie nach Abschluss der Bereitstellung zurück zum Browser aus Schritt 2 im Abschnitt „Erstellen der Web-App“, und aktualisieren Sie die Seite.