Zugreifen auf Daten in Azure Cosmos DB per Mongoose mit Azure Static Web Apps

  • Artikel

Mongoose ist der gängigste ODM-Client (Object Document Mapping) für Node.js. Mongoose ermöglicht Ihnen das Entwerfen einer Datenstruktur sowie das Erzwingen einer Überprüfung und stellt alle erforderlichen Tools für die Interaktion mit Datenbanken bereit, die die MongoDB-API unterstützen. Cosmos DB unterstützt die benötigten MongoDB-APIs und ist als Back-End-Serveroption in Azure verfügbar.

Voraussetzungen

  • Ein Azure-Konto. Falls Sie noch nicht über ein Azure-Abonnement verfügen, können Sie ein kostenloses Testkonto erstellen.
  • Ein GitHub-Konto.
  • Ein serverloses Cosmos DB-Konto. Bei einem serverlosen Konto bezahlen Sie nur für Ressourcen, wenn diese auch genutzt werden. Zudem vermeiden Sie die Erstellung einer vollständigen Infrastruktur.

1. Erstellen einer serverlosen Cosmos DB-Datenbank

Führen Sie die folgenden Schritte aus, um eine serverlose Cosmos-DB zu erstellen.

  1. Melden Sie sich beim Azure-Portal an.
  2. Wählen Sie Ressource erstellen.
  3. Geben Sie Azure Cosmos DB in das Suchfeld ein.
  4. Wählen Sie Azure Cosmos DB aus.
  5. Klicken Sie auf Erstellen.
  6. Wählen Sie bei entsprechender Aufforderung unter Azure Cosmos DB-API für MongoDB die Option Erstellen aus.
  7. Konfigurieren Sie Ihr Azure Cosmos DB-Konto mit den folgenden Informationen:
    • Abonnement: Wählen Sie das gewünschte Abonnement aus.
    • Ressource: Wählen Sie Neu erstellen aus, und legen Sie den Namen auf aswa-mongoose fest.
    • Kontoname: Der Name muss ein eindeutiger Wert sein.
    • Standort: USA, Westen 2
    • Kapazitätsmodus: Serverlos (Vorschau)
    • Version: 4.0Screenshot eines Formulars zum Erstellen einer neuen Cosmos DB-Instanz.
  8. Klicken Sie auf Überprüfen und erstellen.
  9. Klicken Sie auf Erstellen.

Der Erstellungsprozess dauert ein paar Minuten. Wir werden zur Datenbank zurückkehren, um die Verbindungszeichenfolge zu erfassen, nachdem wir eine statische Web-App erstellt haben.

2. Erstellen einer statischen Web-App

In diesem Tutorial wird als Hilfestellung für die Erstellung Ihrer Anwendung ein Repository mit GitHub-Vorlagen verwendet.

  1. Wechseln Sie zur Starter-Vorlage.

  2. Wählen Sie den Besitzer aus (falls Sie eine andere Organisation als die Ihres Hauptkontos verwenden).

  3. Geben Sie Ihrem Repository den Namen aswa-mongoose-tutorial.

  4. Wählen Sie Create repository from template (Repository aus Vorlage erstellen) aus.

  5. Kehren Sie zum Azure-Portal zurück.

  6. Wählen Sie Ressource erstellen.

  7. Geben Sie static web app (statische Web-App) in das Suchfeld ein.

  8. Wählen Sie Static Web Apps aus.

  9. Klicken Sie auf Erstellen.

  10. Konfigurieren Sie Ihre Azure Static Web Apps-Instanz mit den folgenden Informationen:

    • Abonnement: Wählen Sie dasselbe Abonnement wie oben aus.
    • Ressourcengruppe: Wählen Sie aswa-mongoose aus.
    • Name: aswa-mongoose-tutorial
    • Region: USA, Westen 2
    • Wählen Sie Mit GitHub anmelden aus.
    • Wählen Sie in der angezeigten Aufforderung Autorisieren aus, um für Azure Static Web Apps die Erstellung der GitHub-Aktion für die Bereitstellung zuzulassen.
    • Organisation: Ihr GitHub-Kontoname
    • Repository: aswa-mongoose-tutorial
    • Branch: main
    • Buildvoreinstellungen: Wählen Sie React aus.
    • App-Speicherort: /
    • API-Speicherort: api
    • Ausgabespeicherort: BuildAusgefülltes Azure Static Web Apps-Formular

  11. Klicken Sie auf Überprüfen und erstellen.

  12. Klicken Sie auf Erstellen.

  13. Der Erstellungsvorgang dauert einen Moment. Sie können Zu Ressource wechseln auswählen, nachdem die statische Web-App bereitgestellt wurde.

3. Konfigurieren der Datenbankverbindungszeichenfolge

Damit die Web-App mit der Datenbank kommunizieren kann, wird die Datenbankverbindungszeichenfolge als Anwendungseinstellung gespeichert. Sie können das Objekt process.env nutzen, um in Node.js auf die Einstellungswerte zuzugreifen.

  1. Wählen Sie oben links im Azure-Portal Startseite aus (oder wechseln Sie zurück zu https://portal.azure.com).
  2. Klicken Sie auf Ressourcengruppen.
  3. Wählen Sie aswa-mongoose aus.
  4. Wählen Sie den Namen Ihres Datenbankkontos aus. Der Typ des Kontos lautet Azure Cosmos DB-API für Mongo DB.
  5. Wählen Sie unter Einstellungen die Option Verbindungszeichenfolge aus.
  6. Kopieren Sie die Verbindungszeichenfolge, die unter PRIMÄRE VERBINDUNGSZEICHENFOLGE angegeben ist.
  7. Wählen Sie in der Brotkrümelnavigation aswa-mongoose aus.
  8. Wählen Sie aswa-mongoose-tutorial aus, um zur Websiteinstanz zurückzukehren.
  9. Wählen Sie unter Einstellungen die Option Konfiguration.
  10. Wählen Sie Hinzufügen, aus, und erstellen Sie eine neue Anwendungseinstellung mit den folgenden Werten:
    • Name: AZURE_COSMOS_CONNECTION_STRING
    • Wert: <Fügen Sie die weiter oben kopierte Verbindungszeichenfolge ein.>
  11. Klicken Sie auf OK.
  12. Wählen Sie Hinzufügen aus, und erstellen Sie eine neue Anwendungseinstellung mit den folgenden Werten für den Namen der Datenbank:
    • Name: AZURE_COSMOS_DATABASE_NAME
    • Wert: todo
  13. Klicken Sie auf OK.
  14. Wählen Sie Speichern aus.

4. Wechseln zu Ihrer Website

Sie können die statische Web-App jetzt erkunden.

  1. Wählen Sie im Azure-Portal Übersicht aus.
  2. Wählen Sie die oben rechts angezeigte URL aus.
    1. Sie sieht etwa so aus: https://calm-pond-05fcdb.azurestaticapps.net.
  3. Wählen Sie Melden Sie sich an, um Ihre Aufgabenliste anzuzeigen aus.
  4. Wählen Sie Einwilligung erteilen aus, um auf die Anwendung zuzugreifen.
  5. Erstellen sie eine neue Liste, indem Sie einen Namen in das Textfeld mit der Bezeichnung Neue Liste erstellen eingeben und Speichern auswählen.
  6. Erstellen sie eine neue Aufgabe, indem Sie einen Titel in das Textfeld mit der Bezeichnung Neues Element erstellen eingeben und Speichern auswählen.
  7. Vergewissern Sie sich, dass die Aufgabe angezeigt wird (dies kann einen Moment dauern).
  8. Markieren Sie die Aufgabe als erledigt, indem Sie das Häkchen auswählen. Die Aufgabe wird dann in den Abschnitt Erledigte Elemente der Seite verschoben.
  9. Aktualisieren Sie die Seite, um sich zu vergewissern, dass eine Datenbank verwendet wird.

Bereinigen von Ressourcen

Falls Sie diese Anwendung nicht mehr benötigen, löschen Sie die Ressourcengruppe wie folgt:

  1. Kehren Sie zum Azure-Portal zurück.
  2. Klicken Sie auf Ressourcengruppen.
  3. Wählen Sie aswa-mongoose aus.
  4. Wählen Sie die Option Ressourcengruppe löschen.
  5. Geben Sie aswa-mongoose in das Textfeld ein.
  6. Klicken Sie auf Löschen.

Nächste Schritte

Im nächsten Artikel erfahren Sie, wie Sie die lokale Entwicklung konfigurieren.

Einrichten der lokalen Entwicklung