Erstellen einer statischen HTML-Web-App in AzureCreate a static HTML web app in Azure

Von Azure App Service wird ein hochgradig skalierbarer Webhostingdienst mit Self-Patching bereitgestellt.Azure App Service provides a highly scalable, self-patching web hosting service. In dieser Schnellstartanleitung wird erläutert, wie Sie eine einfache Website mit HTML und CSS in Azure App Service bereitstellen.This quickstart shows how to deploy a basic HTML+CSS site to Azure App Service. In dieser Schnellstartanleitung wird Cloud Shell verwendet. Die Befehle können aber auch lokal über die Azure CLI ausgeführt werden.You'll complete this quickstart in Cloud Shell, but you can also run these commands locally with Azure CLI.

Startseite der Beispiel-App

Wenn Sie kein Azure-Abonnement besitzen, erstellen Sie ein kostenloses Konto, bevor Sie beginnen.If you don't have an Azure subscription, create a free account before you begin.

Verwenden von Azure Cloud ShellUse Azure Cloud Shell

Azure hostet Azure Cloud Shell, eine interaktive Shell-Umgebung, die Sie über Ihren Browser nutzen können.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell ermöglicht die Verwendung von bash oder PowerShell, um mit Azure-Diensten zu arbeiten.Cloud Shell lets you use either bash or PowerShell to work with Azure services. 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.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Starten von Azure Cloud Shell:To launch Azure Cloud Shell:

OptionOption Beispiel/LinkExample/Link
Klicken Sie in der rechten oberen Ecke eines Codeblocks auf Ausprobieren.Select Try It in the upper-right corner of a code block. Durch die Auswahl von Ausprobieren wird der Code nicht automatisch in Cloud Shell kopiert.Selecting Try It doesn't automatically copy the code to Cloud Shell. 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.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Starten von Cloud Shell in einem neuen FensterLaunch Cloud Shell in a new window
Wählen Sie im Azure-Portal oben rechts in der Menüleiste die Schaltfläche Cloud Shell.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Cloud Shell-Schaltfläche im Azure-Portal

Ausführen des Codes in diesem Artikel in Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Starten Sie Cloud Shell.Launch Cloud Shell.

  2. Wählen Sie die Schaltfläche Kopieren für einen Codeblock, um den Code zu kopieren.Select the Copy button on a code block to copy the code.

  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.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.

  4. Drücken Sie die EINGABETASTE, um den Code auszuführen.Press Enter to run the code.

Herunterladen des BeispielsDownload the sample

Erstellen Sie in Cloud Shell ein Schnellstartverzeichnis, und wechseln Sie dorthin.In the Cloud Shell, create a quickstart directory and then change to it.

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.Next, run the following command to clone the sample app repository to your quickstart directory.

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

Erstellen einer Web-AppCreate a web app

Wechseln Sie zum Verzeichnis mit dem Beispielcode, und führen Sie den Befehl az webapp up aus.Change to the directory that contains the sample code and run the az webapp up command.

Ersetzen Sie im folgenden Beispiel „<app_name>“ durch einen eindeutigen App-Namen.In the following example, replace <app_name> with a unique app name.

cd html-docs-hello-world

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

Der Befehl az webapp up bewirkt Folgendes:The az webapp up command does the following actions:

  • Erstellen einer StandardressourcengruppeCreate a default resource group.

  • Erstellen eines standardmäßigen App Service-PlansCreate a default app service plan.

  • Erstellen einer App mit dem angegebenen NamenCreate an app with the specified name.

  • Bereitstellen von ZIP-Dateien aus dem aktuellen Arbeitsverzeichnis für die Web-AppZip deploy files from the current working directory to the web app.

Die Ausführung dieses Befehls kann einige Minuten in Anspruch nehmen.This command may take a few minutes to run. Während der Ausführung werden Informationen angezeigt, die den Informationen im folgenden Beispiel ähneln:While running, it displays information similar to the following example:

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

Notieren Sie sich den Wert für resourceGroup.Make a note of the resourceGroup value. Sie benötigen ihn im Abschnitt Bereinigen von Ressourcen.You need it for the clean up resources section.

Navigieren zur AppBrowse to the app

Wechseln Sie in einem Browser zur URL der App: http://<app_name>.azurewebsites.net.In a browser, go to the app URL: http://<app_name>.azurewebsites.net.

Die Seite wird als Azure App Service-Web-App ausgeführt.The page is running as an Azure App Service web app.

Startseite der Beispiel-App

Glückwunsch!Congratulations! Sie haben Ihre erste HTML-App für App Service bereitgestellt.You've deployed your first HTML app to App Service.

Aktualisieren und erneutes Bereitstellen der AppUpdate and redeploy the app

Geben Sie in Cloud Shell nano index.html ein, um den Nano-Text-Editor zu öffnen.In the Cloud Shell, type nano index.html to open the nano text editor. Ändern Sie im Tag der Überschrift <h1> „Azure App Service – Statische HTML-Beispielsite“ in „Azure App Service“ wie nachfolgend gezeigt:In the <h1> heading tag, change "Azure App Service - Sample Static HTML Site" to "Azure App Service", as shown below.

Nano index.html

Speichern Sie Ihre Änderungen, und beenden Sie Nano.Save your changes and exit nano. Verwenden Sie ^O zum Speichern und ^X zum Beenden.Use the command ^O to save and ^X to exit.

Nun stellen Sie die App mit dem gleichen az webapp up-Befehl erneut bereit.You'll now redeploy the app with the same az webapp up command.

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

Wechseln Sie nach Abschluss der Bereitstellung wieder zu dem Browserfenster, das im Schritt Navigieren zur App geöffnet wurde, und aktualisieren Sie die Seite.Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

Aktualisierte Startseite der Beispiel-App

Verwalten Ihrer neuen Azure-AppManage your new Azure app

Wechseln Sie zum Azure-Portal, um die erstellte Web-App zu verwalten.Go to the Azure portal to manage the web app you created.

Klicken Sie im linken Menü auf App Services und anschließend auf den Namen Ihrer Azure-App.From the left menu, click App Services, and then click the name of your Azure app.

Portalnavigation zur Azure-App

Die Übersichtsseite Ihrer Web-App wird angezeigt.You see your web app's Overview page. Hier können Sie einfache Verwaltungsaufgaben wie Durchsuchen, Beenden, Neustarten und Löschen durchführen.Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

App Service-Blatt im Azure-Portal

Im linken Menü werden verschiedene Seiten für die Konfiguration Ihrer App angezeigt.The left menu provides different pages for configuring your app.

Bereinigen von RessourcenClean up resources

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt.In the preceding steps, you created Azure resources in a resource group. 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.If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell. Denken Sie daran, dass der Name der Ressourcengruppe im Schritt Erstellen einer Web-App automatisch für Sie generiert wurde.Remember that the resource group name was automatically generated for you in the create a web app step.

az group delete --name appsvc_rg_Windows_westeurope

Die Ausführung dieses Befehls kann eine Minute in Anspruch nehmen.This command may take a minute to run.

Nächste SchritteNext steps