Abfrage von Redis mit Astro auf Cloudflare Workers

In diesem Leitfaden lernen Sie, wie Sie mit einer beliebigen Redis-Instanz von einer Astro-Anwendung aus interagieren, die auf Cloudflare Workers läuft. Sie werden den Prozess durchlaufen, ein neues Astro-Projekt einzurichten, serverseitiges Rendering mit dem Cloudflare-Adapter zu aktivieren, die notwendigen Pakete zu installieren, Code zu schreiben, um mit Redis zu interagieren, und die Anwendung auf Cloudflare Workers bereitzustellen.

Voraussetzungen

• Node.js 20 oder später
• Jede Redis-Datenbank (Sie können Upstash für eine verwaltete Lösung verwenden)

Inhaltsverzeichnis

• Erstellen Sie eine neue Astro-Anwendung
• Integrieren Sie den Cloudflare-Adapter in Ihr Astro-Projekt
• Aktualisieren Sie die Typdefinitionen
• Erstellen Sie eine Redis-Verbindung
• Abfragen von Redis aus der Astro-Anwendung
• Bereitstellung auf Cloudflare Workers

Erstellen Sie eine neue Astro-Anwendung

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

npm create astro@latest my-app

npm create astro ist der empfohlene Weg, um schnell ein Astro-Projekt zu erstellen.

Wenn Sie dazu aufgefordert werden, wählen Sie:

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

Sobald dies 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 notwendige Bibliothek für den Aufbau der Anwendung zu installieren:

npm install redis-on-workers
npm install -D tsx

Die folgenden Bibliotheken werden installiert:

• redis-on-workers: Verbinden Sie sich mit Ihrem Redis-Server mit cloudflare:sockets.
• tsx: Eine Laufzeitumgebung für TypeScript und JavaScript, die es Ihnen ermöglicht, TypeScript-Dateien direkt auszuführen, ohne sie vorher kompilieren zu müssen.

Integrieren Sie den Cloudflare-Adapter 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 = "redis-astro-workers"
main = "dist/_worker.js"
compatibility_date = "2025-04-01"
compatibility_flags = [ "nodejs_compat" ]

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

[vars]
REDIS_URL=""

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: {
      REDIS_URL: envField.string({ context: 'server', access: 'secret', optional: false }),
    }
  }
  // adapter
})

Aktualisieren Sie die Typdefinitionen

Sie müssen sicherstellen, dass die Typdefinitionen für den Redis-Client korrekt angewendet werden. Erstellen Sie dazu eine neue Datei namens apply-patch.tsx im Stammverzeichnis des Projekts mit dem folgenden Code:

import { existsSync, readFileSync, writeFileSync } from 'fs'
import { join } from 'path'

const redisWorkersType = join('node_modules', 'redis-on-workers', 'dist', 'index.d.ts')

if (existsSync(redisWorkersType)) {
  const content = readFileSync(redisWorkersType, 'utf8')
  if (!content.includes('export declare class RedisInstance')) writeFileSync(redisWorkersType, content.replace('declare class RedisInstance', 'export declare class RedisInstance'))
} else console.log(`Warning: Could not find Redis workers type definition at ${redisWorkersType}`)

Dieser Code überprüft, ob eine bestimmte Typdefinitionsdatei für den Redis-Client existiert. Wenn dies der Fall ist, liest der Code die Datei und überprüft das Vorhandensein eines bestimmten Exports. Wenn dieser Export fehlt, wird die Datei geändert, um den Export hinzuzufügen.

Führen Sie nun die Datei mit dem folgenden Befehl aus:

npx tsx apply-patch.tsx

Erstellen Sie eine Redis-Verbindung

Erstellen Sie in Ihrer Astro-Anwendung eine Datei namens redis.ts im Verzeichnis src/storage, um eine Verbindung zu Redis herzustellen. Verwenden Sie den folgenden Code:

import { getSecret } from 'astro:env/server'
import { createRedis } from 'redis-on-workers'

const connectionString = getSecret('REDIS_URL')
if (!connectionString) throw new Error('REDIS_URL is not defined in the environment variables')

export default createRedis(connectionString)

Der obige Code importiert die getSecret-Funktion aus astro:env/server, um Umgebungsvariablen während der Laufzeit dynamisch zuzugreifen, und definiert eine redis-Variable vom Typ RedisInstance. Er ruft den Redis-Verbindungsstring aus den Umgebungsgeheimnissen mit getSecret ab und stellt eine Redis-Verbindung mit createRedis() her, wenn der Verbindungsstring verfügbar ist. Schließlich exportiert er die Redis-Instanz.

Abfragen von Redis aus der Astro-Anwendung

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

---
import redis from '../storage/redis'

let productsCount = await redis.sendOnce('GET', 'productsCount')
if (!productsCount) productsCount = 0
---

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

Dieser Code importiert die zuvor erstellte redis-Instanz und ruft den Wert ab, der mit dem Schlüssel productsCount in Redis verknüpft ist, indem die Methode sendOnce() verwendet wird.

Bereitstellung auf Cloudflare Workers

Um Ihre Anwendung auf Cloudflare Workers bereitstellbar zu machen, erstellen Sie eine Datei namens .assetsignore im public-Verzeichnis 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

• redis-on-workers

Fazit

In diesem Blogbeitrag haben Sie gelernt, wie Sie eine Redis-Instanz von einer Astro-Anwendung aus abfragen, die auf Cloudflare Workers läuft. Sie haben die Schritte durchlaufen, den Redis-Client einzurichten, eine Verbindung herzustellen und Befehle auszuführen, um Daten aus Redis innerhalb der Astro-Anwendung abzurufen.

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!