Bereitstellen einer Node.js- und MongoDB-Web-App in Azure

Azure App Service bietet einen hochgradig skalierbaren Webhostingdienst mit Self-Patching unter dem Linux-Betriebssystem. In diesem Tutorial wird gezeigt, wie Sie eine sichere Node.js-App in Azure App Service erstellen, die mit einer MongoDB-Datenbank verbunden ist (unter Verwendung von Azure Cosmos DB mit der MongoDB-API). Wenn Sie fertig sind, verfügen Sie über eine Express.js-App, die in Azure App Service für Linux ausgeführt wird.

Diagramm: Bereitstellen der Express.js-App in Azure App Service und Hosten der MongoDB-Daten in Azure Cosmos DB

In diesem Artikel wird davon ausgegangen, dass Sie bereits mit der Node.js-Entwicklung vertraut sind und Node und MongoDB lokal installiert haben. Sie benötigen außerdem ein Azure-Konto mit einem aktiven Abonnement. Falls Sie kein Azure-Konto besitzen, können Sie kostenlos eines erstellen.

Beispielanwendung

Führen Sie für dieses Tutorial das Klonen oder Herunterladen der Beispielanwendung aus dem Repository https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app durch.

git clone https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.git

Wenn Sie die Anwendung lokal ausführen möchten, gehen Sie wie folgt vor:

  • Installieren Sie die Paketabhängigkeiten durch Ausführen von npm install.
  • Kopieren Sie die Datei .env.sample nach .env, und geben Sie für den Wert „DATABASE_URL“ Ihre MongoDB-URL an (z. B. mongodb://localhost:27017/).
  • Starten Sie die Anwendung mithilfe von npm start.
  • Navigieren Sie zum Anzeigen der App zu http://localhost:3000.

1. Erstellen von Instanzen für App Service und Cosmos DB

In diesem Schritt erstellen Sie die Azure-Ressourcen. Die in diesem Tutorial ausgeführten Schritte erstellen eine Reihe standardmäßig sicherer Ressourcen, die App Service und die Azure Cosmos DB-API für MongoDB enthalten. Für den Erstellungsprozess geben Sie Folgendes an:

  • Den Namen für die Web-App. Dieser Name wird als Teil des DNS-Namens für Ihre Web-App im Format https://<app-name>.azurewebsites.net verwendet.
  • Die Region für die physische Ausführung der App in der Welt
  • Der Runtimestapel für die App. Hier wählen Sie die Version von Node aus, die für Ihre App verwendet werden soll.
  • Der Hostingplan für die App. Dies ist der Tarif, der die Features und Skalierungskapazität für Ihre App enthält.
  • Die Ressourcengruppe für die App. Mit einer Ressourcengruppe können Sie (in einem logischen Container) alle für die Anwendung benötigten Azure-Ressourcen gruppieren.

Melden Sie sich beim Azure-Portal an, und führen Sie die folgenden Schritte aus, um Ihre Azure App Service-Ressourcen zu erstellen.

Schritt 1: Führen Sie im Azure-Portal die folgenden Schritte aus:

  1. Geben Sie auf der Suchleiste oben im Azure-Portal „Web App Datenbank“ ein.
  2. Wählen Sie das Element mit der Bezeichnung Web-App + Datenbank unter der Überschrift Marketplace aus. Sie können auch direkt zum Erstellungs-Assistenten navigieren.

Screenshot: Verwenden des Suchfelds auf der oberen Symbolleiste, um den Erstellungs-Assistenten „Web-App + Datenbank“ zu finden.

Schritt 2: Füllen Sie das Formular auf der Seite Web-App + Datenbank erstellen wie folgt aus.

  1. Ressourcengruppe → Wählen Sie die Option Neu erstellen aus, und verwenden Sie einen Namen wie msdocs-expressjs-mongodb-tutorial.
  2. Region: Eine beliebige Azure-Region in Ihrer Nähe.
  3. Namemsdocs-expressjs-mongodb-XYZ, wobei XYZ für drei beliebige Zeichen steht. Dieser Name muss innerhalb von Azure eindeutig sein.
  4. RuntimestapelNode 16 LTS
  5. HostingplanBasic. Wenn Sie bereit sind, können Sie später auf einen Produktionstarif hochskalieren.
  6. Cosmos DB-API für MongoDB wird standardmäßig als Datenbank-Engine ausgewählt. Azure Cosmos DB ist eine cloudnative Datenbank mit einer API, die zu 100 % mit MongoDB kompatibel ist. Beachten Sie den Datenbanknamen, der für Sie generiert wird (<App-Name-Datenbank>). Sie benötigen die Information später.
  7. Klicken Sie auf Überprüfen + erstellen.
  8. Wenn die Überprüfung abgeschlossen ist, wählen Sie Erstellen aus.

Screenshot: wie eine neue App und Datenbank im „Web-App + Datenbank“-Assistenten konfiguriert wird.

Schritt 3: Die Bereitstellung dauert einige Minuten. Wählen Sie nach Abschluss der Bereitstellung die Schaltfläche Zu Ressource wechseln aus. Sie werden direkt zur App Service App weitergeleitet, aber die folgenden Ressourcen werden erstellt:

  • Ressourcengruppe → Der Container für alle erstellten Ressourcen.
  • App Service-Plan → Definiert die Berechnungsressourcen für App Service. Ein Linux-Plan im Basic-Tarif wird erstellt.
  • App Service → Stellt Ihre App dar und wird im App Service Plan ausgeführt.
  • Virtuelles Netzwerk → Integriert mit der App Service App und isoliert den Backend-Netzwerkdatenverkehr.
  • Privater Endpunkt → Zugriffsendpunkt für die Datenbankressource im virtuellen Netzwerk
  • Netzwerkschnittstelle → Stellt eine private IP-Adresse für den privaten Endpunkt dar.
  • Cosmos DB-API für MongoDB → Nur von hinter dem privaten Endpunkt aus zugänglich Eine Datenbank und ein Benutzer werden für Sie auf dem Server erstellt.
  • Private DNS-Zone → Aktiviert die DNS-Auflösung des Cosmos DB-Servers im virtuellen Netzwerk.

Screenshot: Abgeschlossener Bereitstellungsprozess

2. Einrichten der Datenbankkonnektivität

Der Erstellungs-Assistent hat den MongoDB-URI bereits für Sie generiert, aber Ihre App benötigt die Variablen DATABASE_URL und DATABASE_NAME. In diesem Schritt erstellen Sie App-Einstellungen mit dem Format, das Ihre App benötigt.

Schritt 1: Wählen Sie auf der Azure App Service-Seite im linken Menü Konfiguration aus.

Screenshot: wie die Konfigurationsseite in App Service geöffnet wird.

Schritt 2: Erstellen Sie auf der Registerkarte Anwendungseinstellungen auf der Seite Konfiguration eine DATABASE_NAME Einstellung:

  1. Klicken Sie auf Neue Anwendungseinstellung.
  2. Geben Sie in das Feld Name den Namen DATABASE_NAME ein.
  3. Geben Sie im Feld Wert den automatisch generierten Datenbanknamen aus dem Erstellungs-Assistenten ein, der wie msdocs-expressjs-mongodb-XYZ-database aussieht.
  4. Klicken Sie auf OK.

Screenshot: wie Sie die automatisch generierte Zeichenfolge sehen können.

Schritt 3.

  1. Scrollen Sie ans Ende der Seite, und wählen Sie die Verbindungszeichenfolge MONGODB_URI aus. Sie wurde vom Erstellungs-Assistenten generiert.
  2. Wählen Sie im Feld Wert die Schaltfläche Kopieren aus, und fügen Sie den Wert für den nächsten Schritt in eine Textdatei ein. Er hat das Verbindungszeichenfolgen-URI-Format von MongoDB.
  3. Klicken Sie auf Abbrechen.

Screenshot: wie eine App-Einstellung erstellt wird.

Schritt 4.

  1. Erstellen Sie mit den gleichen Schritten in Schritt 2 eine App-Einstellung namens DATABASE_URL, und legen Sie den Wert auf den Wert fest, den Sie aus der Verbindungszeichenfolge MONGODB_URI kopiert haben (d. h. mongodb://...).
  2. Klicken Sie oben auf der Menüleiste auf Speichern.
  3. Wählen Sie bei entsprechender Aufforderung Weiter aus.

Screenshot: Speichern von Einstellungen auf der Konfigurationsseite

3. Bereitstellen von Beispielcode

In diesem Schritt konfigurieren Sie die GitHub-Bereitstellung mithilfe von GitHub Actions. Es ist nur eine der vielen Möglichkeiten, um App Service bereitzustellen, aber auch eine hervorragende Möglichkeit, eine kontinuierliche Integration in Ihren Bereitstellungsprozess zu haben. Standardmäßig startet jede git push in Ihrem GitHub-Repository die Build- und Bereitstellungsaktion.

Schritt 1: In einem neuen Browserfenster:

  1. Melden Sie sich bei Ihrem GitHub-Konto an.
  2. Navigiere zu https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app.
  3. Wählen Sie Fork aus.
  4. Wählen Sie Fork erstellen aus.

Screenshot: wie eine Verzweigung des Beispiel-GitHub-Repositorys erstellt wird.

Schritt 2: Öffnen Sie auf der GitHub-Seite Visual Studio Code im Browser, indem Sie die .-Taste drücken.

Screenshot: wie die Visual Studio Code-Browseroberfläche in GitHub geöffnet wird.

Schritt 3: Öffnen Sie in Visual Studio Code im Browser config/connection.js im Explorer. In der Funktion getConnectionInfo sehen Sie, dass die zuvor für die MongoDB-Verbindung erstellten App-Einstellungen (DATABASE_URL und DATABASE_NAME) verwendet werden.

Screenshot: Visual Studio Code im Browser und eine geöffnete Datei.

Schritt 4. Wählen Sie, wenn Sie wieder auf der App Service-Seite sind, im linken Menü Bereitstellungscenter aus.

Screenshot: wie das Bereitstellungscenter in App Service geöffnet wird.

Schritt 5. Auf der Seite Bereitstellungscenter:

  1. Wählen Sie in Quelle die Option GitHub aus. Standardmäßig wird GitHub Actions als Buildanbieter ausgewählt.
  2. Melden Sie sich bei Ihrem GitHub-Konto an und folgen Sie der Aufforderung, Azure zu autorisieren.
  3. Wählen Sie in Organisation Ihr Konto aus.
  4. Wählen Sie im Repository das Repository msdocs-nodejs-mongodb-azure-sample-app aus.
  5. Wählen Sie in Branch die Option Hauptbereich aus.
  6. Wählen Sie im oberen Menü Speichern aus. App Service committet eine Workflowdatei in das ausgewählte GitHub-Repository im .github/workflows-Verzeichnis.

Screenshot: wie CI/CD mit GitHub Actions konfiguriert wird.

Schritt 6. Auf der Seite Bereitstellungscenter:

  1. Wählen Sie Protokolle aus. Eine Bereitstellungsausführung wird bereits gestartet.
  2. Wählen Sie im Protokollelement für die Bereitstellungsausführung die Option Build/Deploy Logs aus.

Screenshot: wie das Bereitstellungscenter in App Service geöffnet wird.

Schritt 7. Sie werden an Ihr GitHub-Repository weitergeleitet und sehen, dass die GitHub-Aktion ausgeführt wird. Die Workflowdatei definiert zwei separate Phasen, Erstellen und Bereitstellen. Warten Sie, bis die GitHub-Ausführung den Status Abgeschlossen anzeigt. Das Upgrade dauert ca. 15 Minuten.

Screenshot: Aktive GitHub-Ausführung

4. Navigieren zur App

Schritt 1: Auf der App Service-Seite:

  1. Wählen Sie im Menü auf der linken Seite die Option Übersicht aus.
  2. Wählen Sie die URL Ihrer App aus. Sie können auch direkt zu https://<app-name>.azurewebsites.net navigieren.

Screenshot: wie ein App Service vom Azure-Portal gestartet wird.

Schritt 2: Fügen Sie der Liste einige Aufgaben hinzu. Glückwunsch! Sie führen eine sichere datengesteuerte Node.js-App in Azure App Service aus.

Screenshot: Express.js-App, die in App Service ausgeführt wird

5. Streamen von Diagnoseprotokollen

Azure App Service erfasst alle Nachrichten, die an der Konsole protokolliert werden, um Sie bei der Diagnose von Problemen mit Ihrer Anwendung zu unterstützen. Die Beispiel-App gibt Konsolenprotokollmeldungen an jedem ihrer Endpunkte aus, um diese Funktion zu veranschaulichen. Beispielsweise gibt der Endpunkt get eine Meldung über die Anzahl der aus der Datenbank abgerufenen Aufgaben aus, und eine Fehlermeldung wird angezeigt, wenn etwas nicht geklappt hat.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Schritt 1: Auf der App Service-Seite:

  1. Wählen Sie im linken Menü App Service-Protokolle aus.
  2. Wählen Sie unter Anwendungsprotokollierung die Option Dateisystem aus.

Screenshot: wie native Protokolle in App Service im Azure-Portal aktiviert werden.

Schritt 2: Wählen Sie im Menü auf der linken Seite die Option Protokollstream aus. Sie sehen die Protokolle für Ihre App, einschließlich Plattformprotokolle und Protokolle innerhalb des Containers.

Screenshot: wie der Protokollstream im Azure-Portal angezeigt wird.

6. Untersuchen bereitgestellter Dateien mit Kudu

Azure App Service bietet eine webbasierte Diagnosekonsole namens Kudu, über die Sie die Serverhostingumgebung für Ihre Web-App untersuchen können. Mit Kudu können Sie die in Azure bereitgestellten Dateien anzeigen, den Bereitstellungsverlauf der Anwendung überprüfen und sogar eine SSH-Sitzung in der Hostingumgebung öffnen.

Schritt 1: Auf der App Service-Seite:

  1. Wählen Sie im linken Menü Erweiterte Tools aus.
  2. Klicken Sie auf Starten. Sie können auch direkt zu https://<app-name>.scm.azurewebsites.net navigieren.

Screenshot: Navigieren zur App Service-Seite für Kudu

Schritt 2: Wählen Sie auf der Seite „Kudu“ die Option Bereitstellungen aus.

Screenshot: Hauptseite in der Kudu SCM-App mit den verschiedenen verfügbaren Informationen zur Hostingumgebung

Wenn Sie mithilfe von Git oder einer ZIP-Bereitstellung Code in App Service bereitgestellt haben, wird der Bereitstellungsverlauf Ihrer Web-App angezeigt.

Screenshot: Bereitstellungsverlauf einer App Service-App im JSON-Format

Schritt 3: Navigieren Sie zurück zur Kudu-Startseite, und wählen Sie Site wwwroot aus.

Screenshot: „site wwwroot“ ausgewählt

Sie können die bereitgestellte Ordnerstruktur anzeigen und klicken, um die Dateien zu durchsuchen und anzuzeigen.

Screenshot: Bereitgestellte Dateien im Verzeichnis „wwwroot“

7. Bereinigen von Ressourcen

Wenn Sie fertig sind, können Sie alle Ressourcen aus Ihrem Azure-Abonnement löschen, indem Sie die Ressourcengruppe löschen.

Schritt 1: In der Suchleiste oben im Azure-Portal:

  1. Geben Sie den Ressourcengruppennamen ein.
  2. Wählen Sie die Ressourcengruppe aus.

Screenshot: Suchen nach einer Ressourcengruppe und Navigieren zu einer Ressourcengruppe im Azure-Portal

Schritt 2: Wählen Sie auf der Seite „Ressourcengruppe“ die Option Ressourcengruppe löschen aus.

Screenshot: Position der Schaltfläche „Ressourcengruppe löschen“ im Azure-Portal.

Schritt 3.

  1. Geben Sie den Namen der Ressourcengruppe ein, um Ihre Löschung zu bestätigen.
  2. Klicken Sie auf Löschen.

Screenshot: Bestätigungsdialogfeld für das Löschen einer Ressourcengruppe im Azure-Portal :

Häufig gestellte Fragen

Wie viel kostet diese Einrichtung?

Die Preise für die Erstellungsressourcen sind wie folgt:

  • Der App Service-Plan wird im Tarif Basic erstellt und kann hoch- oder herunterskaliert werden. Informationen dazu finden Sie unter App Service – Preise.
  • Der Cosmos DB-Server wird in einer einzelnen Region erstellt und kann auf andere Regionen verteilt werden. Weitere Informationen finden Sie unter Azure Cosmos DB-Preise.
  • Das virtuelle Netzwerk hat keine Gebühr, es sei denn, Sie konfigurieren zusätzliche Funktionen, z. B. Peering. Siehe Azure Virtual Network Preise.
  • Die private DNS-Zone verursacht eine kleine Gebühr. Siehe Azure DNS-Preise.

Wie stelle ich mit anderen Tools eine Verbindung mit dem Cosmos DB-Server her, der hinter dem virtuellen Netzwerk gesichert ist?

  • Für den einfachen Zugriff aus einem Befehlszeilen-Tool können Sie mongosh über das SSH-Terminal der App ausführen. mongosh ist im Container der App nicht enthalten, daher ist eine manuelle Installation erforderlich. Denken Sie daran, dass der installierte Client nicht über App-Neustarts hinweg beibehalten wird.
  • Um eine Verbindung über einen MongoDB-GUI-Client herzustellen, muss sich Ihr Computer innerhalb des virtuellen Netzwerks befinden. Es könnte beispielsweise eine Azure-VM sein, die mit einem der Subnetze verbunden ist, oder ein Computer in einem lokalen Netzwerk, das über eine Standort-zu-Standort-VPN-Verbindung mit dem virtuellen Azure-Netzwerk verfügt.
  • Um eine Verbindung über die Mongo-Shell auf der Cosmos DB-Verwaltungsseite im Portal herzustellen, muss sich Ihr Computer ebenfalls im virtuellen Netzwerk befinden. Stattdessen können Sie die Firewall des Cosmos DB-Servers für die IP-Adresse Ihres lokalen Computers öffnen, dadurch vergrößert sich jedoch die Angriffsfläche für Ihre Konfiguration.

Wie funktioniert die lokale App-Entwicklung mit GitHub Actions?

Nehmen Sie die automatisch generierte Workflowdatei von App Service als Beispiel; jede git push startet eine neue Build- und Bereitstellungsausführung. Aus einem lokalen Klon des GitHub-Repositorys können Sie die gewünschten Updates zu GitHub pushen. Beispiel:

git add .
git commit -m "<some-message>"
git push origin main

Warum ist die GitHub Actions-Bereitstellung so langsam?

Die automatisch generierte Workflowdatei aus App Service definiert die Zwei-Aufträge-Ausführung „Erstellen, dann bereitstellen“. Da jeder Auftrag in einer eigenen sauberen Umgebung ausgeführt wird, stellt die Workflowdatei sicher, dass der deploy-Auftrag Zugriff auf die Dateien aus dem build-Auftrag hat:

  • Laden Sie am Ende des build-Auftrags Dateien als Artefakte hoch.
  • Laden Sie am Anfang des deploy-Auftrags die Artefakte herunter.

Die meiste Zeit wird vom Zweiauftragsprozess darauf verwendet, Artefakte hoch- und herunterzuladen. Wenn Sie möchten, können Sie die Workflowdatei vereinfachen, indem Sie die beiden Aufträge in einen kombinieren, wodurch die Notwendigkeit für das Hochladen und Herunterladen entfernt wird.

Nächste Schritte