Leírtad egy AI eszköznek, milyen weboldalt szeretnél, felépítette, és az előnézet jól néz ki. Aztán megpróbálod kitenni a cegednev.hu címre, és hirtelen semmi sem világos. Az eszköz a saját aldomainjén ad egy előnézeti linket, a domain szolgáltatód DNS rekordokat kér, és senki nem magyarázta el, hogyan kapcsolódik a kettő.

Így csinálom én, amikor egy ügyfél Lovable, Bolt vagy v0 projektet hoz, amit élesíteni kell. Az eszközök a részletekben különböznek, de a legtöbb ugyanolyan projektet generál: Vite-tal épített React alkalmazást, Tailwind stílusozással.

1. Told ki a kódot az eszközből

Mielőtt bármi mást csinálnál, szerezz egy olyan másolatot a kódról, ami a tiéd. A legtöbb eszköz szinkronizálni tudja a projektet egy GitHub tárolóval. Ezt csináld meg elsőként, akkor is, ha az eszköz közvetlenül is tud publikálni. Ha van repository-d, a forráskód a tiéd, bárkit megbízhatsz a továbbfejlesztéssel, és nem vagy egyetlen platform tárhelyéhez kötve.

2. Ellenőrizd, hogy a saját gépeden lefordul

Klónozd le a tárolót, és futtasd a telepítést meg a buildet. Egy tipikus Vite projektnél ez így néz ki:

npm install
npm run build

Ha itt hibát kapsz, bármelyik tárhelyen hibát fogsz kapni. Itt javítsd ki. Gyakori okok: hiányzó csomagok, TypeScript hibák, amiket az előnézet figyelmen kívül hagyott, és fájlok, amelyeket más kis- és nagybetűs írásmóddal neveztek át.

3. Válassz tárhelyet

Statikus oldalhoz vagy egyoldalas alkalmazáshoz elég egy statikus tárhely, és többnek van olyan ingyenes csomagja, ami egy kisvállalkozás oldalához elég:

Cloudflare Pages: ingyenes, gyors, és a DNS ugyanabban a fiókban lehet.
Netlify: egyszerű Git alapú telepítés, beépített űrlapkezelés.
Vercel: jó React projektekhez, és a Next.js természetes otthona.

Ha a projektnek van háttérrendszere (adatbázis, felhasználói belépés), a frontend továbbra is lehet ezeken, a háttér viszont általában ott marad, ahová az eszköz tette, gyakran a Supabase-en.

4. Állítsd be a buildet

Kösd össze a tárolót a tárhellyel, és add meg, hogyan kell fordítani. Egy tipikus Vite projektnél:

Build parancs: npm run build
Kimeneti könyvtár: dist

5. Add meg a környezeti változókat

Ez a lépés rontja el a legtöbb élesítést. Az alkalmazás az AI eszköz előnézetében azért működik, mert ott a kulcsok már be vannak állítva. Az új tárhelyen hiányoznak, így az oldal betölt, de semmi nem működik, ami adatot igényel.

Keresd a .env fájlt, vagy az import.meta.env hivatkozásokat a kódban. Minden változót fel kell venned a tárhely beállításai között. Vite-ban a böngészőnek szánt változók neve VITE_ előtaggal kezdődik. Ne feledd, hogy a frontend kódban minden látható a látogatók számára, tehát titkos kulcs oda nem való.

6. Javítsd az útválasztást egyoldalas alkalmazásnál

Megnyitod a főoldalt, rákattintasz egy linkre, működik. Aztán frissítesz a /arak oldalon, és 404-et kapsz. Az egyoldalas alkalmazásnak egyetlen valódi HTML fájlja van, és a tárhely nem tudja, hogy a /arak címnek is azt kell betöltenie.

Cloudflare Pages-en vagy Netlify-on ezt megoldja egy _redirects nevű fájl a public mappában:

/*    /index.html   200

Hogyan tedd fel a Lovable vagy Bolt weboldalad a saját domainedre (lépésről lépésre)

1. Told ki a kódot az eszközből

2. Ellenőrizd, hogy a saját gépeden lefordul

3. Válassz tárhelyet

4. Állítsd be a buildet

5. Add meg a környezeti változókat

6. Javítsd az útválasztást egyoldalas alkalmazásnál

7. Kapcsold rá a domaint

8. Ha van e-mailed a domainen

Mi nincs ebben

Elakadtál valamelyik lépésnél?