Datenbank einrichten

Bevor Sie mit Ihrem Dashboard fortfahren können, benötigen Sie einige Daten. In diesem Kapitel richten Sie eine PostgreSQL-Datenbank über eine der Vercel-Marketplace-Integrationen ein. Falls Sie bereits mit PostgreSQL vertraut sind und Ihren eigenen Datenbankanbieter nutzen möchten, können Sie dieses Kapitel überspringen und die Datenbank selbst einrichten. Ansonsten lassen Sie uns fortfahren!

GitHub-Repository erstellen

Zunächst sollten Sie Ihr Repository auf GitHub pushen, falls Sie dies noch nicht getan haben. Dies erleichtert die Einrichtung Ihrer Datenbank und das Deployment.

Falls Sie Hilfe bei der Repository-Einrichtung benötigen, werfen Sie einen Blick auf diese GitHub-Anleitung.

Gut zu wissen:

• Sie können auch andere Git-Anbieter wie GitLab oder Bitbucket verwenden.
• Falls Sie neu bei GitHub sind, empfehlen wir die GitHub Desktop App für einen vereinfachten Entwicklungs-Workflow.

Vercel-Konto erstellen

Besuchen Sie vercel.com/signup, um ein Konto zu erstellen. Wählen Sie den kostenlosen "Hobby"-Plan. Klicken Sie auf Mit GitHub fortfahren, um Ihre GitHub- und Vercel-Konten zu verbinden.

Projekt verbinden und deployen

Als Nächstes gelangen Sie zu diesem Bildschirm, wo Sie das soeben erstellte GitHub-Repository auswählen und importieren können:

Benennen Sie Ihr Projekt und klicken Sie auf Deploy.

Hurra! 🎉 Ihr Projekt ist nun deployed.

Durch die Verbindung Ihres GitHub-Repositorys wird Vercel bei jedem Push in den main-Branch Ihre Anwendung automatisch ohne zusätzliche Konfiguration neu deployen. Bei Pull Requests erhalten Sie außerdem sofortige Preview-URLs, die es Ihnen ermöglichen, Deployment-Fehler frühzeitig zu erkennen und eine Vorschau Ihres Projekts mit Teammitgliedern zu teilen.

Postgres-Datenbank erstellen

Um eine Datenbank einzurichten, klicken Sie auf Continue to Dashboard und wählen Sie den Tab Storage in Ihrem Projekt-Dashboard. Wählen Sie Create Database. Je nachdem, wann Ihr Vercel-Konto erstellt wurde, sehen Sie möglicherweise Optionen wie Neon oder Supabase. Wählen Sie Ihren bevorzugten Anbieter und klicken Sie auf Continue.

Wählen Sie Ihre Region und ggf. Ihren Storage-Plan. Die Standard-Region für alle Vercel-Projekte ist Washington D.C (iad1), und wir empfehlen diese zu wählen, falls verfügbar, um die Latenz für Datenanfragen zu reduzieren.

Nach der Verbindung navigieren Sie zum Tab .env.local, klicken auf Show secret und dann auf Copy Snippet. Stellen Sie sicher, dass Sie die Secrets anzeigen lassen, bevor Sie sie kopieren.

Navigieren Sie zu Ihrem Code-Editor und benennen Sie die .env.example-Datei in .env um. Fügen Sie die kopierten Inhalte von Vercel ein.

Wichtig: Überprüfen Sie Ihre .gitignore-Datei und stellen Sie sicher, dass .env in den ignorierten Dateien aufgeführt ist, um zu verhindern, dass Ihre Datenbank-Secrets beim Push zu GitHub exponiert werden.

Datenbank befüllen

Nachdem Ihre Datenbank erstellt wurde, befüllen wir sie nun mit einigen Initialdaten.

Wir haben eine API eingebunden, die Sie im Browser aufrufen können, um ein Seed-Skript auszuführen, das die Datenbank mit einem ersten Datensatz befüllt.

Das Skript verwendet SQL, um die Tabellen zu erstellen, und die Daten aus der placeholder-data.ts-Datei, um sie nach der Erstellung zu befüllen.

Stellen Sie sicher, dass Ihr lokaler Entwicklungsserver mit pnpm run dev läuft, und navigieren Sie im Browser zu localhost:3000/seed. Nach Abschluss sehen Sie die Meldung "Database seeded successfully" im Browser. Anschließend können Sie diese Datei löschen.

Fehlerbehebung:

• Stellen Sie sicher, dass Sie Ihre Datenbank-Secrets anzeigen lassen, bevor Sie sie in Ihre .env-Datei kopieren.
• Das Skript verwendet bcrypt, um das Passwort des Benutzers zu hashen. Falls bcrypt nicht mit Ihrer Umgebung kompatibel ist, können Sie das Skript anpassen, um stattdessen bcryptjs zu verwenden.
• Falls Sie Probleme beim Befüllen Ihrer Datenbank haben und das Skript erneut ausführen möchten, können Sie vorhandene Tabellen löschen, indem Sie DROP TABLE tablename in Ihrer Datenbank-Abfrageoberfläche ausführen. Weitere Details finden Sie im Abschnitt Abfragen ausführen unten. Seien Sie jedoch vorsichtig - dieser Befehl löscht die Tabellen und alle darin enthaltenen Daten. Für Ihre Beispiel-App ist dies in Ordnung, da Sie mit Platzhalterdaten arbeiten, aber in einer Produktions-App sollten Sie diesen Befehl nicht ausführen.

Abfragen ausführen

Lassen Sie uns eine Abfrage ausführen, um sicherzustellen, dass alles wie erwartet funktioniert. Wir verwenden einen weiteren Router Handler, app/query/route.ts, um die Datenbank abzufragen. In dieser Datei finden Sie eine listInvoices()-Funktion mit folgender SQL-Abfrage.

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

Heben Sie die Kommentierung der Datei auf, entfernen Sie den Response.json()-Block und navigieren Sie im Browser zu localhost:3000/query. Sie sollten sehen, dass ein Rechnungsbetrag (amount) und ein Name (name) zurückgegeben wird.