Umgebungsvariablen verwenden

Astro nutzt die in Vite eingebaute Unterstützung für Umgebungsvariablen und lässt dich mit jeder seiner Methoden mit ihnen arbeiten.

Beachte, dass zwar alle Umgebungsvariablen im serverseitigen Code verfügbar sind, aber aus Sicherheitsgründen nur Umgebungsvariablen mit dem Präfix PUBLIC_ im clientseitigen Code verfügbar sind.

.env

SECRET_PASSWORD=password123
PUBLIC_ANYBODY=there

In diesem Beispiel ist PUBLIC_ANYBODY (zugänglich über import.meta.env.PUBLIC_ANYBODY) sowohl im Server- als auch im Client-Code verfügbar, während SECRET_PASSWORD (zugänglich über import.meta.env.SECRET_PASSWORD) nur serverseitig verfügbar ist.

Achtung

.env-Dateien werden nicht in Konfigurationsdateien geladen.

Standard-Umgebungsvariablen

Abschnitt betitelt Standard-Umgebungsvariablen

Astro enthält ein paar Umgebungsvariablen, die sofort einsatzbereit sind:

• import.meta.env.MODE: Der Modus, in dem deine Website läuft. Das ist development, wenn du astro dev benutzt und production, wenn du astro build benutzt.
• import.meta.env.PROD: wahr, wenn deine Website im Produktionsmodus läuft; andernfalls falsch.
• import.meta.env.DEV: true, wenn deine Website im Entwicklungsmodus läuft; sonst false. Immer das Gegenteil von import.meta.env.PROD.
• import.meta.env.BASE_URL: Die Basis-URL, von der aus deine Seite geladen wird. Sie wird durch die Konfigurationsoption base bestimmt.

• import.meta.env.ASSETS_PREFIX: Das Präfix für die von Astro erzeugten Asset-Links, wenn die Konfigurationsoption build.assetsPrefix gesetzt ist. Damit können Asset-Links erstellt werden, die nicht von Astro verarbeitet werden.

Umgebungsvariablen setzen

Abschnitt betitelt Umgebungsvariablen setzen

.env-Dateien

Abschnitt betitelt .env-Dateien

Umgebungsvariablen können aus .env-Dateien in deinem Projektverzeichnis geladen werden.

Du kannst auch einen Modus (entweder production oder development) an den Dateinamen anhängen, z.B. .env.production oder .env.development, so dass die Umgebungsvariablen nur in diesem Modus wirksam werden.

Erstelle einfach eine .env Datei im Projektverzeichnis und füge ihr einige Variablen hinzu.

.env

# Diese Funktion ist nur verfügbar, wenn sie auf dem Server ausgeführt wird!
DB_PASSWORD="foobar"
# Das wird überall verfügbar sein!
PUBLIC_POKEAPI="https://pokeapi.co/api/v2"

Mehr über .env-Dateien findest du in der Vite-Dokumentation.

Verwendung der Kommandozeilenschnittstelle (CLI)

Abschnitt betitelt Verwendung der Kommandozeilenschnittstelle (CLI)

Du kannst auch Umgebungsvariablen hinzufügen, während du dein Projekt ausführst:

npm

POKEAPI=https://pokeapi.co/api/v2 npm run dev

pnpm

POKEAPI=https://pokeapi.co/api/v2 pnpm run dev

Yarn

POKEAPI=https://pokeapi.co/api/v2 yarn run dev

Achtung

Auf diese Weise eingesetzte Variablen sind überall in deinem Projekt verfügbar, auch auf dem Client.

Abrufen von Umgebungsvariablen

Abschnitt betitelt Abrufen von Umgebungsvariablen

Anstatt process.env zu verwenden, benutzt du mit Vite import.meta.env, das die in ES2020 hinzugefügte Funktion import.meta nutzt.

Verwende zum Beispiel import.meta.env.PUBLIC_POKEAPI, um die Umgebungsvariable PUBLIC_POKEAPI zu erhalten.

// Wenn import.meta.env.SSR === true
const data = await db(import.meta.env.DB_PASSWORD);

// Wenn import.meta.env.SSR === false
const data = fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);

Achtung

Da Vite die Datei import.meta.env statisch ersetzt, kannst du nicht mit dynamischen Schlüsseln wie import.meta.env[key] darauf zugreifen.

IntelliSense für TypeScript

Abschnitt betitelt IntelliSense für TypeScript

Standardmäßig bietet Astro eine Typdefinition für import.meta.env in astro/client.d.ts.

Du kannst zwar weitere benutzerdefinierte Umgebungsvariablen in .env.[mode]-Dateien definieren, aber du möchtest vielleicht TypeScript IntelliSense für benutzerdefinierte Umgebungsvariablen nutzen, denen das Präfix PUBLIC_ vorangestellt ist.

Um das zu erreichen, kannst du eine env.d.ts in src/ erstellen und ImportMetaEnv wie folgt konfigurieren:

src/env.d.ts

interface ImportMetaEnv {
  readonly DB_PASSWORD: string;
  readonly PUBLIC_POKEAPI: string;
  // mehr Umgebungsvariablen...
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}