Freigeben über

Erstellen einer MongoDB-App mit React und Azure Cosmos DB

  • Gilt für:: ✅ MongoDB

GILT FÜR: Mongodb

Von Bedeutung

Möchten Sie eine vorhandene MongoDB-Anwendung migrieren oder MongoDB Query Language (MQL)-Features verwenden? Betrachten Sie Azure DocumentDB.

Suchen Sie nach einer Datenbanklösung für hochskalige Szenarien mit einer Vereinbarung über verfügbarkeitsbasierte Servicelevels (Service Level Agreement, SLA) von 99,999% Verfügbarkeit, sofortige Automatische Skalierung und automatisches Failover über mehrere Regionen hinweg? Betrachten Sie Azure Cosmos DB für NoSQL.

Dieses mehrteilige Videotutorial veranschaulicht, wie Sie eine Heldenverfolgungs-App mit einem React-Front-End erstellen. Die App verwendet Node und Express für den Server, stellt eine Verbindung mit der Azure Cosmos DB-Datenbank her, die mit der Azure Cosmos DB-API für MongoDB konfiguriert ist, und stellt dann eine Verbindung zwischen dem React-Front-End und dem Serverteil der App her. Das Tutorial vermittelt auch, wie Sie im Azure-Portal eine Point-and-Click-Skalierung von Azure Cosmos DB durchführen und wie Sie die App im Internet bereitstellen, damit alle ihre Lieblingshelden nachverfolgen können.

Azure Cosmos DB unterstützt die Kompatibilität des Wire-Protokolls mit MongoDB, sodass Clients Azure Cosmos DB anstelle von MongoDB verwenden können.

Dieses mehrteilige Tutorial umfasst folgende Aufgaben:

  • Einleitung
  • Einrichten des Projekts
  • Erstellen der Benutzeroberfläche mit React
  • Erstellen eines Azure Cosmos DB-Kontos über das Azure-Portal
  • Herstellen einer Verbindung mit Azure Cosmos DB mithilfe von Mongoose
  • Hinzufügen von React-, Erstellungs-, Aktualisierungs- und Löschvorgängen zur App

Diese App kann auch mit Angular erstellt werden. Die Tutorialvideoreihe für Angular finden Sie hier.

Voraussetzungen

  • Node.js: v14.x oder höher (LTS empfohlen). Verifizieren Sie sie mit node --version.
  • HTTP-Testtool: Schlaflosigkeit, curlVisual Studio oder PowerShell Invoke-RestMethod. Überprüfen Sie die Verfügbarkeit, indem Sie das Tool einmal ausführen (z. B curl --version. ).

Fertiges Projekt

Die fertige Anwendung steht auf GitHub zur Verfügung.

Einleitung

In diesem Video stellt Burke Holland Azure Cosmos DB vor und führt Sie schrittweise durch die App, die in dieser Videoreihe erstellt wird.
Erfolgsüberprüfung: Sie verstehen die allgemeine App-Architektur (React UI, Node/Express API, Azure Cosmos DB für MongoDB).

Projekteinrichtung

In diesem Video erfahren Sie, wie Sie Express und React im gleichen Projekt einrichten. Anschließend folgt eine Erläuterung des im Projekt enthaltenen Codes.
Erfolgscheck: Das Projekt läuft lokal fehlerfrei mit npm start (oder dem entsprechenden Startskript).

Erstellen der Benutzeroberfläche

In diesem Video erfahren Sie, wie Sie mithilfe von React die Benutzeroberfläche der Anwendung erstellen.
Erfolgsüberprüfung: Die React-Benutzeroberfläche wird im Browser gerendert und zeigt das Herolistenlayout an.

Hinweis

Das CSS, von dem in diesem Video die Rede ist, finden Sie im GitHub-Repository „react-cosmosdb“.

Herstellen der Verbindung mit Azure Cosmos DB

In diesem Video erfahren Sie, wie Sie über das Azure-Portal ein Azure Cosmos DB-Konto erstellen, das MongoDB- und das Mongoose-Paket erstellen und dann die App mithilfe der Azure Cosmos DB-Verbindungszeichenfolge mit dem neu erstellten Konto verbinden.

Beispiel: Verbindung mit Mongoose

const mongoose = require("mongoose");

mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.on("connected", () => {
  console.log("Connected to Azure Cosmos DB for MongoDB");
});

Überprüfung: Starten Sie die App und stellen Sie sicher, dass die KonsolenConnected to Azure Cosmos DB for MongoDB protokolliert.

Lesen und Erstellen von Helden in der App

Dieses Video zeigt, wie Sie Heroes in der Azure Cosmos DB-Datenbank lesen und erstellen können und wie Sie diese Methoden mit einem HTTP-Testprogramm und der React UI testen können.
Erfolgsüberprüfung: Das Erstellen eines Heros gibt HTTP 201 (oder 200) zurück, und der neue Hero wird in der UI-Liste angezeigt.

Löschen und Aktualisieren von Helden in der App

In diesem Video erfahren Sie, wie Sie Helden über die App löschen und aktualisieren und wie Sie die Aktualisierungen auf der Benutzeroberfläche anzeigen.
Erfolgsüberprüfung: Aktualisierungen und Löschungen werden sofort in der Benutzeroberfläche widergespiegelt und in der Datenbank gespeichert.

Vervollständigen der App

In diesem Video erfahren Sie, wie Sie die App vervollständigen und die Integration der Benutzeroberfläche in die Back-End-API abschließen.
Erfolgsüberprüfung: Der vollständige Workflow zum Erstellen, Lesen, Aktualisieren und Löschen funktioniert Ende zu Ende.

Bereinigen von Ressourcen

Wenn Sie diese App nicht weiterhin verwenden, löschen Sie mit den folgenden Schritten im Azure-Portal sämtliche Ressourcen, die mit diesem Tutorial erstellt wurden.

  1. Klicken Sie im Azure-Portal im Menü auf der linken Seite auf Ressourcengruppen, und klicken Sie auf den Namen der erstellten Ressource.
  2. Klicken Sie auf der Seite mit Ihrer Ressourcengruppe auf Löschen, geben Sie im Textfeld den Namen der zu löschenden Ressource ein, und klicken Sie dann auf Löschen.

Nächste Schritte

In diesem Tutorial wurde Folgendes vermittelt:

  • Erstellen einer App mit React, Node, Express und Azure Cosmos DB
  • Erstellen eines Azure Cosmos DB-Kontos
  • Verbinden der App mit dem Azure Cosmos DB-Konto
  • Testen der App mit einem HTTP-Testprogramm
  • Ausführen der Anwendung und Hinzufügen von Helden zur Datenbank

Im nächsten Tutorial erfahren Sie, wie Sie MongoDB-Daten in Azure Cosmos DB importieren.

Importieren von MongoDB-Daten in Azure Cosmos DB

Versuchen Sie, eine Kapazitätsplanung für eine Migration auf Azure Cosmos DB vorzunehmen? Sie können Informationen zu Ihrem vorhandenen Datenbankcluster für die Kapazitätsplanung verwenden.

  • Last updated on