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

  • Artikel
  • 26 Minuten Lesedauer

In diesem Tutorial stellen Sie eine Express.js-Beispiel-App in Azure bereit, indem Sie eine MongoDB-Datenbank verwenden. Die Express.js-App wird im Azure App Service-Dienst gehostet, der das Hosten von Node.js-Apps sowohl für Linux- (Node-Versionen 12, 14 und 16) als auch für Windows-Serverumgebungen (Versionen 12 und 14) unterstützt. Die MongoDB-Datenbank wird in Azure Cosmos DB gehostet, einer cloudnativen Datenbank mit einer API, die zu 100 % mit MongoDB kompatibel ist.

A diagram showing how the Express.js app will be deployed to Azure App Service and the MongoDB data will be hosted inside of 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

Gehen Sie wie unten beschrieben vor, um die Anwendung lokal auszuführen:

  • 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 Azure App Service

Azure App Service wird zum Hosten der Express.js-Web-App verwendet. Geben Sie beim Einrichten von App Service für die Anwendung 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 Runtime für die App. Hier wählen Sie die Version von Node aus, die für Ihre App verwendet werden soll.
  • Der App Service-Plan, der die für die Anwendung verfügbaren Computeressourcen (CPU, Arbeitsspeicher) definiert.
  • 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.

Azure-Ressourcen können über das Azure-Portal, mithilfe von VS Code unter Verwendung des Azure-Tools-Erweiterungspakets oder über die Azure CLI erstellt werden.

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

Anweisungen Screenshot
Führen Sie im Azure-Portal die folgenden Schritte aus:
  1. Geben Sie in der Suchleiste oben im Azure-Portal „App Services“ ein.
  2. Wählen Sie im Menü, das unter der Suchleiste angezeigt wird, unter der Rubrik Dienste die Option App Services aus.
 A screenshot showing how to use the search box in the top tool bar to find App Services in Azure.
Wählen Sie auf der Seite App Services die Option + Erstellen aus. A screenshot showing the create button on the App Services page used to create a new web app.
Füllen Sie auf der Seite Web-App erstellen das Formular wie folgt aus.
  1. Ressourcengruppe → Wählen Sie die Option Neu erstellen aus, und verwenden Sie einen Namen wie msdocs-expressjs-mongodb-tutorial.
  2. Name → msdocs-expressjs-mongodb-XYZ, wobei XYZ für drei beliebige Zeichen steht. Dieser Name muss innerhalb von Azure eindeutig sein.
  3. Veröffentlichen → Code.
  4. Runtimestapel → Node 14 LTS.
  5. Betriebssystem → Linux.
  6. Region → Eine beliebige Azure-Region in Ihrer Nähe.
  7. Linux-Plan → Wählen Sie Neu erstellen aus, und verwenden Sie den Namen msdocs-expressjs-mongodb-plan.
  8. SKU und Größe → Wählen Sie Größe ändern aus, um einen anderen App Service-Plan auszuwählen.
 A screenshot showing the form to fill out to create a web app in Azure.
Der App Service-Plan steuert, wie viele Ressourcen (CPU/Arbeitsspeicher) Ihrer App zur Verfügung stehen und wie hoch die Kosten für diese Ressourcen sind. Weitere Informationen zur Auswahl eines App Service-Plans finden Sie im Artikel App Service-Plan – Übersicht. Eine vollständige Liste der App Service-Pläne finden Sie auf der Seite App Service – Preise.

Für dieses Beispiel wählen Sie oben auf dem Bildschirm Dev/Test und dann den Plan B1 (Basic) aus. Der „B1 Basic“-Plan belastet Ihr Azure-Konto mit einer geringen Gebühr, bietet aber eine bessere Leistung als der Plan „F1 (Free)“.

Wenn Sie fertig sind, wählen Sie Übernehmen aus, um Ihre Änderungen zu übernehmen.		 A screenshot of the Spec Picker dialog that lets you select the App Service plan to use for your web app.
Wählen Sie auf der Hauptseite Web-App erstellen die Schaltfläche *Überprüfen und erstellen am unteren Rand des Bildschirms aus.

Dadurch gelangen Sie auf die Seite Überprüfung. Wählen Sie Erstellen aus, um Ihre App Service-Instanz zu erstellen.		 A screenshot of the main web app create page showing the button to select on to create your web app in Azure.

2. Erstellen einer Azure Cosmos DB-Instanz im MongoDB-Kompatibilitätsmodus

Azure Cosmos DB ist eine vollständig verwaltete NoSQL-Datenbank für die moderne App-Entwicklung. Zu den Features gehört eine vollständig mit MongoDB kompatible API, die es Ihnen ermöglicht, Ihre bereits vorhandenen MongoDB-Tools, -Pakete und -Anwendungen mit Cosmos DB zu verwenden.

Sie müssen sich beim Azure-Portal anmelden, um diese Schritte zum Erstellen einer Cosmos DB-Instanz ausführen zu können.

Anweisungen Screenshot
Führen Sie im Azure-Portal die folgenden Schritte aus:

  1. Geben Sie oben im Azure-Portal auf der Suchleiste den Suchbegriff „Cosmos DB“ ein.

  2. Wählen Sie im Menü, das unterhalb der Suchleiste angezeigt wird, unter Dienste das Element mit der Bezeichnung Azure Cosmos DB aus.

 A screenshot showing how to use the search box in the top tool bar to find Cosmos DB in Azure.
Wählen Sie auf der Seite Azure Cosmos DB die Option +Erstellen aus. A screenshot showing the create button on the Cosmos DB page used to create a database.
Es wird eine Seite angezeigt, auf der Sie aufgefordert werden, eine API-Option für Ihre Cosmos DB-Datenbank auszuwählen. Wählen Sie Azure Cosmos DB-API für MongoDB aus. A screenshot showing the page where you select the MongoDB API for your Cosmos DB.
Füllen Sie auf der Seite Azure Cosmos DB-Konto erstellen das Formular wie folgt aus.

  1. Wählen Sie für die Ressourcengruppe dieselbe Ressourcengruppe aus der Dropdownliste aus, die Sie für Ihre Web-App in App Service verwendet haben (msdocs-expressjs-mongodb-quickstart). Dadurch werden alle Komponenten, die für diese Anwendung benötigt werden, logisch in derselben Ressourcengruppe gruppiert, um die Erkennbarkeit und Verwaltung zu vereinfachen.

  2. Geben Sie den Kontonamenmsdocs-expressjs-mongodb-database-XYZ für den Namen der Azure Cosmos DB-Instanz ein, wobei XYZ für drei beliebige eindeutige Zeichen steht. Cosmos DB-Kontonamen müssen in Azure eindeutig sein. Der Name muss zwischen 3 und 44 Zeichen lang sein und darf nur Kleinbuchstaben, Zahlen und das Bindestrichsymbol (-) enthalten.

  3. Wählen Sie für den Standort denselben Azure-Standort aus, den Sie für Ihre App Service-Web-App verwendet haben. Es ist wichtig, Ihre Anwendung und Datenbank am gleichen Azure-Standort zu hosten, um die Netzwerkwartezeit zwischen verschiedenen Komponenten der Lösung zu minimieren.

  4. Wenn der Rabatt im Free-Tarif für Ihr Konto verfügbar ist, können Sie ihn anwenden.

  5. Wählen Sie Überprüfen und erstellen aus, um zur Bestätigungsseite zu wechseln, und klicken Sie dann auf Erstellen, um Ihre Datenbank zu erstellen.

Das Erstellen einer neuen Azure CosmosDB-Datenbank dauert in der Regel etwa fünf Minuten.		 A screenshot showing how to fill out the page to create a new Cosmos DB.

3. Verbinden Ihrer App Service-Instanz mit Ihrer Cosmos DB-Datenbank

Um eine Verbindung mit Ihrer Cosmos DB-Datenbank herzustellen, müssen Sie Ihrer Anwendung die Verbindungszeichenfolge für die Datenbank zur Verfügung stellen. Dies erfolgt in der Beispielanwendung durch Lesen der Umgebungsvariablen DATABASE_URL. Bei lokaler Ausführung verwendet die Beispielanwendung das dotenv-Paket, um den Wert der Verbindungszeichenfolge aus der Datei .env zu lesen.

Bei Ausführung in Azure können Konfigurationswerte wie Verbindungszeichenfolgen in den Anwendungseinstellungen der App Service-Instanz gespeichert werden, die die Web-App hostet. Diese Werte werden Ihrer Anwendung dann während der Laufzeit als Umgebungsvariablen zur Verfügung gestellt. Dadurch wird die Verbindungszeichenfolge aus process.env von der Anwendung auf die gleiche Weise verwendet – unabhängig davon, ob sie lokal oder in Azure ausgeführt wird. Außerdem entfällt dadurch die Notwendigkeit, umgebungsspezifische Konfigurationsdateien mit Ihrer Anwendung zu verwalten und bereitzustellen.

Anweisungen Screenshot
Navigieren Sie zu Ihrem Cosmos DB-Konto. Wenn Sie Ihr Cosmos DB-Konto gerade erstellt haben, können Sie die Schaltfläche Zu Ressource wechseln wählen, um direkt zum Konto zu gelangen. Sie können auch das Suchfeld am oberen Rand des Bildschirms verwenden, um nach Ihrer Cosmos DB-Datenbank zu suchen und zu ihr zu navigieren.
  1. Vergewissern Sie sich auf der Seite für Ihre Cosmos DB-Datenbank, dass der Punkt „Schnellstart“ im linken Menü ausgewählt ist. Es wird ein Textfeld mit der Bezeichnung Primäre Verbindungszeichenfolge angezeigt. Es gibt zwar Registerkarten für verschiedene Sprachen, aber die Zeichenfolge ist unabhängig von der Sprache dieselbe.
  2. Kopieren Sie den Wert der Verbindungszeichenfolge in den Zwischenablagepuffer.
 A screenshot showing the location of the Cosmos DB connection string on the Cosmos DB quick start page.
Navigieren Sie zurück zu Ihrer App Service-Instanz, um die Verbindungszeichenfolge für Ihre Web-App festzulegen.

  1. Geben Sie im Suchfeld oben auf dem Bildschirm den Namen Ihrer App Service-Instanz (msdocs-expressjs-mongodb-XYZ) ein.
  2. Wählen Sie Ihre App Service-Instanz aus, wenn sie unter dem Abschnitt Ressourcen des Dialogfelds angezeigt wird, um zur App Service-Instanz zu wechseln.
 A screenshot showing how to search for and go to the App Service, where the connection string needs to store the connection string.
Auf der Seite für die App Service-Instanz:
  1. Wählen Sie unter Einstellungen die Option Konfiguration aus.
  2. Wählen Sie im Abschnitt Anwendungseinstellungen (nicht im Abschnitt „Verbindungszeichenfolgen“) das Menüelement + Neue Anwendungseinstellung aus, um eine Einstellung hinzuzufügen.
 A screenshot showing how to use the Application settings within an App Service.
Legen Sie im Dialogfeld Anwendungseinstellung hinzufügen/bearbeiten den Namen der Einstellung auf DATABASE_URL fest, damit er mit dem im Anwendungscode verwendeten Namen übereinstimmt. Fügen Sie dann den Wert der Verbindungszeichenfolge für Ihre Datenbank in das Feld Wert ein. Wählen Sie OK aus, um diese Einstellung zu speichern. A screenshot showing the dialog used to set an application setting in Azure App Service.

4. Bereitstellen des Anwendungscodes in Azure

Azure App Service unterstützt mehrere Methoden zum Bereitstellen Ihres Anwendungscodes in Azure, einschließlich der Unterstützung für GitHub Actions und alle wichtigen CI/CD-Tools. In diesem Artikel geht es hauptsächlich darum, wie Sie Code von Ihrer lokalen Arbeitsstation in Azure bereitstellen.

Für die Bereitstellung Ihres Anwendungscodes direkt aus VS Code müssen Sie das Paket mit der Azure-Tools-Erweiterung installiert haben und über VS Code bei Azure angemeldet sein.

Download: Paket mit Azure-Tools-Erweiterung

Anweisungen Screenshot
Suchen Sie das Azure-Symbol in der linken Symbolleiste und wählen Sie es aus, um die Erweiterung „Azure-Tools für VS Code“ aufzurufen. A screenshot showing the location of the Azure Tool icon in Visual Studio Code.
Suchen Sie den Abschnitt App Service in der Azure-Tools-Erweiterung, und suchen Sie dann Ihre Web-App unter dem richtigen Abonnement. Klicken Sie mit der rechten Maustaste auf die Web-App, und wählen Sie dann im Menü In Web-App bereitstellen... aus. A screenshot showing how you deploy an application to Azure by right-clicking on a web app in VS Code and selecting deploy from the context menu.
Am oberen Rand des Fensters wird ein Dialogfeld angezeigt, in dem Sie das Verzeichnis auswählen können, über das die Bereitstellung erfolgen soll. Wählen Sie das Stammverzeichnis aus, in dem sich der Quellcode für Ihre Anwendung befindet.

In einem Dialogfeld werden Sie aufgefordert, Buildbefehle auf dem Zielserver auszuführen. Wenn Sie diese Frage mit „Ja“ beantworten, wird die Leistung für zukünftige Bereitstellungen verbessert.		 A screenshot showing the dialog box used to select the deployment directory in VS Code.
In der unteren rechten Ecke von VS Code wird eine Benachrichtigung angezeigt, um Sie über die laufende Bereitstellung zu informieren. Wenn die Bereitstellung abgeschlossen ist, wird diese Benachrichtigung durch ein Dialogfeld ersetzt, in dem Sie zur Website navigieren können. A screenshot showing the Output window of VS Code while deploying an application to Azure.

5. Navigieren zur Anwendung

Die Anwendung hat eine URL im Format https://<app name>.azurewebsites.net. Navigieren Sie zu dieser URL, um die Anwendung anzuzeigen.

Verwenden Sie die Formularelemente in der Anwendung, um Aufgaben hinzuzufügen und abzuschließen.

A screenshot showing the application running in a browser.

6. Konfigurieren und Anzeigen von Anwendungsprotokollen

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.');
    });
});

Der Inhalt der App Service-Diagnoseprotokolle kann über das Azure-Portal, in VS Code oder mithilfe der Azure-Befehlszeilenschnittstelle angezeigt werden.

Anweisungen Screenshot
Als Erstes müssen Sie das Streamen von Protokollen in Azure App Service aktivieren. Navigieren Sie zur Seite für die App Service-Instanz im Azure-Portal.

  1. Wählen Sie im Menü auf der linken Seite unter der Überschrift Überwachung die Option App Service-Protokolle aus.
  2. Ändern Sie die Eigenschaft Application Logging von Aus in „Dateisystem“.
  3. Geben Sie für die Protokolle einen Aufbewahrungszeitraum von 30 Tagen ein.
  4. Wählen Sie Speichern, um Ihre Änderungen zu speichern.
 A screenshot showing the location of the Azure Tool icon in Visual Studio Code.
Wählen Sie im Menü im Abschnitt „Überwachung“ das Element Protokolldatenstrom aus. Aktualisieren Sie die Homepage in der App, oder versuchen Sie mit anderen Anforderungen, einige Protokollmeldungen zu generieren.

In der Ausgabe werden alle von Ihrer App generierten Protokollmeldungen und alle vom Dienst generierten Nachrichten angezeigt.		 A screenshot showing how you deploy an application to Azure by right-clicking on a web app in VS Code and selecting deploy from the context menu.

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

Besuchen Sie eine der folgenden URLs, um auf Kudu zuzugreifen. Sie müssen sich mit Ihren Azure-Anmeldeinformationen bei der Kudu-Website anmelden.

  • Für Apps, die in den App Service-Plänen „Free“, „Shared“, „Basic“, „Standard“ und „Premium“ bereitgestellt werden: https://<app-name>.scm.azurewebsites.net
  • Für Apps, die in Dienstplänen vom Typ „App Service (isoliert)“ bereitgestellt werden: https://<app-name>.scm.<ase-name>.p.azurewebsites.net

Auf der Hauptseite in Kudu können Sie auf Informationen zur Anwendungshostingumgebung, zu App-Einstellungen und Bereitstellungen zugreifen und die Dateien im wwwroot-Verzeichnis durchsuchen.

A screenshot of the main page in the Kudu SCM app showing the different information available about the hosting environment.

Wenn Sie unter dem REST-API-Header auf den Link Deployments (Bereitstellungen) klicken, wird der Verlauf der Bereitstellungen Ihrer Web-App angezeigt.

A screenshot of the deployments JSON in the Kudu SCM app showing the history of deployments to this web app.

Wenn Sie unter der Überschrift „Browse Directory“ (Verzeichnis durchsuchen) den Link Site wwwroot auswählen, können Sie die Dateien auf dem Webserver durchsuchen und anzeigen.

A screenshot of files in the wwwroot directory showing how Kudu lets you to see what has been deployed to Azure.

Bereinigen von Ressourcen

Wenn Sie fertig sind, können Sie alle Ressourcen aus Azure löschen, indem Sie die Ressourcengruppe für die Anwendung löschen.

Führen Sie zum Löschen einer Ressourcengruppe die folgenden Schritte aus, während Sie beim Azure-Portal angemeldet sind:

Anweisungen Screenshot
Navigieren Sie im Azure-Portal zur Ressourcengruppe.
  1. Geben Sie den Namen Ihrer Ressourcengruppe auf der Suchleiste oben auf der Seite ein.
  2. Wählen Sie unter der Überschrift Ressourcengruppen im nachfolgenden Dialogfeld den Namen der Ressourcengruppe aus, um zu dieser zu navigieren.
 A screenshot showing how to search for and go to a resource group in the Azure portal.
Wählen Sie oben auf der Seite die Schaltfläche Ressourcengruppe löschen aus. A screenshot showing the location of the Delete Resource Group button in the Azure portal.
Geben Sie im Bestätigungsdialogfeld den Namen der Ressourcengruppe ein, um den Löschvorgang zu bestätigen. Wählen Sie unten auf der Seite die Schaltfläche Löschen aus, um die Ressourcengruppe zu löschen. A screenshot of the confirmation dialog for deleting a resource group in the Azure portal.

Nächste Schritte

JavaScript im Azure Developer Center

Konfigurieren der Node.js-App in App Service