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á!