LaunchFast Logo LaunchFast

Dynamisches Einfügen von Umgebungsvariablen in Cloudflare-Seiten

Rishi Raj Jain
Injecting Environment Variables Dynamically in Cloudflare Pages

In diesem Leitfaden erfahren Sie, wie Sie Umgebungsvariablen dynamisch in eine Cloudflare Pages-Anwendung einfügen

Voraussetzungen

Sie benötigen Folgendes:

Dynamische Umgebungsvariablen über wranglertoml

Da sich die Konfiguration von Cloudflare Pages über wranglertoml jetzt in der offenen Beta befindet, können Sie diese Datei als Ihren Umgebungsvariablenmanager verwenden (abgesehen von den in Cloudflare definierten Umgebungsvariablen). Seiteneinstellungen Ihres Projekts)

Wie in der Datei example wranglertoml angegeben, werden alle Variablen in den „[vars]“ auf Cloudflare Pages bereitgestellt

Sie haben die Idee: Fügen Sie Ihre Umgebungsvariablen dynamisch als Schlüssel-Wert-Paar in „[vars]“ ein. Dies ist praktisch, wenn Sie versuchen, etwas in Ihrer CI/CD-Pipeline bereitzustellen und dann die generierten Werte verwenden möchten als Umgebungsvariablen

Ein einfaches Skript, um dasselbe zu tun, würde wie folgt aussehen:

echo "[vars]" >> wrangler.toml
echo "MY_ENV_NAME=MY_ENV_VALUE" >> wrangler.toml

Aber das ist noch nicht alles, es gibt noch ein weiteres Problem bei der Verwendung von wranglertoml mit Cloudflare Pages während der Bereitstellung. Sie müssen die neueste CLI anstelle der veralteten GitHub-Aktion verwenden

Auf Cloudflare-Seiten bereitstellen

Sie müssen die Wrangler-CLI verwenden, um Ihre Anwendung auf Cloudflare Pages bereitzustellen. Führen Sie zum Bereitstellen den folgenden Befehl aus (danach, wenn Ihre Anwendung einen Build-Schritt hat):

npx wrangler@latest pages deploy --project-name="<name>"

(Stellen Sie sicher, dass Sie die neueste Version von Wrangler CLI für die Bereitstellung auf Cloudflare-Seiten verwenden)

Abschluss

In diesem Leitfaden haben Sie erfahren, wie Sie Umgebungsvariablen dynamisch in Cloudflare Pages einfügen

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.

Learn More Erstellen Sie einen Telegram-Bot im Next.js App Router: Eine Schritt-für-Schritt-Anleitung → Verwenden von Unplugin-Symbolen in Next.js: Eine Schritt-für-Schritt-Anleitung → Verwenden von Unplugin-Symbolen in SvelteKit: Eine Schritt-für-Schritt-Anleitung →