Frontend Academy · Lektion

Miljøvariabler i CI

Gem hemmeligheder i GitHub Secrets, indsæt dem i buildet som miljøvariabler, og tilgå dem i Vite med import.meta.env eller i Next.js med process.env.

Lektion 3 af 415 trin

Miljøvariabler i CI er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor forskellige miljøer?

Applikationer har brug for forskellige værdier pr. miljø: API-URL til udvikling, API-URL til staging og API-URL til produktion. Desuden er der hemmeligheder (API-nøgler og adgangstokens), som aldrig må ende i repositoryet. Miljøvariabler er standardmåden at indsætte disse på.

Offentlige kontra kun servervariabler

Frontend-variabler, der er indlejret i bundlet, er offentlige — de kan ses af alle med DevTools. Placer aldrig hemmeligheder der. Variabler på serversiden (brugt i serverløse funktioner, SSR og API-ruter) kan være rigtige hemmeligheder.

Vite-miljøvariabler

Vite eksponerer variabler med præfikset VITE_ for klientkode via import.meta.env.

# .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 code

Next.js-miljøvariabler

Next giver offentlige variabler præfikset NEXT_PUBLIC_. Variabler, der kun bruges på serveren, har intet præfiks (bruges i Route Handlers og 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-filer

Brug .env.local til personlige tilsidesættelser og .env.development / .env.production til miljøspecifikke standardværdier. Føj .env.local til .gitignore — commit aldrig hemmeligheder.

# .gitignore
.env.local
.env.*.local

# Commit only .env.example with placeholder values:
VITE_API_URL=https://api.example.com
DATABASE_URL=

Lagring af hemmeligheder i GitHub Actions

Tilføj hemmeligheder under repositoryets Indstillinger → Hemmeligheder og variabler → Actions. Få adgang via secrets.NAME.

# .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 $RELEASE

Miljøspecifikke hemmeligheder

GitHub Environments (Indstillinger → Miljøer) giver dig mulighed for at begrænse hemmeligheder til et bestemt miljø (staging eller produktion) med valgfri godkendelse.

# 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 exposed

Miljøvariabler hos hostingudbydere

Vercel, Netlify og Cloudflare eksponerer alle miljøvariabler for din byggeproces og runtime. Angiv dem i kontrolpanelet eller via CLI.

# 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_URL

Hardkod aldrig hemmeligheder i frontend-bundles

Hvis en værdi findes i din klient-JavaScript, er den offentlig. API-nøgler til tredjeparts-SDK'er (Stripes publicerbare nøgle og Algolias søgenøgle) er designet til at være offentlige. Alt andet (API-nøgler til serveren) skal blive på backend'en.

Validering af miljøvariabler under bygning

Brug zod eller envalid til at få byggeprocessen til at fejle, hvis nødvendige miljøvariabler mangler.

// 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 missing

Ved byggetid kontra kørselstid

Miljøvariabler ved byggetid er indlejret i bundlet — en ændring kræver en ny bygning. Miljøvariabler ved kørselstid (Next API-ruter, Netlify Functions og Cloudflare Workers) evalueres for hver forespørgsel. Vælg ud fra, om værdien skal kunne ændres uden en ny udrulning.

Rotation af hemmeligheder

Roter hemmeligheder regelmæssigt (hver 90. dag) og efter enhver ændring i teamet. Brug 1Password Secrets Automation, AWS Secrets Manager eller tilsvarende til at holde hemmeligheder opdaterede i CI uden manuelle ændringer.

Almindelige faldgruber

1) Committe .env med rigtige hemmeligheder — brug git-secrets til at forhindre det. 2) Eksponere servervariabler for klienten (forkert præfiks). 3) Glemme at angive miljøvariabler ved forhåndsvisningsudrulninger. 4) Blande test- og produktionsnøgler i samme miljø.

Hurtigt tjek

Hvorfor skal Vite-miljøvariabler, der eksponeres for klienten, have præfikset VITE_?

Besvar den i den interaktive lektion

Opsummering: Miljøvariabler i CI

Offentlige variabler: har præfiks, er indlejret i bundlet og synlige for brugere (VITE_, NEXT_PUBLIC_). Variabler, der kun bruges på serveren: intet præfiks, bruges i API-ruter / SSR. .env.local i .gitignore; commit .env.example. GitHub Secrets til CI; GitHub Environments til begrænsning af produktionens omfang. Hostingudbydere (Vercel, Netlify og Cloudflare) angiver alle variabler pr. miljø. Valider med zod under bygningen.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Miljøvariabler i CI” gratis?

Ja — hele teksten til “Miljøvariabler i CI” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Miljøvariabler i CI”?

Gem hemmeligheder i GitHub Secrets, indsæt dem i buildet som miljøvariabler, og tilgå dem i Vite med import.meta.env eller i Next.js med process.env. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Miljøvariabler i CI”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

GitHub Actions til frontend: lint, test og build
Deployment til Vercel, Netlify og Cloudflare Pages
Miljøvariabler i CI
Automatiserede Lighthouse-tjek

← Tilbage til Frontend Academy