Umgebungsvariablen in CI
Speichern Sie Geheimnisse in GitHub Secrets, injizieren Sie sie als Umgebungsvariablen in den Build und greifen Sie in Vite mit import.meta.env oder in Next.js mit process.env darauf zu.
Umgebungsvariablen in CI ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum verschiedene Umgebungen?
Apps benötigen je nach Umgebung unterschiedliche Werte: dev-API-URL, Staging-API-URL, Produktions-API-URL. Außerdem gibt es Secrets (API-Schlüssel, Tokens), die nie im Repository landen dürfen. Umgebungsvariablen sind der Standardweg, diese Werte bereitzustellen.
Öffentlich vs. nur serverseitig
Frontend-Variablen, die in das Bundle eingebaut werden, sind öffentlich – für jeden sichtbar, der die DevTools öffnet. Legen Sie dort niemals Secrets ab. Serverseitige Variablen (verwendet in serverlosen Funktionen, SSR und API-Routen) können echte Secrets sein.
Vite-Umgebungsvariablen
Vite stellt Variablen mit dem Präfix VITE_ über import.meta.env im Client-Code bereit.
# .env
VITE_API_URL=https://api.example.com
VITE_FEATURE_FLAGS={"newOnboarding":true}
# In code:
const apiUrl = import.meta.env.VITE_API_URL;
# DEV_ONLY or NEVER PREFIXED vars are NOT exposed:
SECRET_KEY=xxx # not accessible to client codeNext.js-Umgebungsvariablen
Next versieht öffentliche Variablen mit dem Präfix NEXT_PUBLIC_. Serverseitige Variablen haben kein Präfix (verwendet in Route Handlers und getServerSideProps).
# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com # client-accessible
DATABASE_URL=postgres://... # server-only
# Client:
const url = process.env.NEXT_PUBLIC_API_URL;
# Server (API route):
const db = process.env.DATABASE_URL;Lokale .env-Dateien
Verwenden Sie .env.local für persönliche Überschreibungen und .env.development / .env.production für umgebungsspezifische Standardwerte. Fügen Sie .env.local zu .gitignore hinzu – committen Sie Secrets niemals.
# .gitignore
.env.local
.env.*.local
# Commit only .env.example with placeholder values:
VITE_API_URL=https://api.example.com
DATABASE_URL=Secrets in GitHub Actions speichern
Fügen Sie Secrets in den Repository-Einstellungen unter Secrets and variables → Actions hinzu. Greifen Sie über secrets.NAME darauf zu.
# .github/workflows/deploy.yml
- name: Deploy
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
run: |
npx vercel --token $VERCEL_TOKEN --prod
npx sentry-cli releases new $RELEASEUmgebungsspezifische Secrets
GitHub Environments (Einstellungen → Environments) ermöglichen Ihnen, Secrets auf eine bestimmte Umgebung (Staging, Produktion) zu beschränken, mit optionalen Freigabestufen.
# Job that requires environment:
deploy-prod:
environment: production # requires reviewer approval if configured
steps:
- run: deploy
env:
DB_URL: ${{ secrets.DB_URL }} # only prod's DB_URL is exposedUmgebungsvariablen beim Hosting-Anbieter
Vercel/Netlify/Cloudflare stellen Umgebungsvariablen für Ihren Build und Ihre Laufzeit bereit. Legen Sie sie im Dashboard oder über die CLI fest.
# Vercel:
vercel env add VITE_API_URL production
vercel env add VITE_API_URL preview
# Netlify:
netlify env:set VITE_API_URL https://api.example.com
# Cloudflare Pages:
wrangler pages secret put API_URLSecrets nicht in Frontend-Bundles fest einprogrammieren
Wenn ein Wert in Ihrem Client-JavaScript enthalten ist, ist er öffentlich. API-Schlüssel für SDKs von Drittanbietern (Stripe-Publishable-Key, Algolia-Suchschlüssel) sind dafür ausgelegt, öffentlich zu sein. Alles andere (Server-API-Schlüssel) muss im Backend bleiben.
Umgebungsvariablen beim Build validieren
Verwenden Sie zod oder envalid, damit Builds fehlschlagen, wenn erforderliche Umgebungsvariablen fehlen.
// env.ts
import { z } from 'zod';
const envSchema = z.object({
VITE_API_URL: z.string().url(),
VITE_SENTRY_DSN: z.string().url().optional()
});
export const env = envSchema.parse(import.meta.env);
// Throws helpful error if VITE_API_URL is missingBuild-Zeit vs. Laufzeit
Build-Zeit-Umgebungsvariablen werden in das Bundle eingebaut – eine Änderung erfordert einen erneuten Build. Laufzeitvariablen (Next-API-Routen, Netlify Functions, Cloudflare Workers) werden pro Anfrage ausgewertet. Entscheiden Sie anhand dessen, ob sich der Wert ohne erneutes Deployment ändern soll.
Secrets-Rotation
Rotieren Sie Secrets regelmäßig (alle 90 Tage) und nach jeder Änderung im Team. Verwenden Sie 1Password Secrets Automation, AWS Secrets Manager oder einen ähnlichen Dienst, um Secrets in CI ohne manuelle Aktualisierungen aktuell zu halten.
Häufige Fallstricke
1) Eine .env-Datei mit echten Secrets committen – verwenden Sie git-secrets, um dies zu verhindern. 2) Serverseitige Variablen für den Client sichtbar machen (falsches Präfix). 3) Vergessen, Umgebungsvariablen für Preview-Deployments festzulegen. 4) Test- und Produktionsschlüssel in derselben Umgebung vermischen.
Kurzer Check
Warum müssen Vite-Umgebungsvariablen, die dem Client zugänglich gemacht werden, das Präfix VITE_ tragen?
Zusammenfassung: Umgebungsvariablen in CI
Öffentliche Variablen: mit Präfix (VITE_, NEXT_PUBLIC_) versehen, in das Bundle eingebaut, für Benutzer sichtbar. Nur serverseitige Variablen: kein Präfix, verwendet in API-Routen / SSR. .env.local in .gitignore; .env.example committen. GitHub Secrets für CI; GitHub Environments zur Einschränkung für die Produktion. Hosting-Anbieter (Vercel, Netlify, Cloudflare) setzen alle Variablen pro Umgebung. Mit zod zur Build-Zeit validieren.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Umgebungsvariablen in CI“ kostenlos?
Ja — der vollständige Text von „Umgebungsvariablen in CI“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Umgebungsvariablen in CI“?
Speichern Sie Geheimnisse in GitHub Secrets, injizieren Sie sie als Umgebungsvariablen in den Build und greifen Sie in Vite mit import.meta.env oder in Next.js mit process.env darauf zu. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Umgebungsvariablen in CI“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- GitHub Actions für Frontends: Linting, Tests und Build
- Bereitstellung auf Vercel, Netlify und Cloudflare Pages
- Umgebungsvariablen in CI
- Automatisierte Lighthouse-Prüfungen