Abfrage von Cloud Firestore mit Astro auf Cloudflare Workers

In diesem Leitfaden erfahren Sie, wie Sie mit einer Cloud Firestore-Instanz von einer Astro-Anwendung aus interagieren, die auf Cloudflare Workers läuft. Sie werden den Prozess der Einrichtung eines neuen Astro-Projekts durchlaufen, das serverseitige Rendering mit dem Cloudflare-Adapter aktivieren, die erforderlichen Pakete installieren, Code schreiben, um mit Cloud Firestore zu interagieren, und die Anwendung auf Cloudflare Workers bereitstellen.

Voraussetzungen

• Node.js 20 oder höher
• Ein Firebase-Konto

Inhaltsverzeichnis

• Erstellen einer Firebase-Dienstkonto-JSON
• Erstellen einer neuen Astro-Anwendung
• Integration des Cloudflare-Adapters in Ihr Astro-Projekt
• Zugriff auf die Umgebungsvariablen
• Initialisierung der Firebase-Verbindung
• Abfrage von Cloud Firestore aus der Astro-Anwendung
• Bereitstellung auf Cloudflare Workers

Erstellen einer Firebase-Dienstkonto-JSON

• Gehen Sie zur Firebase-Konsole und durchsuchen Sie Ihr Projekt (erstellen Sie eines, wenn Sie noch keines haben).
• Navigieren Sie in der Firebase-Konsole zu Projekteinstellungen, indem Sie auf das Zahnradsymbol klicken.
• Gehen Sie dann zum Tab Dienstkonten.
• Klicken Sie schließlich auf Neuen privaten Schlüssel generieren und laden Sie die JSON-Datei herunter. Diese Datei enthält Ihre Firebase-Dienstkonto-Anmeldeinformationen.

Erstellen einer neuen Astro-Anwendung

Lassen Sie uns beginnen, indem wir ein neues Astro-Projekt erstellen. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

npm create astro@latest my-app

npm create astro ist die empfohlene Methode, um schnell ein Astro-Projekt zu erstellen.

Wenn Sie dazu aufgefordert werden, wählen Sie:

• Use minimal (empty) template, wenn Sie gefragt werden, wie Sie das neue Projekt starten möchten.
• Yes, wenn Sie gefragt werden, ob Abhängigkeiten installiert werden sollen.
• Yes, wenn Sie gefragt werden, ob ein Git-Repository initialisiert werden soll.

Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:

cd my-app
npm run dev

Die App sollte auf localhost:4321 laufen. Führen Sie als Nächstes den folgenden Befehl aus, um die erforderliche Bibliothek für den Aufbau der Anwendung zu installieren:

npm install fireworkers

Die folgende Bibliothek wird installiert:

• fireworkers: Eine Bibliothek, die die Interaktion mit Cloud Firestore von Cloudflare Workers aus erleichtert.

Integration des Cloudflare-Adapters in Ihr Astro-Projekt

Um Ihr Astro-Projekt auf Cloudflare Workers bereitzustellen, müssen Sie den entsprechenden Adapter installieren. Führen Sie den folgenden Befehl aus:

npx astro add cloudflare

Wenn Sie dazu aufgefordert werden, wählen Sie Folgendes:

• Y, wenn Sie gefragt werden, ob die Cloudflare-Abhängigkeiten installiert werden sollen.
• Y, wenn Sie gefragt werden, ob Änderungen an der Astro-Konfigurationsdatei vorgenommen werden sollen.

Sie haben das serverseitige Rendering in Astro erfolgreich aktiviert.

Um sicherzustellen, dass die Ausgabe auf Cloudflare Workers bereitgestellt werden kann, erstellen Sie eine wrangler.toml-Datei im Stammverzeichnis des Projekts mit dem folgenden Code:

name = "cloud-firestore-astro-workers"
main = "dist/_worker.js"
compatibility_date = "2025-04-01"
compatibility_flags = [ "nodejs_compat" ]

[assets]
directory="dist"
binding="ASSETS"

[vars]
FIREBASE_PROJECT_ID=""
FIREBASE_PRIVATE_KEY=""
FIREBASE_CLIENT_EMAIL=""
FIREBASE_PRIVATE_KEY_ID=""

Stellen Sie danach sicher, dass Sie sowohl eine .env-Datei als auch eine wrangler.toml-Datei mit den definierten Variablen haben, damit sie während npm run dev und bei der Bereitstellung auf Cloudflare Workers zugänglich sind.

Aktualisieren Sie außerdem die astro.config.mjs-Datei mit dem folgenden, um diese Variablen im Code programmatisch zugänglich zu machen:

// ... Bestehende Importe...
import { defineConfig, envField } from 'astro/config'

export default defineConfig({
  env: {
    schema: {
      FIREBASE_PROJECT_ID: envField.string({ context: 'server', access: 'secret', optional: false }),
      FIREBASE_PRIVATE_KEY: envField.string({ context: 'server', access: 'secret', optional: false }),
      FIREBASE_CLIENT_EMAIL: envField.string({ context: 'server', access: 'secret', optional: false }),
      FIREBASE_PRIVATE_KEY_ID: envField.string({ context: 'server', access: 'secret', optional: false }),
    }
  }
  // adapter
})

Zugriff auf die Umgebungsvariablen

Um sicher auf die erforderlichen Umgebungsvariablen zur Laufzeit zuzugreifen, sollten Sie die Funktion getSecret aus astro:env/server verwenden. Dieser Ansatz, empfohlen ab Astro 5.6, stellt sicher, dass Ihre Anwendung anbieterunabhängig bleibt und sensible Informationen nicht fest codiert werden. Die folgenden Variablen werden mit dieser Methode abgerufen:

• FIREBASE_PROJECT_ID
• FIREBASE_PRIVATE_KEY
• FIREBASE_CLIENT_EMAIL
• FIREBASE_PRIVATE_KEY_ID

import { getSecret } from 'astro:env/server'

const project_id = getSecret('FIREBASE_PROJECT_ID')
const private_key = getSecret('FIREBASE_PRIVATE_KEY')
const client_email = getSecret('FIREBASE_CLIENT_EMAIL')
const private_key_id = getSecret('FIREBASE_PRIVATE_KEY_ID')

export default function getFirebaseConfig() {
  return {
    project_id,
    private_key,
    client_email,
    private_key_id,
  }
}

Initialisierung der Firebase-Verbindung

Erstellen Sie in Ihrer Astro-Anwendung eine Datei mit dem Namen index.ts im Verzeichnis src/storage/firebase, um eine Funktion zu exportieren, die eine Verbindung mit Cloud Firestore herstellt. Verwenden Sie den folgenden Code:

import getFirebaseConfig from './config'
import * as Firestore from 'fireworkers'
import { getSecret } from 'astro:env/server'

const firebaseConfig = getFirebaseConfig()

export async function initializeFirebase(): Promise<Firestore.DB> {
  return await Firestore.init({
    uid: 'user1234',
    project_id: firebaseConfig.project_id,
    private_key: firebaseConfig.private_key,
    client_email: firebaseConfig.client_email,
    private_key_id: firebaseConfig.private_key_id,
  })
}

export { Firestore }

Der obige Code importiert die Funktion getSecret aus astro:env/server, um Umgebungsvariablen dynamisch zur Laufzeit zuzugreifen. Anschließend importiert er die Funktion getFirebaseConfig, um Firebase-Konfigurationsdetails abzurufen. Die Funktion initializeFirebase wird definiert, um eine Firestore-Datenbankverbindung mit den Konfigurationsdetails herzustellen, die von getFirebaseConfig abgerufen werden. Schließlich wird das Firestore-Modul für die Verwendung in anderen Teilen der Anwendung exportiert.

Abfrage von Cloud Firestore aus der Astro-Anwendung

Jetzt sind Sie bereit, Befehle auf Firestore mit der firestore-Instanz auszuführen. Schreiben Sie in Ihrer Astro-Seite den folgenden Code, um mit Cloud Firestore zu interagieren:

---
import { initializeFirebase, Firestore } from '../../storage/index'

const firestore = await initializeFirebase()

// Um ein Dokument in der `storage`-Sammlung zu setzen, await Firestore.set(firestore, 'storage', key, { value }, { merge: true })
// Um ein Dokument in der `storage`-Sammlung zu entfernen, await Firestore.remove(firestore, 'storage', key)

// Holen Sie sich das Dokument (mit dem Schlüssel `productsCount`) und verwenden Sie dessen Wert-Eigenschaft (aus der `storage`-Sammlung)
let count = await Firestore.get(firestore, 'storage', 'productsCount').then((doc) => doc.fields.value).catch(() => null)
if (!count) count = 0
---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    {count}
</body>
</html>

Dieser Code importiert die Funktion initializeFirebase und das gesamte exportierte Firestore und ruft den Wert ab, der mit dem Schlüssel productsCount in Cloud Firestore mit der .get()-Methode verknüpft ist.

Bereitstellung auf Cloudflare Workers

Um Ihre Anwendung auf Cloudflare Workers bereitstellbar zu machen, erstellen Sie eine Datei mit dem Namen .assetsignore im Verzeichnis public mit folgendem Inhalt:

_routes.json
_worker.js

Als Nächstes müssen Sie das Wrangler-CLI verwenden, um Ihre Anwendung auf Cloudflare Workers bereitzustellen. Führen Sie den folgenden Befehl aus, um die Bereitstellung durchzuführen:

npm run build && npx wrangler@latest deploy

Referenzen

• fireworkers

Fazit

In diesem Blogbeitrag haben Sie gelernt, wie Sie Cloud Firestore von einer Astro-Anwendung aus abfragen, die auf Cloudflare Workers läuft. Sie haben die Schritte zum Einrichten des Cloud Firestore-Clients, zum Herstellen einer Verbindung und zum Ausführen von Befehlen zum Abrufen von Daten aus Firestore innerhalb der Astro-Anwendung durchlaufen.

Wenn Sie bestimmte Abschnitte detaillierter erkunden, bestimmte Konzepte erweitern oder zusätzliche verwandte Themen behandeln möchten, lassen Sie es mich bitte wissen, und ich helfe Ihnen gerne weiter!