Bereitstellen einer Node.js-Web-App in Azure

• Sie benötigen ein Azure-Konto mit einem aktiven Abonnement. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Installieren Sie Node.js LTS. 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. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Installieren Sie Node.js LTS. Führen Sie den Befehl node --version aus, um sich zu vergewissern, dass Node.js installiert ist.
• Installieren Sie Azure CLI, mit dem Sie Befehle in einer Shell ausführen können, um Azure-Ressourcen zu erstellen und zu konfigurieren.

• Sie benötigen ein Azure-Konto mit einem aktiven Abonnement. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
• Installieren Sie Node.js LTS. Führen Sie den Befehl node --version aus, um sich zu vergewissern, dass Node.js installiert ist.
• Verwenden Sie einen FTP-Client, z. B. FileZilla, um Dateien an App Service zu übertragen.

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. Stellen Sie sicher, dass Sie mit Ihrem Azure-Konto angemeldet sind.

Konfigurieren der App Service-App und Bereitstellen von Code

Stelle im Terminal sicher, dass du im myExpressApp-Verzeichnis bist. Ersetzen Sie <app-name> durch einen global eindeutigen Namen und erstellen Sie dann die Ressourcengruppe, den App Service Plan und die App. Legen Sie SCM_DO_BUILD_DURING_DEPLOYMENT so fest, dass App Service die Abhängigkeiten installiert und die App erstellt, wenn Sie das Quellarchiv bereitstellen.

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• 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 in ganz Azure einzigartig ist (gültige Zeichen sind a-z, 0-9, und -).
• Das Argument --sku P0v3 wählt die kostenpflichtige Premium-v3-Preisklasse. Ersetzen Sie eastus durch Ihre bevorzugte Region; listen Sie verfügbare Regionen mit az account list-locationsauf.
• --is-linux wählt einen Linux-Plan aus. Lassen Sie es für einen Windows-Plan weg, wie im Windows-Tab gezeigt.

Erstelle ein ZIP-Archiv der Dateien in myExpressApp, nicht des übergeordneten Verzeichnisses. Unter Linux oder macOS führen Sie zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' in myExpressApp aus. Unter Windows führen Sie in PowerShell von Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip aus. Dann deploye das Archiv:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

Navigieren Sie zu https://<app-name>.azurewebsites.net, um die App zu sehen.

Erstellen von Azure-Ressourcen

1. Melden Sie sich beim Azure-Portal an.

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

3. 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.

   

4. Geben Sie unter Details zur Instanz einen global eindeutigen Namen für Ihre Web-App ein, und wählen Sie Code aus. Wählen Sie Node 24 LTS im Runtime-Stapel, ein Betriebssystem und eine Region aus, aus der Sie Ihre App bereitstellen möchten.

   

5. Wählen Sie unter "Preispläne" die Option " Neu erstellen" aus, um einen App Service-Plan zu erstellen. Geben Sie als Name myAppServicePlan ein. Um zur Stufe "Kostenlos" zu wechseln, wählen Sie in der Preisplanliste"Kostenlos F1" aus.

   

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

   

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

8. 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 Ihrem FTP-Client verwendet werden sollen.

1. Wählen Sie in der Seitenleiste auf der Seite der App Service-App das Bereitstellungscenter unter Bereitstellung aus, und gehen Sie dann zur Registerkarte FTPS-Anmeldeinformationen.

   

2. Öffnen Sie Ihren FTP-Client, und navigieren Sie zu Ihrem MyExpressApp-Ordner .

3. Kopieren Sie auf der Registerkarte "FTPS-Anmeldeinformationen " den FTPS-Endpunkt, den Benutzernamen und das Kennwort in Ihren FTP-Client.

   

4. Wählen Sie "Verbinden" in Ihrem FTP-Client 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 Welcome to Express Nachricht zu Welcome to Azure geändert wurde.

2. Speichere deine Änderungen, erstelle ../app.zip aus den App-Dateien, wie in Deploy to Azure beschrieben, erneut, und deploye erneut:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Ersetze <app-name> durch den Namen, den du bei der Erstellung der Web-App verwendet hast.

3. Sobald die Bereitstellung abgeschlossen ist, aktualisieren Sie die Webseite. Sie sollten sehen, dass die Welcome to Express Nachricht zu 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. Sie sollten sehen, dass die Welcome to Express Nachricht zu 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 in "Ressourcen " in Visual Studio Code mit der rechten Maustaste auf den App-Knoten, und wählen Sie dann " Streamingprotokolle 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. Protokolldateien enthalten alle Ausgaben, die durch Aufrufe von console.log() erzeugt werden.

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

• Zuerst das Logging aktivieren: unter Linux az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem ausführen; unter Windows az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem ausführen.

az webapp log tail --resource-group myResourceGroup --name <app-name>

Ersetze <app-name> durch den Namen, den du bei der Erstellung der Web-App verwendet hast.

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. Verwenden Sie auf derselben App Service-Seite für Ihre App das Randleistenmenü, um zum Abschnitt " Überwachung " zu scrollen, und wählen Sie "Protokolldatenstrom" 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. Wählen Sie in der Azure-Erweiterung von Visual Studio Code in der Liste Gruppieren nach die Option Gruppieren nach Ressourcengruppe aus.

2. Erweitern Sie in der Liste "Ressourcen " das Abonnement, klicken Sie mit der rechten Maustaste auf die Ressourcengruppe, die Sie zuvor erstellt haben, und wählen Sie dann " Ressourcengruppe 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. Nachdem Sie dies bestätigt haben, wird die Ressourcengruppe gelöscht, und wenn sie fertig ist, wird eine Benachrichtigung angezeigt.

In den vorangegangenen CLI-Schritten haben Sie Azure-Ressourcen in myResourceGroup erstellt.

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

az group delete --name myResourceGroup --no-wait

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.