CI'da Ortam Değişkenleri
Gizli bilgileri GitHub Secrets'ta saklamayı, derlemeye ortam değişkenleri olarak aktarmayı ve Vite'ta import.meta.env veya Next.js'te process.env ile bunlara erişmeyi öğrenin.
CI'da Ortam Değişkenleri, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Farklı Ortamlar Neden Gerekir?
Uygulamaların her ortam için farklı değerlere ihtiyacı vardır: geliştirme API URL'si, hazırlama API URL'si, üretim API URL'si. Ayrıca depoya asla girmemesi gereken gizli bilgiler (API anahtarları, belirteçler) vardır. Ortam değişkenleri, bunları aktarmanın standart yoludur.
Herkese Açık ve Yalnızca Sunucuya Özel
Paketin içine yerleştirilen frontend değişkenleri herkese açıktır — DevTools'a erişebilen herkes bunları görebilir. Gizli bilgileri asla buraya koymayın. Sunucu tarafındaki değişkenler (sunucusuz işlevlerde, SSR'de ve API rotalarında kullanılanlar) gerçek gizli bilgiler olabilir.
Vite Ortam Değişkenleri
Vite, VITE_ ön ekiyle başlayan değişkenleri import.meta.env üzerinden istemci koduna sunar.
# .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 Ortam Değişkenleri
Next, herkese açık değişkenlere NEXT_PUBLIC_ ön ekini getirir. Yalnızca sunucuya özel değişkenlerde ön ek bulunmaz (Route Handlers ve getServerSideProps içinde kullanılır).
# .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;Yerel .env Dosyaları
Kişisel geçersiz kılmalar için .env.local, ortama özgü varsayılanlar için .env.development / .env.production kullanın. .env.local dosyasını .gitignore'a ekleyin — gizli bilgileri asla kaydetmeyin.
# .gitignore
.env.local
.env.*.local
# Commit only .env.example with placeholder values:
VITE_API_URL=https://api.example.com
DATABASE_URL=GitHub Actions'ta Gizli Bilgileri Saklama
Gizli bilgileri depo Ayarlar → Gizli bilgiler ve değişkenler → Actions bölümüne ekleyin. Bunlara secrets.NAME üzerinden erişin.
# .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 $RELEASEOrtama Özel Gizli Bilgiler
GitHub Ortamları (Ayarlar → Ortamlar), gizli bilgileri isteğe bağlı onay aşamalarıyla belirli bir ortamla (hazırlama, üretim) sınırlandırmanıza olanak tanır.
# 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 exposedBarındırma Sağlayıcısının Ortam Değişkenleri
Vercel/Netlify/Cloudflare'ın tümü, ortam değişkenlerini derlemenize ve çalışma zamanınıza sunar. Bunları gösterge panelinde veya CLI üzerinden ayarlayın.
# 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_URLGizli Bilgileri Frontend Paketlerine Sabit Kodlamayın
Bir değer istemci JS'nizde bulunuyorsa herkese açıktır. Üçüncü taraf SDK'ları için API anahtarları (Stripe yayımlanabilir anahtarı, Algolia arama anahtarı) herkese açık olacak şekilde tasarlanmıştır. Diğer her şey (sunucu API anahtarları) arka uçta kalmalıdır.
Ortam Değişkenlerini Derleme Sırasında Doğrulama
Gerekli ortam değişkenleri eksikse derlemelerin başarısız olması için zod veya envalid kullanın.
// 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 missingDerleme Zamanı ve Çalışma Zamanı
Derleme zamanı ortam değişkenleri pakete yerleştirilir; bunları değiştirmek yeniden derleme gerektirir. Çalışma zamanı ortam değişkenleri (Next API rotaları, Netlify Functions, Cloudflare Workers) her istekte değerlendirilir. Değerin yeniden dağıtım yapılmadan değişip değişmemesi gerektiğine göre seçim yapın.
Gizli Bilgileri Yenileme
Gizli bilgileri düzenli olarak (her 90 günde bir) ve ekipteki her değişiklikten sonra yenileyin. CI'daki gizli bilgileri elle güncellemeden güncel tutmak için 1Password Secrets Automation, AWS Secrets Manager veya benzer bir araç kullanın.
Yaygın Hatalar
1) Gerçek gizli bilgiler içeren .env dosyasını kaydetmek — bunu önlemek için git-secrets kullanın. 2) Sunucu değişkenlerini istemciye sunmak (yanlış ön ek). 3) Önizleme dağıtımlarında ortam değişkenlerini ayarlamayı unutmak. 4) Aynı ortamda sınama ve üretim anahtarlarını karıştırmak.
Hızlı Kontrol
İstemciye sunulan Vite ortam değişkenlerinin neden VITE_ ön ekiyle başlaması gerekir?
Özet: CI'da Ortam Değişkenleri
Herkese açık değişkenler: ön ek taşır (VITE_, NEXT_PUBLIC_), pakete yerleştirilir ve kullanıcılar tarafından görülebilir. Yalnızca sunucuya özel değişkenler: ön ek taşımaz, API rotalarında / SSR'de kullanılır. .env.local, .gitignore içinde olmalı; .env.example kaydedilmelidir. CI için GitHub Secrets; üretim kapsamı için GitHub Environments kullanılır. Barındırma sağlayıcılarının (Vercel, Netlify, Cloudflare) tümü değişkenleri ortama göre ayarlar. Derleme zamanında zod ile doğrulayın.
Sıkça Sorulan Sorular
“CI'da Ortam Değişkenleri” dersi ücretsiz mi?
Evet — “CI'da Ortam Değişkenleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“CI'da Ortam Değişkenleri” dersinde ne öğreneceğim?
Gizli bilgileri GitHub Secrets'ta saklamayı, derlemeye ortam değişkenleri olarak aktarmayı ve Vite'ta import.meta.env veya Next.js'te process.env ile bunlara erişmeyi öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“CI'da Ortam Değişkenleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Ön Uç için GitHub Actions: Lint, Test ve Derleme
- Vercel, Netlify ve Cloudflare Pages'e Dağıtım
- CI'da Ortam Değişkenleri
- Otomatik Lighthouse Denetimleri