Jak nasadit vibecoding aplikaci do produkce: Vercel, Netlify a vlastní hosting

Od localhost k reálným uživatelům

Vytvořili jste aplikaci pomocí vibecoding nástrojů — funguje lokálně, vypadá skvěle. Ale jak ji dostat k reálným uživatelům? Deployment (nasazení) je krok, kde mnoho vibecoding projektů selže. Podle State of Frontend 2025 reportu 23 % side projektů nikdy neopustí lokální prostředí kvůli nejistotě ohledně deploymentu.

Moderní hosting platformy jako Vercel a Netlify tento proces dramaticky zjednodušují. Deploy je otázkou minut, ne dnů. Ale musíte pochopit, co se děje pod kapotou — DNS, SSL certifikáty, environment variables a CI/CD pipeline.

Vercel: Nejlepší volba pro React + Vite projekty

Vercel je hosting platforma optimalizovaná pro frontendové frameworky. Pro vibecoding projekty (React + Vite + Tailwind) je ideální volbou díky:

• Zero-config deployment: Připojíte GitHub repo a Vercel automaticky detekuje Vite, nastaví build příkaz a nasadí.
• Preview deployments: Každý pull request dostane vlastní URL pro testování. Ideální pro code review.
• Edge Network: Statické soubory servírované z 90+ datacenter po celém světě. Uživatel v Praze dostane odpověď z Frankfurtu za ~5 ms.
• Automatické SSL: HTTPS certifikáty jsou nastavené automaticky, včetně vlastních domén.

Postup nasazení na Vercel:

1. Pushněte projekt na GitHub
2. Přejděte na vercel.com → New Project → Import Git Repository
3. Vyberte framework preset „Vite"
4. Nastavte environment variables (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY)
5. Klikněte Deploy — hotovo za 60 sekund

Důležité nastavení pro SPA (Single Page Application): Vytvořte soubor vercel.json v kořenu projektu s rewrite pravidlem, aby všechny routes směřovaly na index.html:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Netlify: Alternativa s formuláři a funkcemi

Netlify je přímý konkurent Vercelu s několika unikátními funkcemi:

• Netlify Forms: Zpracování formulářů bez backendu — stačí přidat atribut netlify k form tagu.
• Netlify Functions: Serverless funkce (AWS Lambda pod kapotou) pro backendovou logiku.
• Split testing: A/B testování různých verzí aplikace na úrovni deploymentu.
• Identity: Vestavěná autentizace (alternativa k Supabase Auth pro jednoduché projekty).

Nasazení na Netlify je podobně jednoduché: připojíte GitHub, nastavíte build command (npm run build), publish directory (dist) a environment variables.

Pro SPA routing vytvořte soubor public/_redirects:

/*    /index.html   200

Vercel vs Netlify vs vlastní VPS: Srovnání

Kritérium	Vercel	Netlify	VPS (Hetzner)
Free tier	100 GB bandwidth	100 GB bandwidth	—
Cena (pro)	$20/měsíc	$19/měsíc	€4–10/měsíc
Nasazení	Git push	Git push	Manuální/CI
SSL	Automatický	Automatický	Let's Encrypt
Preview deploys	✅	✅	❌
Custom backend	Serverless	Serverless	Plná kontrola
Ideální pro	React SPA/SSR	Statické weby	Full-stack

Nastavení vlastní domény

Vlastní doména (.cz, .com) je nutnost pro profesionální projekt. Postup:

1. Koupě domény: Doporučujeme Cloudflare Registrar (nejnižší ceny, bez marže) nebo české Wedos.cz.
2. DNS nastavení: Přidejte CNAME záznam směřující na cname.vercel-dns.com (Vercel) nebo apex-loadbalancer.netlify.com (Netlify).
3. SSL certifikát: Obě platformy automaticky vygenerují a obnoví SSL certifikát po ověření DNS.
4. Ověření: DNS propagace trvá 1–48 hodin (obvykle 5–30 minut).

Environment variables: Bezpečné ukládání tajemství

Nikdy necommitujte API klíče do Gitu. Používejte environment variables:

• VITE_SUPABASE_URL — URL vaší Supabase instance (veřejný, prefix VITE_)
• VITE_SUPABASE_PUBLISHABLE_KEY — Anon klíč Supabase (veřejný, prefix VITE_)
• Privátní klíče — Stripe secret key, API klíče třetích stran — NIKDY s prefixem VITE_, pouze v serverless funkcích

Pravidlo: Cokoliv s prefixem VITE_ je viditelné v prohlížeči. Ukládejte tam pouze veřejné klíče.

CI/CD pipeline pro vibecoding

Continuous Integration / Continuous Deployment automatizuje testování a nasazení. Minimální pipeline:

1. Push do main: Spustí build a deploy na produkci
2. Push do feature branch: Spustí build, testy a vytvoří preview deployment
3. Pull request: Automatický code check (TypeScript, ESLint) + preview URL

Vercel a Netlify toto nabízejí out-of-the-box. Pro pokročilé workflow (E2E testy, Lighthouse audit) přidejte GitHub Actions.

Monitoring a post-deploy checklist

Po nasazení ověřte:

• ✅ Všechny stránky se načítají správně (zkontrolujte SPA routing)
• ✅ Environment variables jsou nastavené (otevřete DevTools → Console, hledejte chyby)
• ✅ Supabase připojení funguje (registrace, přihlášení, CRUD operace)
• ✅ SSL certifikát je platný (zelený zámek v prohlížeči)
• ✅ Lighthouse score: Performance 90+, Accessibility 90+, SEO 90+
• ✅ Open Graph tagy fungují (vložte URL do LinkedIn/Twitter preview tool)
• ✅ Analytics jsou aktivní (Google Analytics, Microsoft Clarity)
• ✅ Error monitoring je nastavený (Sentry, LogRocket)