Znalosti pro vibe coding
Co jsou environment variables?
Vaše appka potřebuje tajné klíče k platbám, e-mailům, databázi. Tohle je bezpečné místo, kam je schovat — mimo kód a mimo cizí oči.
Autor: Jindřich Fáborský · 17 let v marketingu · 2 000+ hodin vibe codingu · 180+ projektů
# tajné hodnoty mimo kód
STRIPE_KEY=sk_live_ · · · · · ·
RESEND_KEY=re_ · · · · · · · ·
DATABASE_URL=postgres:// · · ·
Rychlá odpověď
Co jsou tedy environment variables?
Vaše appka si sahá na cizí služby (platby, e-maily, databázi) a ke každé se hlásí tajným klíčem, něco jako heslem.
Environment variables (proměnné prostředí) jsou bezpečné místo, kam ty klíče uložíte mimo kód. Appka si je odtud vezme, ale v kódu ani na GitHubu nikde nestojí.
Pojmy, na které kolem toho narazíte:
Nejdřív to podstatné
Co je tajný klíč a proč na něm záleží
Než vyřešíme, kam klíče schovat, musíme si říct, co to ten klíč vlastně je a proč je tak citlivý.
Vaše appka z vibe codingu nežije sama. Sahá na cizí služby: bere platby přes Stripe, posílá e-maily, ukládá data do databáze. Ke každé se musí přihlásit, aby jí ta služba věřila. A přihlašuje se klíčem, což je vlastně heslo.
Proč je klíč citlivý? Kdo ho má, může jednat vaším jménem. S klíčem ke Stripe může někdo cizí hýbat s vašimi penězi. S adresou a heslem k databázi si přečte (nebo smaže) data všech vašich zákazníků. S klíčem k e-mailové službě rozešle spam z vaší adresy a fakturu za to pošle vám.
Nejcitlivější jsou klíče, co dávají plný přístup nebo stojí peníze
Platby, databáze, cloudové a AI služby. Tyhle hlídejte nejvíc. A není to teorie: uniklý klíč zneužijí automatické roboty do pár minut.
Ne každý klíč je tajný
Veřejný klíč vs tajný klíč
Tohle je nejdůležitější rozdíl celé stránky. Některé klíče jsou navržené tak, že je klidně uvidí celý svět. Jiné nesmí ven nikdy.
Veřejný klíč
Klidně ho uvidí celý svět
- Kde smí být: v prohlížeči, v kódu, na GitHubu
- Co říká: jen „tohle je ta a ta appka“, ne „pusť mě k datům“
- Příklad:
sb_publishable_…, Stripepk_…, měřicí ID Google Analytics - Riziko úniku: žádné, je na to stavěný
Tajný klíč
Nikdy nesmí ven
- Kde smí být: jen na serveru
- Co dává: plný přístup k datům i penězům
- Příklad:
sb_secret_…, Stripesk_…, adresa databáze - Riziko úniku: kdokoli jedná vaším jménem
Jak appce řeknete „tenhle je veřejný“?
V Next.js se veřejný klíč pozná podle prefixu NEXT_PUBLIC_. Ten Next.js pustí do prohlížeče. Tajný klíč prefix nikdy nedostane, jinak by unikl. U nás na aifirst.cz to tak reálně je: veřejný Supabase klíč jede jako NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, tajný jako SUPABASE_SECRET_KEY bez prefixu.
Chyba číslo jedna u začátečníků: dát tajný klíč do NEXT_PUBLIC_, protože „to pak funguje“. Funguje, ale klíč je rázem v prohlížeči viditelný komukoli. (U Vite je ten prefix VITE_.)
Vyzkoušejte si to
Váš tajný klíč. Kdo ho uvidí?
Ten samý klíč skončí na úplně jiném místě podle toho, kam ho napíšete. Přepínejte scénáře a sledujte dvě místa: veřejný GitHub a prohlížeč.
// tajný klíč rovnou v souboruconst KEY = "sk_live_a1b2C3d4E5f6G7h8"
Kam napíšete klíč → co s ním appka udělá.
Soubor jde na GitHub tak, jak je. Klíč čte každý, kdo má přístup k repozitáři, a na veřejném repu celý internet.
Když ten soubor běží i v prohlížeči (klientská část appky), klíč skončí i tady. Dvojí únik.
Nejhorší varianta. Klíč zůstane v Gitu i v jeho historii a automatické skenery veřejná repa pročesávají nonstop.
Přepněte scénáře nahoře. Všimněte si, že .env vás ochrání před Gitem, ale NEXT_PUBLIC_ klíč přesto vydá prohlížeči.
Kam se klíče píšou
Soubor .env (a proč .local)
Tajné klíče tedy nedáte do kódu. Kam ale ano? Do jednoho nenápadného souboru, který si zaslouží vlastní vysvětlení.
Je to obyčejný textový soubor .env (v Next.js obvykle .env.local). Na každém řádku stojí jméno proměnné a její hodnota:
# .env.local
STRIPE_SECRET_KEY=sk_live_a1b2C3d4E5f6
DATABASE_URL=postgres://…
Tenhle soubor se přidá do souboru .gitignore (seznam „tohle na GitHub nenahrávej“), takže se nikdy nedostane do kódu, který sdílíte. Appka si hodnotu vezme přes process.env.STRIPE_SECRET_KEY, aniž by ji obsahovala.
.env.local
Vaše soukromá kopie, která nikdy neopustí váš počítač. Sem patří skutečné tajné klíče.
.env.example
Šablona jen se jmény proměnných (bez hodnot). Ta do Gitu smí a řekne dalšímu člověku, co si má vyplnit.
Jednoduchý test, jestli to máte správně
Zásada Twelve-Factor App to shrnuje jednou otázkou: mohli byste svůj kód právě teď zveřejnit celému světu, aniž byste vyzradili jediné heslo nebo klíč? Když ano, máte konfiguraci správně oddělenou od kódu.
Když je appka online
Kde klíče žijí, když web běží na internetu
Váš soubor .env zůstává jen na vašem počítači, na server se nenahrává. Hosting proto musí klíče znát zvlášť.
Nejčastější hosting pro appky z vibe codingu je Vercel. Klíče se do něj zadají v Project → Settings → Environment Variables a Vercel je pak drží ve třech prostředích: Production (ostrá verze), Preview (náhledy z větví) a Development (váš počítač).
Lokálně si je stáhnete příkazem vercel env pull. Prakticky to znamená jedno: když appce po nasazení něco „nejde“ a v logu je prázdný klíč, skoro vždy je to zapomenutá proměnná ve Vercelu. Kód ji chce, ale prostředí ji nemá.
Na co si dát pozor
Co se stane, když klíč unikne
Uniklý klíč umí někdo zneužít dřív, než si toho vůbec stačíte všimnout. Data o rozsahu jsou střízlivě děsivá.
do pár minut
než boti uniklý klíč najdou a otestují
28 milionů
klíčů a hesel přibylo do veřejných GitHub repozitářů za rok 2025
64 %
prozrazených klíčů funguje i roky poté
Když klíč přesto unikne, zneplatněte ho
U vydavatele (Stripe, OpenAI, Google…) klíč zrušíte a vygenerujete nový. Tomu se říká rotace. Smazat commit nestačí, klíč zůstává v historii. Přesnou časovou osu jednoho úniku ukazuje průvodce o API, data o rozsahu shrnuje přehled Snyku.
Tohle je jen jeden dílek skládačky
Tajné klíče, Git, deploy, databáze. Kolem samotného tvoření je pár věcí, bez kterých se vibe coding neobejde. V kurzu AI First je projdeme polopaticky a v souvislostech.
21 hodin videí o AI a vibe codingu, 1 800+ absolventů, roční licence s aktualizacemi zdarma.
FAQ
Časté otázky
Co je vlastně API klíč nebo tajný klíč?+
Je to něco jako heslo, kterým se vaše appka přihlásí u cizí služby (Stripe pro platby, databáze, e-mailová služba), aby jí ta služba věřila. Kdo ten klíč má, může jednat vaším jménem, proto se s ním musí zacházet jako s heslem.
Kam mám dát API klíč, aby ho nikdo neviděl?+
Do souboru .env (v Next.js typicky .env.local) a ten přidat do .gitignore, ať se nenahraje na GitHub. Když je appka online, klíč nastavíte v prostředí hostingu (na Vercelu Settings → Environment Variables). Do samotného kódu tajný klíč nepatří nikdy.
Jaký je rozdíl mezi veřejným a tajným klíčem?+
Veřejný klíč (třeba Supabase sb_publishable_ nebo Stripe pk_) jen říká, která appka to je, a klidně ho uvidí celý svět, i v prohlížeči. Tajný klíč (sb_secret_, sk_, adresa databáze) dává plný přístup k datům a penězům, a smí být jenom na serveru. Nikdy je nepleťte.
Co znamená NEXT_PUBLIC_ a kdy ho použít?+
Prefix NEXT_PUBLIC_ řekne Next.js „tuhle hodnotu pusť do prohlížeče“. Použijte ho jen pro veřejné klíče, které stejně mají být venku. Tajný klíč do NEXT_PUBLIC_ nikdy nedávejte, zabuduje se do stránky a přečte ho kdokoli. U Vite je to obdobný prefix VITE_.
Jaký je rozdíl mezi .env a .env.local?+
Soubor s koncovkou .local je vaše soukromá kopie, která nikdy neopustí váš počítač, a patří do ní skutečné tajné klíče. Obyčejný .env se někdy používá jen na nescitlivé výchozí hodnoty, které klidně sdílíte. V Next.js dáváte reálné klíče lokálně do .env.local.
Omylem jsem nahrál klíč na GitHub. Co teď?+
Klíč berte za prozrazený, i když commit hned smažete. V historii Gitu zůstává a uniklé klíče se zneužívají velmi rychle. Jediná spolehlivá cesta je klíč u vydavatele zneplatnit a vygenerovat nový (rotace). Smazání commitu nestačí.
Jak nastavím proměnné na Vercelu, aby appka fungovala online?+
Ve Vercelu jdete do Project → Settings → Environment Variables a přidáte je pro prostředí Production, Preview a Development. Lokálně si je pak stáhnete příkazem vercel env pull do .env.local. Vaše .env se totiž na server nenahrává, hosting musí klíče znát zvlášť.
Musím proměnné prostředí nastavovat ručně, nebo to udělá Claude Code?+
Založit a pojmenovat proměnnou v .env i přidat ji do .gitignore vám Claude Code klidně udělá. Samotnou tajnou hodnotu (skutečný klíč) ale musíte vložit vy a stejně tak ji ručně přidat na Vercel. Klíče AI nevymyslí, vydává je vždy konkrétní služba.