Erstellen einer Node.js-Web-App in AzureCreate a Node.js web app in Azure

Hinweis

In diesem Artikel wird eine App in App Service unter Windows bereitgestellt.This article deploys an app to App Service on Windows. Informationen zur Bereitstellung in App Service unter Linux finden Sie unter Erstellen einer Node.js-Web-App in Azure App Service unter Linux.To deploy to App Service on Linux, see Create a Node.js web app in Azure App Service on Linux.

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 diesem Schnellstart-Artikel wird erläutert, wie Sie eine Node.js-App in Azure App Service bereitstellen.This quickstart shows how to deploy a Node.js app to Azure App Service. Sie erstellen die Web-App mithilfe der Azure CLI und stellen mit ZipDeploy Node.js-Beispielcode für die Web-App bereit.You create the web app using the Azure CLI, and you use ZipDeploy to deploy the sample Node.js code to the web app.

In Azure ausgeführte Beispiel-App

Die folgenden Schritte können unter Mac, Windows oder Linux ausgeführt werden.You can follow the steps here using a Mac, Windows, or Linux machine. Nachdem die erforderlichen Komponenten installiert wurden, können die Schritte in etwa fünf Minuten durchgeführt werden.Once the prerequisites are installed, it takes about five minutes to complete the steps.

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.

VoraussetzungenPrerequisites

So führen Sie diesen Schnellstart durch:To complete this quickstart:

Herunterladen des BeispielsDownload the sample

Laden Sie das Node.js-Beispielprojekt von https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip herunter, und extrahieren Sie das ZIP-Archiv.Download the sample Node.js project from https://github.com/Azure-Samples/nodejs-docs-hello-world/archive/master.zip and extract the ZIP archive.

Öffnen Sie die Datei index.js, und suchen Sie nach der folgenden Zeile:Open index.js and find the following line:

const port = process.env.PORT || 1337;

App Service füllt die Umgebungsvariable process.env.PORT aus.App Service populates the environment variable, process.env.PORT. Verwenden Sie diese in Ihrer Anwendung, damit der Code weiß, an welchem Port gelauscht werden soll.Use this in your application so the code knows which port to listen.

Navigieren Sie in einem Terminalfenster zum Stammverzeichnis des Node.js-Beispielprojekts (das Verzeichnis mit index.js).In a terminal window, navigate to the root directory of the sample Node.js project (the directory that contains index.js).

Lokales Ausführen der AppRun the app locally

Führen Sie die Anwendung lokal aus, damit Sie sehen, wie sie beim Bereitstellen in Azure aussehen sollte.Run the application locally so that you see how it should look when you deploy it to Azure. Öffnen Sie ein Terminalfenster, und verwenden Sie das Skript npm start, um den integrierten Node.js-HTTP-Webserver zu starten.Open a terminal window and use the npm start script to launch the built in Node.js HTTP server.

npm start

Öffnen Sie einen Webbrowser, und navigieren Sie zu der Beispielapp auf http://localhost:1337.Open a web browser, and navigate to the sample app at http://localhost:1337.

Auf der Seite wird die Nachricht Hello World aus der Beispiel-App angezeigt.You see the Hello World message from the sample app displayed in the page.

Lokal ausgeführte Beispiel-App

Drücken Sie in Ihrem Terminalfenster STRG+C, um den Webserver zu beenden.In your terminal window, press Ctrl+C to exit the web server.

Hinweis

In Azure App Service wird die App unter Verwendung von iisnode in IIS ausgeführt.In Azure App Service, the app is run in IIS using iisnode. Damit die App mit iisnode ausgeführt werden kann, enthält das Stammverzeichnis der App die Datei „web.config“.To enable the app to run with iisnode, the root app directory contains a web.config file. Die Datei kann von IIS gelesen werden, und die Einstellungen für iisnode sind im GitHub-Repository zu iisnode dokumentiert.The file is readable by IIS, and the iisnode-related settings are documented in the iisnode GitHub repository.

Erstellen einer ZIP-Datei für das ProjektCreate a project ZIP file

Stellen Sie sicher, dass Sie sich noch im Stammverzeichnis Ihres Beispielprojekts (das Verzeichnis mit index.js) befinden.Make sure you're still in the root directory of the sample project (the directory that contains index.js). Erstellen Sie ein ZIP-Archiv mit allen Elementen Ihres Projekts.Create a ZIP archive of everything in your project. Mit dem folgenden Befehl wird das Standardtool in Ihrem Terminal verwendet:The following command uses the default tool in your terminal:

# Bash
zip -r myAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myAppFiles.zip

Später laden Sie diese ZIP-Datei in Azure hoch und stellen sie für App Service bereit.Later, you upload this ZIP file to Azure and deploy it to App Service.

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.

Erstellen einer RessourcengruppeCreate a resource group

Eine Ressourcengruppe ist ein logischer Container, in dem Azure-Ressourcen wie Web-Apps, Datenbanken und Speicherkonten bereitgestellt und verwaltet werden.A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. Sie können z.B. die gesamte Ressourcengruppe später in einem einfachen Schritt löschen.For example, you can choose to delete the entire resource group in one simple step later.

Erstellen Sie in Cloud Shell mit dem Befehl az group create eine Ressourcengruppe.In the Cloud Shell, create a resource group with the az group create command. Im folgenden Beispiel wird am Standort South Central US (USA, Süden-Mitte) die Ressourcengruppe myResourceGroup erstellt.The following example creates a resource group named myResourceGroup in the South Central US location. Wenn Sie alle unterstützten Standorte für App Service im Free-Tarif anzeigen möchten, führen Sie den Befehl az appservice list-locations --sku FREE aus.To see all supported locations for App Service in Free tier, run the az appservice list-locations --sku FREE command.

az group create --name myResourceGroup --location "South Central US"

Im Allgemeinen erstellen Sie Ressourcengruppen und Ressourcen in einer Region in Ihrer Nähe.You generally create your resource group and the resources in a region near you.

Nach Ausführung dieses Befehls werden die Ressourcengruppeneigenschaften in einer JSON-Ausgabe angezeigt.When the command finishes, a JSON output shows you the resource group properties.

Erstellen eines Azure App Service-PlansCreate an Azure App Service plan

Erstellen Sie in Cloud Shell mit dem Befehl az appservice plan create einen App Service-Plan.In the Cloud Shell, create an App Service plan with the az appservice plan create command.

Im folgenden Beispiel wird ein App Service-Plan namens myAppServicePlan mit dem Tarif Free erstellt:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

Nach Erstellung des App Service-Plans zeigt die Azure-Befehlszeilenschnittstelle Informationen wie im folgenden Beispiel an:When the App Service plan has been created, the Azure CLI shows information similar to the following example:

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "South Central US",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "South Central US",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
} 

Erstellen einer Web-AppCreate a web app

Erstellen Sie in Cloud Shell mit dem Befehl az webapp create eine Web-App im App Service-Plan myAppServicePlan.In the Cloud Shell, create a web app in the myAppServicePlan App Service plan with the az webapp create command.

Ersetzen Sie im folgenden Beispiel <app_name> durch einen global eindeutigen App-Namen (gültige Zeichen sind a-z, 0-9 und -).In the following example, replace <app_name> with a globally unique app name (valid characters are a-z, 0-9, and -).

# Bash and Powershell
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name <app_name>

Nach Erstellung der Web-App zeigt die Azure CLI eine Ausgabe wie im folgenden Beispiel an:When the web app has been created, the Azure CLI shows output similar to the following example:

{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.azurewebsites.net",
  "enabled": true,
  < JSON data removed for brevity. >
}

Festlegen der Node.js-RuntimeSet Node.js runtime

Legen Sie die Node.js-Runtime auf „10.14.1“ fest.Set the Node runtime to 10.14.1. Führen Sie az webapp list-runtimes aus, um alle unterstützten Laufzeiten anzuzeigen.To see all supported runtimes, run az webapp list-runtimes.

# Bash and Powershell
az webapp config appsettings set --resource-group myResourceGroup --name <app_name> --settings WEBSITE_NODE_DEFAULT_VERSION=10.14.1

Wechseln Sie zu Ihrer neu erstellten Web-App.Browse to your newly created web app. Ersetzen Sie <app_name> durch einen eindeutigen App-Namen.Replace <app_name> with a unique app name.

http://<app_name>.azurewebsites.net

Ihre neue Web-App sollte nun wie folgt aussehen:Here is what your new web app should look like:

Leere Web-App-Seite

Bereitstellen der ZIP-DateiDeploy ZIP file

Navigieren Sie im Browser zu https://<app_name>.scm.azurewebsites.net/ZipDeployUI.In the browser, navigate to https://<app_name>.scm.azurewebsites.net/ZipDeployUI.

Laden Sie die unter Erstellen einer ZIP-Datei für das Projekt erstellte ZIP-Datei hoch, indem Sie sie auf der Webseite in den Bereich für den Datei-Explorer ziehen.Upload the ZIP file you created in Create a project ZIP file by dragging it to the file explorer area on the web page.

Wenn die Bereitstellung gerade ausgeführt wird, zeigt ein Symbol in der oberen rechten Ecke den Status in Prozent an.When deployment is in progress, an icon in the top right corner shows you the progress in percentage. Auf der Seite werden darüber hinaus unterhalb des Explorer-Bereichs ausführliche Meldungen für den Vorgang angezeigt.The page also shows verbose messages for the operation below the explorer area. Ist der Vorgang abgeschlossen, muss die letzte Bereitstellungsmeldung Deployment successful lauten.When it is finished, the last deployment message should say Deployment successful.

Navigieren zur AppBrowse to the app

Navigieren Sie in Ihrem Webbrowser zu der bereitgestellten Anwendung.Browse to the deployed application using your web browser.

http://<app_name>.azurewebsites.net

Der Node.js-Beispielcode wird in einer Azure App Service-Web-App ausgeführt.The Node.js sample code is running in an Azure App Service web app.

In Azure ausgeführte Beispiel-App

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

Aktualisieren und erneutes Bereitstellen des CodesUpdate and redeploy the code

Öffnen Sie die Datei index.js innerhalb der Node.js-App mit einem Text-Editor, und ändern Sie den Text im Aufruf von response.end geringfügig:Using a text editor, open the index.js file in the Node.js app, and make a small change to the text in the call to response.end:

response.end("Hello Azure!");

Navigieren Sie im lokalen Terminalfenster zum Stammverzeichnis Ihrer Anwendung (das Verzeichnis mit index.js), und erstellen Sie eine neue ZIP-Datei für Ihr aktualisiertes Projekt.In the local terminal window, navigate to your application's root directory (the directory that contains index.js), create a new ZIP file for your updated project.

# Bash
zip -r myUpdatedAppFiles.zip .

# PowerShell
Compress-Archive -Path * -DestinationPath myUpdatedAppFiles.zip

Stellen Sie diese neue ZIP-Datei in App Service bereit. Führen Sie dabei die unter Bereitstellen der ZIP-Datei aufgeführten Schritte aus.Deploy this new ZIP file to App Service, using the same steps in Deploy ZIP file.

Wechseln Sie wieder zu dem Browserfenster, das im Schritt Navigieren zur App geöffnet wurde, und aktualisieren Sie die Seite.Switch back to the browser window that opened in the Browse to the app step, and refresh the page.

In Azure ausgeführte aktualisierte 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-Seite 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:

az group delete --name myResourceGroup

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

Nächste SchritteNext steps