--- title: "Abfrage von Cloud Firestore mit Astro auf Cloudflare Workers" description: "Erfahren Sie, wie Sie Cloud Firestore von einer Astro-Anwendung abfragen, die auf Cloudflare Workers läuft." source: "https://www.launchfa.st/de/blog/query-cloud-firestore-astro-cloudflare-workers" author: "Rishi Raj Jain" created_at: 2025-04-25T12:00:00.000Z --- > **Site index for agents** > Fetch https://www.launchfa.st/llms.txt to discover every page on this site. > Every page is also available as Markdown by appending `.md` to its URL. Query Cloud Firestore with Astro on 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](https://nodejs.org/en) oder höher - Ein [Firebase](https://firebase.google.com)-Konto ## Inhaltsverzeichnis - [Erstellen einer Firebase-Dienstkonto-JSON](#erstellen-einer-firebase-dienstkonto-json) - [Erstellen einer neuen Astro-Anwendung](#erstellen-einer-neuen-astro-anwendung) - [Integration des Cloudflare-Adapters in Ihr Astro-Projekt](#integration-des-cloudflare-adapters-in-ihr-astro-projekt) - [Zugriff auf die Umgebungsvariablen](#zugriff-auf-die-umgebungsvariablen) - [Initialisierung der Firebase-Verbindung](#initialisierung-der-firebase-verbindung) - [Abfrage von Cloud Firestore aus der Astro-Anwendung](#abfrage-von-cloud-firestore-aus-der-astro-anwendung) - [Bereitstellung auf Cloudflare Workers](#bereitstellung-auf-cloudflare-workers) ## Erstellen einer Firebase-Dienstkonto-JSON - Gehen Sie zur [Firebase-Konsole](https://console.firebase.google.com/) 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: ```bash 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: ```bash cd my-app npm run dev ``` Die App sollte auf [localhost:4321](http://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: ```bash 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: ```bash 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: ```toml // Datei: wrangler.toml 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: ```tsx // Datei: astro.config.mjs // ... 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](https://astro.build/blog/astro-560/), 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 ```typescript // Datei: src/storage/firebase/config.ts 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: ```typescript // Datei: src/storage/index.ts import getFirebaseConfig from './config' import * as Firestore from 'fireworkers' import { getSecret } from 'astro:env/server' const firebaseConfig = getFirebaseConfig() export async function initializeFirebase(): Promise { 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: ```astro --- // Datei: src/pages/index.astro 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 --- {count} ``` 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: ```bash npm run build && npx wrangler@latest deploy ``` ## Referenzen - [fireworkers](https://www.npmjs.com/package/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!