Erstellen einer statischen HTML-Web-App in Azure

Von Azure App Service wird ein hochgradig skalierbarer Webhostingdienst mit Self-Patching bereitgestellt. In dieser Schnellstartanleitung wird erläutert, wie Sie eine einfache Website mit HTML und CSS in Azure App Service bereitstellen. In dieser Schnellstartanleitung wird Cloud Shell verwendet. Die Befehle können aber auch lokal über die Azure CLI ausgeführt werden.

Startseite der Beispiel-App

Wenn Sie kein Azure-Abonnement besitzen, erstellen Sie ein kostenloses Konto, bevor Sie beginnen.

Verwenden von Azure Cloud Shell

Azure hostet Azure Cloud Shell, eine interaktive Shell-Umgebung, die Sie über Ihren Browser nutzen können. Sie können entweder Bash oder PowerShell mit Cloud Shell verwenden, um mit Azure-Diensten zu arbeiten. Sie können die vorinstallierten Befehle von Cloud Shell verwenden, um den Code in diesem Artikel auszuführen, ohne etwas in Ihrer lokalen Umgebung installieren zu müssen.

Starten von Azure Cloud Shell:

Option Beispiel/Link
Klicken Sie in der rechten oberen Ecke eines Codeblocks auf Ausprobieren. Durch die Auswahl von Ausprobieren wird der Code nicht automatisch in Cloud Shell kopiert. Beispiel für „Testen Sie es.“ für Azure Cloud Shell
Rufen Sie https://shell.azure.com auf, oder wählen Sie die Schaltfläche Cloud Shell starten, um Cloud Shell im Browser zu öffnen. Starten von Cloud Shell in einem neuen Fenster
Wählen Sie im Azure-Portal rechts oben im Menü die Schaltfläche Cloud Shell aus. Cloud Shell-Schaltfläche im Azure-Portal

Ausführen des Codes in diesem Artikel in Azure Cloud Shell:

  1. Starten Sie Cloud Shell.

  2. Wählen Sie die Schaltfläche Kopieren für einen Codeblock, um den Code zu kopieren.

  3. Fügen Sie den Code mit STRG+UMSCHALT+V unter Windows und Linux oder Cmd+UMSCHALT+V unter macOS in die Cloud Shell-Sitzung ein.

  4. Drücken Sie die EINGABETASTE, um den Code auszuführen.

Herunterladen des Beispiels

Erstellen Sie in Cloud Shell ein Schnellstartverzeichnis, und wechseln Sie dorthin.

mkdir quickstart

cd $HOME/quickstart

Führen Sie als Nächstes den folgenden Befehl aus, um das Beispiel-App-Repository in Ihrem Schnellstartverzeichnis zu klonen.

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

Erstellen einer Web-App

Wechseln Sie zum Verzeichnis mit dem Beispielcode, und führen Sie den Befehl az webapp up aus. Ersetzen Sie im folgenden Beispiel „<app_name>“ durch einen eindeutigen App-Namen. Statischer Inhalt wird durch das Flag --html angegeben.

cd html-docs-hello-world

az webapp up --location westeurope --name <app_name> --html

Der Befehl az webapp up bewirkt Folgendes:

  • Erstellen einer Standardressourcengruppe

  • 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

Die Ausführung dieses Befehls kann einige Minuten in Anspruch nehmen. Während der Ausführung werden Informationen angezeigt, die den Informationen im folgenden Beispiel ähneln:

{
  "app_url": "https://&lt;app_name&gt;.azurewebsites.net",
  "location": "westeurope",
  "name": "&lt;app_name&gt;",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_westeurope",
  "serverfarm": "appsvc_asp_Windows_westeurope",
  "sku": "FREE",
  "src_path": "/home/&lt;username&gt;/quickstart/html-docs-hello-world ",
  &lt; JSON data removed for brevity. &gt;
}

Notieren Sie sich den Wert für resourceGroup. Sie benötigen ihn im Abschnitt Bereinigen von Ressourcen.

Navigieren zur App

Wechseln Sie in einem Browser zur URL der App: http://<app_name>.azurewebsites.net.

Die Seite wird als Azure App Service-Web-App ausgeführt.

Startseite der Beispiel-App

Glückwunsch! Sie haben Ihre erste HTML-App für App Service bereitgestellt.

Aktualisieren und erneutes Bereitstellen der App

Geben Sie in Cloud Shell nano index.html ein, um den Nano-Text-Editor zu öffnen. Ändern Sie im Tag der Überschrift <h1> „Azure App Service – Statische HTML-Beispielsite“ in „Azure App Service“ wie nachfolgend gezeigt:

Nano index.html

Speichern Sie Ihre Änderungen, und beenden Sie Nano. Verwenden Sie ^O zum Speichern und ^X zum Beenden.

Nun stellen Sie die App mit dem gleichen az webapp up-Befehl erneut bereit.

az webapp up --location westeurope --name <app_name> --html

Wechseln Sie nach Abschluss der Bereitstellung wieder zu dem Browserfenster, das im Schritt Navigieren zur App geöffnet wurde, und aktualisieren Sie die Seite.

Aktualisierte Startseite der Beispiel-App

Verwalten Ihrer neuen Azure-App

Suchen Sie im Azure-Portal nach App Services, und wählen Sie diese Option aus, um die von Ihnen erstellte Web-App zu verwalten.

Auswählen von „App Services“ im Azure-Portal

Wählen Sie auf der Seite App Services den Namen Ihrer Azure-App aus.

Portalnavigation zur Azure-App

Die Übersichtsseite Ihrer Web-App wird angezeigt. Hier können Sie einfache Verwaltungsaufgaben wie Durchsuchen, Beenden, Neustarten und Löschen durchführen.

App Service-Blatt im Azure-Portal

Im linken Menü werden verschiedene Seiten für die Konfiguration Ihrer App angezeigt.

Bereinigen von Ressourcen

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Wenn Sie diese Ressourcen in Zukunft nicht mehr benötigen, löschen Sie die Ressourcengruppe, indem Sie den folgenden Befehl in Cloud Shell ausführen. Denken Sie daran, dass der Name der Ressourcengruppe im Schritt Erstellen einer Web-App automatisch für Sie generiert wurde.

az group delete --name appsvc_rg_Windows_westeurope

Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.

Nächste Schritte