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 Azure Cosmos DB for MongoDB-Datenbank verbunden ist. Wenn Sie fertig sind, verfügen Sie über eine Express.js-App, die in Azure App Service für Linux ausgeführt wird.

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 Azure 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 Azure Cosmos DB for 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: Im Azure-Portal:

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.

Schritt 2: Füllen Sie das Formular auf der Seite Web-App und 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. Name → msdocs-expressjs-mongodb-XYZ, wobei XYZ für drei beliebige Zeichen steht. Dieser Name muss innerhalb von Azure eindeutig sein.
4. Runtimestapel → Node 16 LTS
5. Hostingplan → Basic. Wenn Sie bereit sind, können Sie später auf einen Produktionstarif hochskalieren.
6. Azure Cosmos DB for 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.

Schritt 3: Die Durchführung der 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.
• Azure Cosmos DB for 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 Azure Cosmos DB-Servers im virtuellen Netzwerk.

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 App Service-Seite im linken Menü „Konfiguration“ aus.

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. Klickan Sie auf OK.

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.

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.

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.

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

Schritt 3: Öffnen Sie im Browser in Visual Studio Code 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.

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

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.

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.

Schritt 7: Sie werden zu Ihrem 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.

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.

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.

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.

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.

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.

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

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

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

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

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.

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

Schritt 3:

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

:

Häufig gestellte Fragen

• Wie viel kostet diese Einrichtung?
• Wie stelle ich mit anderen Tools eine Verbindung mit dem Azure Cosmos DB-Server her, der hinter dem virtuellen Netzwerk gesichert ist?
• Wie funktioniert die lokale App-Entwicklung mit GitHub Actions?
• Warum ist die GitHub Actions-Bereitstellung so langsam?

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 Azure 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 Azure Cosmos DB-Server her, der hinter dem virtuellen Netzwerk gesichert ist?

• Für den einfachen Zugriff aus einem Befehlszeilentool 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 MongoDB-Shell auf der Azure Cosmos DB-Verwaltungsseite im Portal herzustellen, muss sich Ihr Computer ebenfalls im virtuellen Netzwerk befinden. Stattdessen können Sie die Firewall des Azure 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

JavaScript im Azure Developer Center

Konfigurieren der Node.js-App in App Service

 Schützen mit benutzerdefinierter Domäne und einem Zertifikat