Hack! Simpan API Key di Vercel, Biar Gak Kena Colong!

Waduh, API Key Lu Masih Nempel di Kode? Bahaya Lur!

Pernah gak sih, lagi asik-asiknya coding tengah malem sambil ngopi, terus tanpa sadar lu git push project ke GitHub? Lima menit kemudian, lu baru sadar kalau API Key OpenAI atau Firebase yang harganya selangit itu nempel manis di dalem main.js. Panik gak? Ya paniklah masa enggak! Wkwk.

Kejadian kayak gini tuh sering banget menimpa developer pemula, bahkan yang udah pro sekalipun kalau lagi mager atau kurang teliti. Masalahnya, di luar sana banyak banget bot jahat yang kerjaannya cuma scraping GitHub buat nyari kunci-kunci 'harta karun' kayak gitu. Sekali bocor, tagihan kartu kredit lu bisa bengkak atau project lu disalahgunakan orang gak bertanggung jawab. Makanya, hari ini kita bakal bahas cara paling ampuh buat nyembunyiin 'kunci rumah' digital lu itu pake fitur keren dari Vercel: Environment Variables.

Kenapa Harus Pake Environment Variables?

Gini lur, bayangin lu punya kunci brankas. Masa iya lu taro kuncinya di depan pintu rumah yang semua orang bisa liat? Kan lucu. Nah, Environment Variables (Env) itu ibarat brankas rahasia. Lu cuma manggil 'nama' kuncinya aja di dalem kode, tapi isinya disimpen di tempat yang aman dan terpisah dari source code utama.

Selain masalah keamanan, pake Env juga bikin hidup lu lebih gampang. Lu bisa bedain mana API Key buat testing (development) dan mana yang buat beneran (production). Jadi, gak ada lagi ceritanya salah kirim data gara-gara lupa ganti URL API pas mau deploy. Gaskeun kita masuk ke tutorialnya!

Langkah 1: Setting di Local (Biar Gak Bocor ke Git)

Sebelum kita loncat ke dashboard Vercel, lu wajib beresin dulu urusan di komputer lu sendiri. Caranya, bikin file namanya .env.local di root project lu. Inget ya, .env.local, bukan yang lain.

API_KEY_RAHASIA=sk-1234567890abcdefg
DATABASE_URL=mongodb+srv://user:pass@cluster.mongodb.net/

Nah, yang paling krusial nih: pastiin file .env.local itu udah masuk ke daftar .gitignore. Kalau belum, ya sama aja bohong, bakal tetep ke-upload ke GitHub kalau lu khilaf. Coba cek file .gitignore lu, pastiin ada baris ini:

# .gitignore
.env*
.env.local

Langkah 2: Masukin Key ke Dashboard Vercel

Sekarang, gimana caranya Vercel tau isi API Key itu kalau filenya gak kita upload? Nah, di sinilah keajaibannya. Lu harus input manual lewat dashboard mereka. Caranya gampang banget:

• Buka dashboard Vercel dan pilih project lu.
• Klik tab Settings di bagian atas.
• Di sidebar kiri, cari menu Environment Variables.
• Lu bakal liat form buat ngisi Key dan Value.
• Masukin nama variabelnya (misal: API_KEY_RAHASIA) dan isinya.
• Klik Save.

Di sini lu juga bisa milih, variabel ini mau dipake di mana aja. Ada pilihan Production, Preview, sama Development. Kalau itu key buat database beneran, ya centang yang Production aja biar aman jaya.

Langkah 3: Cara Manggilnya di Kode

Setelah di-set di dashboard, sekarang saatnya kita panggil di dalem kode project kita. Kalau lu pake framework kayak Next.js, cara manggilnya simpel banget. Lu tinggal pake syntax process.env.

// Contoh penggunaan di Node.js atau Next.js Server Side
const apiKey = process.env.API_KEY_RAHASIA;

async function getData() {
  const res = await fetch(`https://api.keren.com/data?key=${apiKey}`);
  return res.json();
}

Tapi hati-hati lur! Kalau lu mau variabel itu bisa dibaca di sisi browser (client-side), biasanya framework kayak Next.js minta lu nambahin prefix NEXT_PUBLIC_ di depan nama variabelnya. Contohnya: NEXT_PUBLIC_ANALYTICS_ID. Kalau gak pake itu, variabelnya bakal undefined pas dipanggil di komponen React. Tapi inget, jangan kasih prefix itu buat API Key yang sifatnya rahasia banget ya!

Tips Pro: Pake Vercel CLI Biar Gak Ribet Copy-Paste

Kalo lu tipe developer yang males bolak-balik buka browser (alias tim mager), lu bisa pake Vercel CLI. Ini ngebantu banget buat narik data Env dari dashboard langsung ke local machine lu. Tinggal install CLI-nya, terus jalanin command sakti ini:

vercel env pull .env.local

Command ini bakal otomatis bikin file .env.local yang isinya sama persis sama yang ada di dashboard Vercel lu. Jadi lu gak perlu lagi ngetik satu-satu manual. Efisien banget kan?

Intinya Sih...

Keamanan itu bukan opsional, tapi kewajiban. Jangan sampe kerja keras lu berhari-hari ilang gitu aja gara-gara kecerobohan kecil. Nyimpen API Key di Environment Variables itu langkah paling dasar tapi paling penting buat jaga project lu tetep aman. Selain itu, cara ini bikin workflow lu lebih rapi dan profesional.

Gimana, masih ada yang berani hardcode API Key di dalem file JS-nya? Coba jujur, siapa yang pernah kena 'tegur' tagihan API gara-gara kuncinya bocor di GitHub?

FAQ (Pertanyaan Umum)