10 Élesítés – Vercel deploy (15:32)

Az alkalmazás élesítése – Deploy a Vercel segítségével

Ez a lecke a szoftverfejlesztési folyamat utolsó fázisával, az élesítéssel foglalkozik. Megismered a két fő tárhelyszolgáltatói megközelítést, részletesen végigmegyünk azon, hogyan lehet egy elkészült projektet a Vercel platformon percek alatt közzétenni az interneten, és szó lesz arról is, hogyan illeszkedik ez a lépés a teljes fejlesztési folyamatba.

A kiindulási helyzet és a cél

Ott tartunk, hogy elkészült a sorsoló alkalmazásunk, és szeretnénk azt közzétenni az interneten – például azért, hogy egy kollégánk is el tudja érni és használni tudja webinár közben. A fájlok már fent vannak a GitHub-on, tehát online elérhetők, de ez önmagában még nem elég.

A GitHub alaprendszere csak a fájlokat tárolja – futtatni nem tudja őket. Ahhoz, hogy az alkalmazás ténylegesen működjön egy böngészőben, szükség van egy olyan szolgáltatásra, amely a kódot futtatja is.

A célunk tehát az, hogy legyen egy doménnév, amit ha beír egy látogató, eljut arra a felületre, ahol használni tudja a sorsolót.

A két fő tárhelyszolgáltatói megközelítés

1. Klasszikus tárhelyszolgáltató

Ha foglalkoztál már weboldalkészítéssel, biztosan ismered ezt a megoldást. A klasszikus tárhelyszolgáltatók egy részét WordPress-re optimalizálták, másik részük egyszerűen csak ad egy szeletet a saját gépparkjukból: kapsz egy bizonyos tárhely-mennyiséget és a mögötte lévő hardvert.

Oda tudod feltölteni a fájlaidat, és ha megfelelően összeköted a doménnévvel, elérhető lesz a weboldalad.
Magyar piacon ilyen például a Rackhost vagy a Netmasters.
Ezek a megoldások leginkább azoknak jók, akik valamilyen klasszikus weboldalt szeretnének üzemeltetni.

Hátrányai:

A fájlokat kézzel kell feltöltened (általában FTP-vel vagy fájlmenedzselő rendszerrel).
Ha módosítasz valamit a kódon, az új verziót is fel kell töltened manuálisan.
Fizetős, akkor is, ha a weboldalnak heti egyetlen látogatója van.

Hosszú távon lehet, hogy lesz egy ilyen tárhelyed, ahova bizonyos weboldalaidat felteszed – de ez már nem vibe coding téma.

2. Jamstack Hosting

Ez egy újabb típusú szolgáltatói csoport, amely egy egyszerű igényre jött létre: kihagyni a kézzel történő fájlfeltöltést. A Jamstack hosting nem FTP-vel működik, hanem közvetlenül a GitHub-ra figyel.

Megmondod neki, melyik a te repód, és onnantól kezdve automatikusan szinkronban tartja az élő weboldaladat a GitHub-on lévő kóddal.

Ha módosítasz valamit és feltolod (push) a GitHub-ra, az élő oldal automatikusan frissítheti a kódot – bár ezt nem feltétlenül ajánlott automatikusan beállítani.
Általában manuálisan szokás élesíteni: amikor az új verziót feltöltöd, akkor külön manuálisan nyomod meg azt is, hogy az élő oldalon is frissüljön.
Megoldható az is, hogy csak a GitHub-dal dolgozol, és a Jamstack szolgáltató gondoskodik arról, hogy mindig a friss verzió legyen fent.

Az árazásról:

Ezek a szolgáltatók általában kezdetben ingyenesek bizonyos szintig – ez egyfajta csali.
Ingyen feltöltheted a projektjeidet, de ha kinövöd a keretet (sok látogató, nagy forgalom, egyedi doménnév), akkor havi előfizetési díj léphet életbe, ami a használattól függően növekedhet.
Az elején azonban teljesen ingyenesek, és kifejezetten GitHub-os projektek működtetésére jöttek létre.

A legnépszerűbb Jamstack szolgáltatók:

Vercel
Cloudflare Pages
Netlify

Folyamatosan jelennek meg új szolgáltatók is a piacon, de ez a három a legelterjedtebb. Mindegyik valamilyen szinten ingyenes.

Miért a Vercel?

Mi most a Vercel-t fogjuk használni, mert ez a leginkább ideillő egy első projekthez:

Gyors a regisztráció és a beállítás is – pár kattintás az egész.
Rengeteg oktatóvideó érhető el hozzá, ha elakadnál.
Általában érdemes olyan szoftvereket választani, amelyeket mások is szeretnek és széles körben használnak – ezek nagy valószínűséggel a legjobbak, és az oktatóanyagok is sokat segítenek, ha valahol elakadsz.

Fontos előre tudni: A Vercel felületén rengeteg technikai kifejezéssel fogsz találkozni – például Build, Environment Variable, Edge Function és hasonlók. Ezeket nem feltétlenül kell mind érteni, a Claude AI is el tudja magyarázni őket, de azért okozhatnak pillanatnyi zavart. Érdemes erre előre felkészülni – ez a téma nem a legegyszerűbb, de szükséges, ha élesíteni szeretnél valamit.

Regisztráció a Vercelen

A regisztrációhoz a legkényelmesebb a GitHub-fiókot használni – ha már van GitHub-fiókod, azzal tudsz bejelentkezni.

A regisztráció lépései:

Bejelentkezés GitHub-fiókkal (a példában: VibeCoder237).
Telefonszám megadása és megerősítése (SMS-kód, pl. 6647).
A rendszer megkérdezi, hogy azonnal a fizetős Pro csomagot szeretnéd-e – ezt nem kell választani, az ingyenes csomag tökéletesen megfelel kezdetnek.
Felhasználónév megadása (pl. VibeCoder237).

Ezzel a regisztráció kész.

A „deploy” fogalma

Mielőtt nekiállunk az első projekt feltöltésének, érdemes megismerni a legfontosabb kulcskifejezést: a deploy-t.

A deploy nagyjából annyit jelent, mint telepítés – vagy szabadabban fordítva: kilövés.
Jó memotechnika: olyan, mintha a weboldalunkat kilőnénk a világhálóra, mint egy rakétát.

Hogyan működik a deploy folyamata:

Megnyomod a Deploy gombot.
A Vercel a háttérben ellenőrzi a fájlokat.
Átalakítja őket olyan formátumba, hogy online szerveren is tudjanak működni.
Elhelyezi a saját infrastruktúráján.

Ez általában 30–60 másodpercet vesz igénybe, még nagyobb fájloknál is. Ha ennél sokkal tovább tart, valószínűleg valami probléma van.

Fontos korlát: Nem mindent lehet Vercelre feltölteni. Például:

Mobil applikációk másképp működnek.
Komplexebb háttérrendszerek más típusú szolgáltatót igényelnek.

Egy tipikus HTML-alapú honlapszerű projekt azonban általában simán működik a Vercelen – és a sorsolónk is ilyen.

Az első projekt deployolása lépésről lépésre

A Vercel vezérlőpultja

Miután bejelentkeztél, az alap vezérlőpulton (dashboard) látod a különböző projektjeidet. Rengeteg menüpont és kifejezés található itt – ezeket ebben a leckében nem nézzük végig mélyen, csak az új projekt hozzáadásának folyamatát mutatjuk be.

GitHub-repo importálása

Kattints az „Add New Project” (Új projekt hozzáadása) gombra.
Válaszd a GitHub-ról való importálást.
Engedélyezd a Vercel számára, hogy hozzáférjen a GitHub-repóidhoz – ezzel hozzáfér az összes repódhoz.
Válaszd ki az importálni kívánt repót: a sorsoló projektet.
Kattints az Import gombra.

Beállítások és deploy

A rendszer feltesz néhány kérdést:

Hova legyen rakva és mi legyen a neve – alapértelmezetten ugyanaz marad: „sorsoló”.
Preset beállítások – komplikáltabb projekteknél ezek szükségesek lehetnek, de a mi esetünkben semmilyen presetet nem kell beállítani.
Egyéb haladó beállítások szintén elérhetők, de most ezekre nincs szükség.

Kattints a Deploy gombra. A rendszer azonnal elkezdi a munkát: megjelenik egy folyamatábra a logokkal, és néhány másodperc alatt elkészül.

Az élő oldal megtekintése

A deploy befejezése után kattints a „Visit Deployment” gombra. Az alkalmazás mostantól elérhető a következő címen:

Ha bárki beírja ezt a címet a böngészőjébe – akár inkognitó módban is –, ugyanaz az oldal jelenik meg. Az alkalmazás ténylegesen él az interneten, és bárki használhatja.

Az élő link és a doménnév kérdése

Hogyan épül fel az aldoménes link?

A Vercel egy aldoménes megoldást alkalmaz:

A Vercelnek van egy fő doménje:
Ez elé kerül az általad megadott aldomén:
Eredmény:

Ez hasonló más online weboldalkészítő szoftverekhez. Ha az általad kért aldomén már foglalt, a Vercel egy hasonlót keres helyette.

Mikor elég ez az aldoménes link?

Ez a megoldás teljesen megfelelő számos esetben:

Saját használatra szánt egyszerű szoftverekhez.
Landing oldalakhoz – például egy vállalkozás feliratkozós csalijához.
Egyszerű sales oldalakhoz.
Olyan projektekhez, ahol nem szükséges egyedi doménnév.

Mikor kell saját domain név?

Ha például van egy éttermed, és azt szeretnéd, hogy a weboldalad neve is tükrözze a márkádat (pl. ), akkor saját domainre van szükség. Ezt máshol kell megvásárolni – például egy tárhelyszolgáltatónál –, majd hozzá lehet kötni a Vercel-projekthez.

Hosszabb távon az is egy jó megközelítés, hogy van egy saját domaineddel, és az alá aldomainként rakosgatod be a különböző szoftvereidet.

Ha nem akarod, hogy bárki más lássa az oldalt, vagy nem adod meg a linket másoknak, akkor az ingyenes aldomaines megoldás is teljesen megfelelő – és semmibe sem kerül.

A Vercel vezérlőpult és a projekt beállításai

Miután visszatérsz a dashboardra, már látni fogod az újonnan létrehozott sorsoló projektet. A dashboard mutatja:

A különböző projektjeidet.
A felhasznált erőforrások mennyiségét.

Ha bemész a sorsoló projektbe, rengeteg beállítási lehetőséget találsz – mind a vezérlőpulton, mind a bal oldali menüben. Ezeket komplexebb szoftverek esetén kell majd részletesebben megismerni; ebben a leckében nem megyünk beléjük mélyen.

Az ingyenes csomag logikájáról: A Vercelnek is pénzbe kerül, hogy fenntartsa ezt az infrastruktúrát. Az ingyenes csomag a „csali”: ingyen elkezdheted használni, és ha majd több erőforrásra van szükséged, akkor fizetsz a plusz kapacitásért. Az ingyenes kerettel azonban tesztelés és tanulás közben teljesen jól meg lehet lenni.

Visszatekintés: a teljes fejlesztési folyamat

A 7 pillér és a frontend

Ha emlékszel a korábban tanult 7 pillérre (amelyek egy szoftver architektúrájához szükségesek), az ebben a kurzusban elvégzett munka leginkább a frontendet érintette – tehát azt, hogy hogyan néz ki az alkalmazás. Most pedig az élesítést is elvégeztük.

A cél az volt, hogy ne egyszerre mindenről beszéljünk, mert akkor semmi sem ragad meg igazán. Láthatod, hogy nem kell minden egyes szoftverhez minden részletet ismerni – ennyi tudás is elég egy kis szoftver létrehozásához.

Az 5 lépéses folyamat

Végigmentünk egy alkalmazás elkészítésének teljes folyamatán:

Ötlet – egy problémából született egy ötlet.
Tervezés – Plan móddal megterveztük a rendszert.
Felépítés – a rendszer felépítette az alkalmazást.
Iteráció – új funkciókat adtunk hozzá.
Élesítés – közzétettük a Vercelen.

Nem a leghatékonyabb módon dolgoztunk – de nem is ez volt a cél. A cél az volt, hogy megérezd, hogyan működik az egész folyamat. Összesen nagyjából tíz prompttal, tíz utasítással lett egy kész, ténylegesen használható szoftverünk.

Mi a következő lépés?

Most, hogy végigmentél ezen a folyamaton, a legfontosabb ajánlás: próbáld ki magad is!

Készíts egy kis projektet, és vidd végig az összes fázison.
Rakd ki Vercelre is.

Ha most még nincs ötleted, vagy nem egyértelmű, hogy funkcionálisan mire vagy képes, készültek különböző gyakorló feladat ötletek – amelyeket biztosan meg fogsz tudni csinálni ennyi tudással is. Ezek egy külön leckében lesznek részletezve.

A kurzus folytatásában egyre több funkciót fogsz megismerni, egyre mélyebbre megyünk a technikai részletekbe, és a vibe coding területén is egyre ügyesebbé válsz. A legtöbbet azonban a gyakorlatból fogod tanulni – ezért érdemes még a következő modul előtt kipróbálni legalább egy gyakorló feladatot.

Ha mégis inkább először végig szeretnéd nézni az összes anyagot, és csak utána gyakorolsz, az is teljesen rendben van – mindenki másképp tanul. A lényeg, hogy minél több dolgot kipróbálj, és minél jobb szoftvereket, összekötéseket és kis appokat hozz létre.

Ez a lecke lezárta a sorsoló alkalmazás teljes fejlesztési ciklusát: az ötlettől a tervezésen és az építésen át az iterációig és az élesítésig. Megismerted a klasszikus tárhelyszolgáltatók és a Jamstack hosting közötti különbséget, megtanultad, mit jelent a deploy, és végigcsináltad az első projekt közzétételét a Vercelen. A következő lépés a saját projekt elkészítése és élesítése – hajrá!