Vercel-Integration mit Azure Cosmos DB

2024-08-15

GILT FÜR: NoSQL MongoDB

Vercel bietet eine benutzerfreundliche und stabile Plattform für die Entwicklung und Bereitstellung von Webanwendungen. Diese neue Integration verbessert die Produktivität, da Entwickler jetzt einfach Vercel-Anwendungen mithilfe einer bereits konfigurierten Back-End-Datenbank erstellen können. Diese Integration hilft Entwicklern, ihre kreativen Ideen in Echtzeit in die Realität umzusetzen.

Erste Schritte bei der Integration von Azure Cosmos DB mit Vercel

Diese Dokumentation richtet sich an Entwickler, die die stabilen Funktionen von Azure Cosmos DB – einem global verteilten Datenbankdienst mit mehreren Modellen – mit der leistungsstarken Bereitstellungs- und Hostinglösung von Vercel kombinieren möchten.

Diese Integration erlaubt es Entwicklern, die Vorteile einer vielseitigen und leistungsstarken NoSQL-Datenbank und gleichzeitig die serverlose Architektur- und Entwicklungsplattform von Vercel zu nutzen.

Es gibt zwei Möglichkeiten, Cosmos DB zu integrieren.

Über den Vercel Integrations Marketplace
Über die Befehlszeile

Integrieren von Cosmos DB mit Vercel über den Integration Marketplace

Verwenden Sie diesen Leitfaden, wenn Sie die Vercel-Projekte bereits identifiziert haben oder ein vorhandenes Vercel-Projekt integrieren möchten.

Voraussetzungen

Vercel-Konto mit Vercel Project: So erstellen Sie ein neues Vercel-Projekt
Azure Cosmos DB – Schnellstart: Erstellen eines Azure Cosmos DB-Kontos oder Erstellen eines kostenlosen Cosmos DB-Testkontos
Grundlegende Kenntnisse zu Next.js, React und TypeScript

Schritte zum Integrieren von Azure Cosmos DB in Vercel

Wählen Sie Vercel-Projekte für die Integration in Azure Cosmos DB aus. Nachdem Sie die Voraussetzungen erfüllt haben, besuchen Sie die Cosmos DB-Integrationsseite auf dem Vercel Marketplace, und wählen Sie „Integration hinzufügen“ aus.
Wählen Sie „Alle Projekte“ oder „Spezifische Projekte“ für die Integration aus. In diesem Leitfaden fahren wir fort, indem wir bestimmte Projekte auswählen. Klicken Sie auf Installieren, um den Vorgang fortzusetzen.
Melden Sie sich bei Ihrem vorhandenen Microsoft-Konto an, oder erstellen Sie ein neues Konto, wie im nächsten Schritt gezeigt.
Klicken Sie auf „Konto erstellen“, um ein neues Microsoft-Konto zu erstellen.

Hinweis

Ein Microsoft-Konto ist kein Azure Cosmos DB-Konto. Wir werden in den folgenden Schritten ein Azure Cosmos DB-Konto erstellen

Wenn Sie ein bestehendes Azure Cosmos DB-Konto verwenden möchten, wählen Sie das vorhandene Verzeichnis, Abonnement und das Azure Cosmos DB-Konto aus (Weiter mit Schritt 9). Um ein neues Azure Cosmos DB-Testkonto zu erstellen, klicken Sie auf „Neues Konto erstellen“.
Wählen Sie den API-Typ aus (derzeit werden nur NOSQL und MongoDB-API unterstützt), und klicken Sie auf „Konto erstellen“.
Klicken Sie nach der erfolgreichen Erstellung des Azure Cosmos DB-Testkontos auf „Weiter“.

Klicken Sie im Popup auf „Akzeptieren“, um auf das Azure Cosmos DB-Testkonto zuzugreifen. (Obligatorisch für den Abschluss der Integration).
Wählen Sie „Integrieren“ aus, und Sie sind fertig.

Integrieren von Cosmos DB in Vercel über npm und die Befehlszeile

Führen Sie „create-next-app“ mit npm, yarn oder pnpm aus, um das Beispiel zu bootstrappen:

npx create-next-app --example with-azure-cosmos with-azure-cosmos-app

yarn create next-app --example with-azure-cosmos with-azure-cosmos-app

pnpm create next-app --example with-azure-cosmos with-azure-cosmos-app

Ändern Sie „pages/index.tsx“, um Ihren Code hinzuzufügen.

Nehmen Sie Änderungen an „pages/index.tsx“ entsprechend Ihrer Anforderungen vor. Sie können den Code unter lib/cosmosdb.ts überprüfen, um zu sehen, wie der JavaScript-Client @azure/cosmos initialisiert wird.
Pushen Sie die Änderungen in ein GitHub-Repository.

Einrichten von Umgebungsvariablen

COSMOSDB_CONNECTION_STRING: Sie benötigen Ihre Cosmos DB-Verbindungszeichenfolge. Diese finden Sie im Azure-Portal im Abschnitt „Schlüssel“.
COSMOSDB_DATABASE_NAME: Name der Datenbank, die Sie verwenden möchten. Dieser sollte bereits im Azure Cosmos DB-Konto vorhanden sein.
COSMOSDB_CONTAINER_NAME: Name des Containers, den Sie verwenden möchten. Dieser sollte bereits in der vorherigen Datenbank vorhanden sein.

Integrieren von Cosmos DB in Vercel mithilfe der Marketplace-Vorlage

Es gibt Azure Cosmos DB-Next.js Starter, eine hervorragende gebrauchsfertige Vorlage mit geführter Struktur und Konfiguration, die Ihnen Zeit und Aufwand beim Einrichten der anfänglichen Projekteinrichtung spart. Klicken Sie auf „Bereitstellen“ für die Bereitstellung auf Vercel und auf „Repository anzeigen“, um den Quellcode anzuzeigen.

Wählen Sie das GitHub-Repository aus, in dem Sie das Starter-Repository klonen möchten.
Wählen Sie die Integration aus, um Cosmos DB-Verbindungsschlüssel einzurichten. Diese Schritte wurden im vorherigen Abschnitt ausführlich beschrieben.
Legen Sie die Umgebungsvariablen für den Datenbank- und Containernamen fest, und wählen Sie zum Schluss „Bereitstellen“ aus.
Nach erfolgreichem Abschluss enthält die Abschlussseite den Link zur bereitgestellten App. Alternativ können Sie zum Dashboard des Vercel-Projekts wechseln, um den Link Ihrer App abzurufen. Jetzt wurde Ihre App erfolgreich in Vercel bereitgestellt.