0Pricing
Frontend Academy · Pelajaran

Variabel Lingkungan dalam CI

Simpan rahasia di GitHub Secrets, masukkan ke build sebagai variabel lingkungan, dan akses di Vite dengan import.meta.env atau di Next.js dengan process.env.

Variabel Lingkungan dalam CI adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Lingkungan Berbeda?

Aplikasi memerlukan nilai yang berbeda untuk setiap lingkungan: URL API pengembangan, URL API praproduksi, dan URL API produksi. Selain itu, ada rahasia (kunci API dan token) yang tidak boleh masuk ke repositori. Variabel lingkungan adalah cara standar untuk memasukkan nilai-nilai ini.

Publik vs Hanya di Server

Variabel sisi depan yang disertakan dalam bundel bersifat publik—terlihat oleh siapa pun yang memiliki DevTools. Jangan pernah menaruh rahasia di sana. Variabel sisi server (yang digunakan dalam fungsi tanpa server, SSR, dan rute API) dapat benar-benar dirahasiakan.

Variabel Lingkungan Vite

Vite mengekspos variabel yang diawali dengan VITE_ ke kode klien melalui 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

Variabel Lingkungan Next.js

Next memberi awalan NEXT_PUBLIC_ pada variabel publik. Variabel yang hanya digunakan di server tidak memiliki awalan (digunakan dalam Route Handlers dan 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;

Berkas .env Lokal

Gunakan .env.local untuk penggantian pribadi, serta .env.development / .env.production untuk nilai bawaan khusus lingkungan. Tambahkan .env.local ke .gitignore—jangan pernah memasukkan rahasia ke repositori.

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

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

Menyimpan Rahasia di GitHub Actions

Tambahkan rahasia di Pengaturan repositori → Rahasia dan variabel → Actions. Akses melalui 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

Rahasia Khusus Lingkungan

GitHub Environments (Pengaturan → Environments) memungkinkan Anda membatasi rahasia ke lingkungan tertentu (praproduksi, produksi), dengan gerbang persetujuan opsional.

# 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

Variabel Lingkungan Penyedia Layanan

Vercel/Netlify/Cloudflare semuanya mengekspos variabel lingkungan ke pembangunan dan waktu eksekusi aplikasi Anda. Atur melalui dasbor atau 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

Jangan Menanamkan Rahasia dalam Bundel Sisi Depan

Jika sebuah nilai berada dalam JS klien, nilai itu bersifat publik. Kunci API untuk SDK pihak ketiga (kunci publikasi Stripe, kunci pencarian Algolia) memang dirancang untuk bersifat publik. Selain itu, apa pun—termasuk kunci API server—harus tetap berada di backend.

Memvalidasi Variabel Lingkungan saat Pembangunan

Gunakan zod atau envalid agar pembangunan gagal jika variabel lingkungan wajib tidak tersedia.

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

Saat Pembangunan vs Saat Eksekusi

Variabel lingkungan saat pembangunan disertakan dalam bundel—perubahannya memerlukan pembangunan ulang. Variabel lingkungan saat eksekusi (rute API Next, Netlify Functions, Cloudflare Workers) dievaluasi pada setiap permintaan. Pilih berdasarkan apakah nilainya perlu berubah tanpa penerapan ulang.

Rotasi Rahasia

Rotasikan rahasia secara berkala (setiap 90 hari) dan setelah terjadi perubahan anggota tim. Gunakan 1Password Secrets Automation, AWS Secrets Manager, atau layanan serupa agar rahasia tetap terbaru dalam CI tanpa pembaruan manual.

Kesalahan Umum

1) Memasukkan .env yang berisi rahasia nyata—gunakan git-secrets untuk mencegahnya. 2) Mengekspos variabel server ke klien (awalan salah). 3) Lupa menetapkan variabel lingkungan dalam penerapan pratinjau. 4) Mencampur kunci pengujian dan produksi dalam lingkungan yang sama.

Pemeriksaan Singkat

Mengapa variabel lingkungan Vite yang diekspos ke klien harus diawali dengan VITE_?

Ringkasan: Variabel Lingkungan dalam CI

Variabel publik: memiliki awalan (VITE_, NEXT_PUBLIC_), disertakan dalam bundel, dan terlihat oleh pengguna. Variabel yang hanya digunakan di server: tidak memiliki awalan, serta digunakan dalam rute API / SSR. .env.local berada dalam .gitignore; masukkan .env.example ke repositori. Gunakan GitHub Secrets untuk CI dan GitHub Environments untuk membatasi penggunaannya pada produksi. Penyedia layanan (Vercel, Netlify, Cloudflare) semuanya menetapkan variabel untuk setiap lingkungan. Validasi dengan zod saat pembangunan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Variabel Lingkungan dalam CI” gratis?

Ya — teks lengkap “Variabel Lingkungan dalam CI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Variabel Lingkungan dalam CI”?

Simpan rahasia di GitHub Secrets, masukkan ke build sebagai variabel lingkungan, dan akses di Vite dengan import.meta.env atau di Next.js dengan process.env. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Variabel Lingkungan dalam CI” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. GitHub Actions untuk Frontend: lint test build
  2. Deployment ke Vercel Netlify dan Cloudflare Pages
  3. Variabel Lingkungan dalam CI
  4. Pemeriksaan Lighthouse Otomatis
← Kembali ke Frontend Academy