Bereitstellen einer Node.js-Web-App in Azure

• Sie benötigen ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
• Installieren Sie Node.js und npm. Führen Sie den Befehl node --version aus, um sich zu vergewissern, dass Node.js installiert ist.
• Installieren Sie Visual Studio Code.
• Installieren Sie die Azure App Service-Erweiterung für Visual Studio Code.

• Sie benötigen ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
• Installieren von Node.js LTS und npm. Führen Sie den Befehl node --version aus, um sich zu vergewissern, dass Node.js installiert ist.
• Installieren Sie die Azure CLI, mit der Sie Befehle in einer Shell ausführen, um Azure-Ressourcen zu erstellen und zu konfigurieren.

• Sie benötigen ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
• Installieren von Node.js LTS und npm. Führen Sie den Befehl node --version aus, um sich zu vergewissern, dass Node.js installiert ist.
• Verwenden Sie einen FTP-Client (etwa FileZilla) zum Herstellen einer Verbindung mit Ihrer App.

Anmelden bei Azure

1. Stellen Sie im Terminal sicher, dass Sie sich im Verzeichnis myExpressApp befinden, und starten Sie Visual Studio Code dann mit dem folgenden Befehl:

   code .
   

2. Wählen Sie auf der Aktivitätsleiste in Visual Studio Code das Azure-Logo aus.

3. Wählen Sie im App Service-Explorer die Option Bei Azure anmelden aus, und befolgen Sie die Anweisungen.

   In Visual Studio Code sollten Sie Ihre Azure-E-Mail-Adresse in der Statusleiste und Ihr Abonnement im App Service-Explorer sehen.

   

Konfigurieren der App Service-App und Bereitstellen von Code

1. Wählen Sie den Ordner myExpressApp aus.

Stellen Sie im Terminal sicher, dass Sie sich im Verzeichnis myExpressApp befinden, und stellen Sie den Code mithilfe des Befehls az webapp up in Ihrem lokalen Ordner (myExpressApp) bereit:

az webapp up --sku F1 --name <app-name>

az webapp up --sku F1 --name <app-name> --os-type Windows

• Wird der Befehl az nicht erkannt, sollten Sie sich vergewissern, dass die Azure CLI wie unter Einrichten der anfänglichen Umgebung beschrieben installiert wurde.
• Ersetzen Sie <app_name> durch einen Namen, der innerhalb von Azure eindeutig ist. (Gültige Zeichen sind a-z, 0-9 und -.) Weitere Informationen finden Sie im Hinweis am Anfang dieses Artikels. Ein bewährtes Muster ist eine Kombination aus Ihrem Firmennamen und einer App-ID.
• Mit dem Argument --sku F1 wird die Web-App im Free-Tarif erstellt, der keine Kosten verursacht.
• Optional können Sie das Argument --location <location-name> einfügen, wobei <location_name> eine verfügbare Azure-Region ist. Sie können eine Liste der zulässigen Regionen für Ihr Azure-Konto abrufen, indem Sie den Befehl az account list-locations ausführen.
• Mit dem Befehl wird standardmäßig eine Linux-App für Node.js erstellt. Um stattdessen eine Windows-App zu erstellen, verwenden Sie das Argument --os-type.
• Wenn der Fehler „Der Laufzeitstapel Ihrer App konnte nicht automatisch erkannt werden“ angezeigt wird, stellen Sie sicher, dass Sie den Befehl im Verzeichnis myExpressApp ausführen (siehe Behandeln von Problemen mit der automatischen Erkennung mit „az webapp up“).

Die Ausführung des Befehls kann einige Minuten dauern. Bei der Ausführung werden Meldungen zum Erstellen der Ressourcengruppe, dem App Service-Plan und der App-Ressource, zur Konfiguration der Protokollierung und zur Zip-Bereitstellung angezeigt. Anschließend wird die Meldung „You can launch the app at http://<app-name>.azurewebsites.net“ (Sie können die App unter http://.azurewebsites.net starten.) angezeigt. Dabei handelt es sich um die URL der App in Azure. (Weitere Informationen finden Sie im Hinweis am Anfang dieses Artikels.)

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Anmelden beim Azure-Portal

Melden Sie sich beim Azure-Portal an.

Erstellen von Azure-Ressourcen

1. Navigieren Sie zu https://portal.azure.com/#create/Microsoft.WebSite, um mit dem Erstellen einer Node.js-App zu beginnen.

2. Vergewissern Sie sich auf der Registerkarte Grundlagen unter Projektdetails, dass das richtige Abonnement ausgewählt ist, und wählen Sie dann Neu erstellen aus, um eine neue Ressourcengruppe zu erstellen. Geben Sie als Namen myResourceGroup ein.

   

3. Geben Sie unter Details zur Instanz einen global eindeutigen Namen für Ihre Web-App ein, und wählen Sie Code aus. (Weitere Informationen finden Sie im Hinweis am Anfang dieses Artikels.) Wählen Sie im Runtimestapel die Option Node 18 LTS sowie das Betriebssystem und eine Region aus, von der aus Sie Ihre App bedienen möchten.

   

4. Wählen Sie unter App Service-Plan die Option Neu erstellen aus, um einen App Service-Plan zu erstellen. Geben Sie als Name myAppServicePlan ein. Wenn Sie zum Free-Tarif wechseln möchten, wählen Sie Größe ändern und dann die Registerkarte Dev/Test. Wählen Sie F1 aus und unten auf der Seite die Schaltfläche Anwenden.

   

5. Wählen Sie unten auf der Seite die Schaltfläche Überprüfen und erstellen aus.

   

6. Wählen Sie nach der Überprüfung unten auf der Seite die Schaltfläche Erstellen aus.

7. Wenn Ihre Bereitstellung abgeschlossen ist, wählen Sie Go to resource (Zu Ressource wechseln) aus.

   

Abrufen von FTPS-Anmeldeinformationen

Azure App Service unterstützt zwei Arten von Anmeldeinformationen für FTP/S-Bereitstellungen. Diese Anmeldeinformationen sind nicht identisch mit den Anmeldeinformationen Ihres Azure-Abonnements. In diesem Abschnitt erhalten Sie die Anmeldeinformationen für den Anwendungsbereich, die mit FileZilla verwendet werden sollen.

1. Wählen Sie auf der Seite der App Service-App im linken Menü Bereitstellungscenter und dann die Registerkarte FTPS-Anmeldeinformationen aus.

   

2. Öffnen Sie FileZilla, und erstellen Sie eine neue Site.

3. Kopieren Sie auf der Registerkarte FTPS-Anmeldeinformationen die Werte für FTPS-Endpunkt, Benutzername und Kennwort in FileZilla.

   

4. Wählen Sie in FileZilla Verbinden aus.

Bereitstellen von Dateien mit FTPS

1. Kopieren Sie alle Dateien und Verzeichnisdateien in das Verzeichnis /site/wwwroot in Azure.

   

2. Navigieren Sie zur URL Ihrer App, um sicherzustellen, dass die Anwendung richtig ausgeführt wird.

2. Wählen Sie im App Service-Explorer das In Web-App bereitstellen-Symbol aus, und bestätigen Sie durch erneutes Auswählen von Bereitstellen.

3. Warten Sie bis zum Abschluss der Bereitstellung, und wählen Sie dann im Benachrichtigungspopup Website durchsuchen aus. Sie sollten sehen, dass die Meldung Welcome to Express in Welcome to Azure geändert wurde.

2. Speichern Sie Ihre Änderungen, und stellen Sie die App dann mit dem Befehl az webapp up erneut bereit, wiederum ohne Argumente für Linux. Fügen Sie für Windows --os-type Windows hinzu:

   az webapp up
   

   In diesem Befehl werden lokal zwischengespeicherte Werte aus der Datei .azure/config verwendet (z. B. App-Name, Ressourcengruppe und App Service-Plan).

3. Sobald die Bereitstellung abgeschlossen ist, aktualisieren Sie die Webseite http://<app-name>.azurewebsites.net. (Weitere Informationen finden Sie im Hinweis am Anfang dieses Artikels.) Sie sollten sehen, dass die Meldung Welcome to Express in Welcome to Azure geändert wurde.

2. Speichern Sie Ihre Änderungen, und stellen Sie die App dann mithilfe des FTP-Clients bereit.

3. Sobald die Bereitstellung abgeschlossen ist, aktualisieren Sie die Webseite http://<app-name>.azurewebsites.net. (Weitere Informationen finden Sie im Hinweis am Anfang dieses Artikels.) Sie sollten sehen, dass die Meldung Welcome to Express in Welcome to Azure geändert wurde.

Sie können die Protokollausgabe (Aufrufe von console.log()) der Azure-App direkt in das Visual Studio Code-Ausgabefenster streamen.

1. Klicken Sie im App Service-Explorer mit der rechten Maustaste auf den App-Knoten, und wählen Sie Streamen der Protokolle starten aus.

   

2. Wenn Sie aufgefordert werden, die App neu zu starten, wählen Sie Ja aus. Sobald die App neu gestartet wurde, wird das Visual Studio Code-Ausgabefenster mit einer Verbindung mit dem Protokollstream geöffnet.

3. Nach einigen Sekunden wird im Ausgabefenster eine Meldung mit dem Hinweis angezeigt, dass eine Verbindung mit dem Protokollstreamingdienst hergestellt wurde. Sie können weitere Ausgabeaktivitäten generieren, indem Sie die Seite im Browser aktualisieren.

    Connecting to log stream...
    2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
    Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
    

Sie können auf die Konsolenprotokolle zugreifen, die innerhalb der App und des Containers, in dem sie ausgeführt wird, generiert wurden. Protokolle enthalten alle Ausgaben, die durch Aufrufe von console.log() generiert werden.

Führen Sie zum Streamen von Protokollen den Befehl az webapp log tail aus:

az webapp log tail

Der Befehl verwendet den Ressourcengruppennamen, der in der Datei .azure/config zwischengespeichert ist.

Sie können auch den Parameter --logs mit dem Befehl az webapp up einfügen, damit der Protokolldatenstrom bei der Bereitstellung automatisch geöffnet wird.

Aktualisieren Sie die App im Browser, um Konsolenprotokolle zu erstellen, die Meldungen mit einer Beschreibung der HTTP-Anforderungen an die App enthalten. Wenn nicht sofort eine Ausgabe angezeigt wird, versuchen Sie es nach 30 Sekunden erneut.

Sie können im Terminal jederzeit STRG+C drücken, um das Protokollstreaming zu beenden.

Sie können auf die Konsolenprotokolle zugreifen, die innerhalb der App und des Containers, in dem sie ausgeführt wird, generiert wurden. Sie können die Protokollausgabe (Aufrufe von console.log()) der Node.js-App direkt in das Azure-Portal streamen.

1. Scrollen Sie auf der gleichen App Service-Seite für Ihre App im linken Menü zum Abschnitt Überwachung, und wählen Sie Protokollstream aus.

   

2. Nach einigen Sekunden wird im Ausgabefenster eine Meldung mit dem Hinweis angezeigt, dass eine Verbindung mit dem Protokollstreamingdienst hergestellt wurde. Sie können weitere Ausgabeaktivitäten generieren, indem Sie die Seite im Browser aktualisieren.

    Connecting...
    2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
    Starting Log Tail -n 10 of existing logs ----
    /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
    2021-10-26T21:04:08.614384810Z: [INFO]
    2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
    2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
    2021-10-26T21:04:08.614403210Z: [INFO]
    2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
    2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
    2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
    2021-10-26T21:04:08.614419610Z: [INFO]  fi
    2021-10-26T21:04:08.614423411Z: [INFO]
    2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
    Ending Log Tail of existing logs ---
    

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Die Schritte in dieser Schnellstartanleitung legen alle Ressourcen in dieser Ressourcengruppe ab. Zur Bereinigung müssen Sie lediglich die Ressourcengruppe entfernen.

1. Erweitern Sie in der Azure-Erweiterung von Visual Studio den Ressourcengruppen-Explorer.

2. Erweitern Sie das Abonnement, klicken Sie mit der rechten Maustaste auf die Ressourcengruppe, die Sie zuvor erstellt haben, und wählen Sie Löschen aus.

   

3. Wenn Sie dazu aufgefordert werden, bestätigen Sie ihren Löschvorgang, indem Sie den Namen der zu löschenden Ressourcengruppe eingeben. Im Anschluss an die Bestätigung wird die Ressourcengruppe gelöscht, und es wird nach Abschluss des Vorgangs eine Benachrichtigung angezeigt.

In den vorherigen Schritten haben Sie Azure-Ressourcen in einer Ressourcengruppe erstellt. Die Ressourcengruppe hat abhängig von Ihrem Standort einen Namen wie „appsvc_rg_Linux_CentralUS“.

Wenn Sie diese Ressourcen voraussichtlich nicht mehr benötigen, löschen Sie die Ressourcengruppen mit folgendem Befehl:

az group delete --no-wait

Der Befehl verwendet den Ressourcengruppennamen, der in der Datei .azure/config zwischengespeichert ist.

Mit dem Argument --no-wait kann für den Befehl die Rückgabe erfolgen, bevor der Vorgang abgeschlossen ist.

Wenn die Ressourcengruppe, der App-Dienst und alle zugehörigen Ressourcen nicht mehr benötigt werden, können Sie sie löschen.

1. Wählen Sie auf der Seite Übersicht von App Service die Ressourcengruppe aus, die Sie im Schritt Erstellen von Azure-Ressourcen erstellt haben.

   

2. Wählen Sie auf der Seite Ressourcengruppe die Option Ressourcengruppe löschen aus. Bestätigen Sie dann den Namen der Ressourcengruppe, um das Löschen der Ressourcen abzuschließen.