A Lovable, a Bolt vagy egy másik AI-alapú fejlesztőeszköz segítségével készült alkalmazás telepítése WebOké-tárhelyre

Készített egy alkalmazást a Lovable, a Bolt vagy egy másik AI-építő segítségével, és szeretné azt a saját domainjén, a WebOké szolgáltatásával futtatni? Ez lehetséges. Ebből a cikkből megtudhatja, hogyan töltheti le a kódot az AI-építőből, hogyan buildelheti és töltheti fel az alkalmazást, és hogyan végezheti el ezt a GitHub automatikusan Ön helyett.

1. Milyen típusú alkalmazása van?

Nyissa meg a projektjében a package.json fájlt. Ebből látható, milyen típusú alkalmazásról van szó.

• Statikus alkalmazás (React és Vite). A package.json fájlban szerepel a vite, de nincs benne szerverkeretrendszer. Az npm run build paranccsal létrejön egy dist mappa, amely egyszerű HTML-, JavaScript- és CSS-fájlokat tartalmaz. Ezeket a public_html mappába kell feltöltenie. Ez minden tárhelycsomagon működik. A Bolttal készült alkalmazások nagy része és a Lovable régebbi alkalmazásai így épülnek fel.
• Saját szerverrel rendelkező alkalmazás. A Lovable 2026. május 13. óta TanStack Start alapú alkalmazásokat készít: ilyenkor a package.json fájlban szerepel a @tanstack/react-start. Egy ilyen alkalmazás szerveroldali kódot futtat, ezért különálló fájlokként a public_html mappában nem működik. Node.js-alkalmazásként kell beállítania (lásd a 6. pontot). Ugyanez érvényes a többi saját szerverrel rendelkező alkalmazásra is, például egy Express-backendre.
• Supabase vagy Lovable Cloud backendet használó alkalmazás. Ebben az esetben az adatbázis, a bejelentkezés és a függvények a Supabase-nél vagy a Lovable-nél maradnak. A WebOké tárhelyre csak a felhasználói felületet (a front-endet) kell feltöltenie. A buildeléskor azonban meg kell adnia a Supabase címét és nyilvános kulcsát (lásd az 5. pontot).

2. A kód letöltése az AI-építőből a GitHubon keresztül

A Lovable és a Bolt a projektjét egy saját GitHub-repositoryba tudja menteni. A módosítások ilyenkor mindkét irányba szinkronizálódnak: amit az AI-építőben módosít, az megjelenik a GitHubon, és amit a GitHubon módosít, az visszakerül az AI-építőbe.

A Lovable-ben:

1. Nyissa meg a projektjét, és lépjen a Project settings > Git > GitHub menüpontra.
2. Kattintson az Add connection gombra, és adjon hozzáférést a Lovable alkalmazásnak a GitHub-fiókjához.
3. Az Accounts résznél kattintson a Connect gombra. A Lovable létrehoz egy privát repositoryt, és folyamatosan frissíti azt.

GitHub nélkül is megoldható: a Project settings > Git menüpontban található Download codebase lehetőséggel letöltheti a kódot (fizetős Lovable-előfizetés esetén).

A Boltban:

1. Nyissa meg a projektjét, és kattintson a jobb felső sarokban található GitHub-ikonra.
2. Jelentkezzen be a GitHubra, kattintson az Authorize gombra, és telepítse a Bolt GitHub-alkalmazását.
3. Adjon nevet a repositorynak, majd kattintson a Create repository gombra. A Bolt ezután a main branchben dolgozik.

3. Statikus alkalmazás buildelése és feltöltése

Az alkalmazást a saját számítógépén kell buildelnie. Ehhez Node.js szükséges, 22-es verzió (a Vite jelenlegi verziója legalább 20.19-es vagy 22.12-es verziót igényel).

1. Töltse le a kódot: futtassa a git clone parancsot a repositoryjára, vagy csomagolja ki a letöltött fájlt.
2. Nyisson egy terminált a projekt mappájában, és telepítse a csomagokat az npm ci paranccsal (vagy az npm install paranccsal, ha nincs package-lock.json fájl).
3. Buildelje az alkalmazást az npm run build paranccsal. Ekkor létrejön egy dist mappa, amely egy index.html fájlt és egy assets mappát tartalmaz.
4. Töltse fel a dist mappa tartalmát a domains/sajatdomain.hu/public_html mappába egy FTP-programmal vagy a DirectAdmin Fájlkezelőjével. Tehát ne magát a dist mappát töltse fel, és ne a forráskódot vagy a node_modules mappát.
5. Helyezze el az alábbi .htaccess fájlt a public_html mappában.

Egy több oldalból álló (routert használó) alkalmazás a böngészőben olyan címeket jelenít meg, mint például sajatdomain.hu/rolunk. Ezek az oldalak fájlként nem léteznek a szerveren. Ha egy ilyen oldalt frissít, vagy közvetlenül a hivatkozással nyitja meg, 404-es hibát kap. Ezzel a .htaccess fájllal a szerver ezeket a címeket az index.html fájlra irányítja, az alkalmazás pedig a megfelelő oldalt jeleníti meg:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^assets/ - [R=404,L]
RewriteRule ^ index.html [L]

A létező fájlokat és mappákat a szerver a szokásos módon jeleníti meg. Ha az assets mappából hiányzik egy fájl, valódi 404-es hiba jelenik meg, így könnyebben észreveheti a hibát. Minden más kérés az alkalmazáshoz kerül.

4. Az alkalmazás elhelyezése egy almappában

Szeretné, ha az alkalmazás nem a sajatdomain.hu, hanem a sajatdomain.hu/app címen érhető el? Ezt az alkalmazásnak már a buildeléskor tudnia kell. Ellenkező esetben a böngésző a fájlokat a /app/assets helyett a /assets mappában keresi, és a képernyő fehér marad.

1. Állítsa be a vite.config.js (vagy vite.config.ts) fájlban a base: '/app/' opciót.
2. Adja meg ugyanezt az útvonalat a routernek is. React Router esetén ezt a <BrowserRouter basename={import.meta.env.BASE_URL}> beállítással teheti meg.
3. Buildelje újra az alkalmazást, és töltse fel a dist mappa tartalmát a public_html/app mappába.
4. Helyezze el a public_html/app/.htaccess helyen ugyanazt a fájlt, mint fent, de RewriteBase /app/ beállítással.

5. Supabase, Lovable Cloud és egyéb beállítások (env-változók)

A VITE_ előtaggal kezdődő beállításokat, például a VITE_SUPABASE_URL és a VITE_SUPABASE_PUBLISHABLE_KEY változót (régebbi projektekben VITE_SUPABASE_ANON_KEY), a Vite a buildelés során beépíti a JavaScript-fájlokba. Ezeket utólag a szerveren már nem lehet beállítani.

• Az értékeket a projektje .env fájljában találja. A neveket pontosan így vegye át.
• Ha a projektjében nincs .env fájl, hozza létre a projektmappában, mielőtt lefuttatja az npm run build parancsot. GitHub Actions használata esetén secretként adja meg őket (lásd a 7. pontot).
• Ha módosított egy értéket, buildelje és töltse fel újra az alkalmazást.

6. Saját szerverrel rendelkező alkalmazás: Node.js-alkalmazásként

A szerverkódot tartalmazó alkalmazásokat, például egy Lovable-ből származó TanStack Start-alkalmazást, a DirectAdmin Setup Node.js App menüpontjával állíthatja be. Ennek menetéről a Node.js aktiválása a DirectAdminban című cikkben olvashat. Egy TanStack Start-alkalmazás esetén a lépések a következők:

1. Buildelje az alkalmazást a számítógépén a NITRO_PRESET=node-server npm run build paranccsal. Ekkor létrejön egy .output mappa.
2. Hozzon létre egy alkalmazást a Setup Node.js App menüpontban, Node.js 22 verzióval és egy public_html mappán kívüli könyvtárral, például apps/sajatapp.
3. Töltse fel a .output mappát ebbe a könyvtárba.
4. Ugyanebben a könyvtárban hozzon létre egy start.cjs fájlt ezzel az egy sorral, majd adja meg a start.cjs fájlt az Application startup file mezőben:

   import('./.output/server/index.mjs');

5. A szerver által igényelt beállításokat, például a SUPABASE_URL és a SUPABASE_PUBLISHABLE_KEY értékét, az Environment variables részben adja meg.
6. Kattintson a Restart gombra. Ezt minden új feltöltés után is tegye meg.

A start.cjs fájlra azért van szükség, mert a .output szervere modern JavaScript-modul (.mjs), a Node.js-környezet viszont a régi módon tölti be az indítófájlt. Ha az alkalmazás 503-as hibát ad, nézze meg az alkalmazás könyvtárában található stderr.log fájlt.

7. Automatikus telepítés GitHub Actions segítségével

A GitHub Actions segítségével a GitHub a main ágon végzett minden változtatáskor lefordítja (buildeli) az alkalmazását, és az eredményt feltölti a csomagjára. Mivel a Lovable és a Bolt a GitHubba ír, az AI-alapú alkalmazásépítőben végzett módosítás így néhány perc múlva már elérhető online. A DirectAdmin Git-funkciója nem buildel semmit, csak elhelyezi a fájlokat, ezért egy Vite-alkalmazáshoz a GitHub Actions kényelmesebb megoldás.

Jelszavakat és kulcsokat soha ne helyezzen el a repositoryjában, hanem secretként tárolja őket a GitHubon:

1. Nyissa meg a repositoryját a GitHubon, és lépjen a Settings > Secrets and variables > Actions menüpontra.
2. Kattintson a New repository secret gombra, adja meg a nevet és az értéket, majd kattintson az Add secret gombra. Ezt végezze el a választott változat minden secretjére.
3. Hozza létre a repositoryjában a .github/workflows/deploy.yml fájlt az alábbi két példa egyikével.
4. A következő változtatás után az Actions fülön ellenőrizheti, hogy sikeres volt-e a folyamat. A Run workflow gombbal kézzel is elindíthatja.

A változat: FTPS-en keresztül (minden tárhelycsomaghoz). Hozzon létre a DirectAdminban egy külön FTP-fiókot a GitHub számára, a Root Directory beállításnál a Domain opcióval (lásd: Hogyan működik az FTP a WebOkénál?). Secretek: FTP_SERVER (a csomagja szerverneve, például linux2023.webawere.nl, nem a domainneve), FTP_USERNAME (a teljes név, például github@sajatdomain.hu), FTP_PASSWORD, valamint az alkalmazása VITE_-értékei.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - uses: SamKirkland/FTP-Deploy-Action@v4.4.0
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          protocol: ftps
          port: 21
          local-dir: ./dist/
          server-dir: public_html/

B változat: SSH-n keresztül rsync segítségével (SSH-val rendelkező csomagokhoz). Az SSH a Power Webhost Three és Four, az AI Wordpress Three és a Power Reseller csomagban érhető el, az 1967-es porton, kizárólag kulccsal (lásd: SSH-hozzáférés és a Terminal a DirectAdminban).

1. Hozzon létre a számítógépén egy külön, jelszó nélküli kulcsot a GitHub számára: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Illessze be a github-deploy.pub tartalmát a DirectAdminban az SSH Keys > PASTE KEY menüpontnál.
3. A github-deploy (a privát kulcs) tartalmát mentse el az SSH_PRIVATE_KEY secretbe. Ezután törölje a fájlt a számítógépéről.
4. Futtassa a ssh-keyscan -p 1967 linux2023.webawere.nl parancsot, és a kimenetet mentse el az SSH_KNOWN_HOSTS secretbe. Így a GitHub ellenőrzi, hogy valóban az Ön szerveréhez csatlakozik.
5. Adja meg secretként az SSH_HOST (a szervernév), az SSH_USER (a DA-felhasználóneve), a DOMEIN (például sajatdomain.hu) értékét, valamint a VITE_-értékeket is.

name: Build and deploy

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v7
      - uses: actions/setup-node@v7
        with:
          node-version: 22
          cache: npm
      - run: npm ci
      - run: npm run build
        env:
          VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
          VITE_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.VITE_SUPABASE_PUBLISHABLE_KEY }}
      - name: Deploy
        env:
          SSH_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_USER: ${{ secrets.SSH_USER }}
          DOMEIN: ${{ secrets.DOMEIN }}
        run: |
          mkdir -p ~/.ssh
          printf '%s\n' "$SSH_KEY" > ~/.ssh/deploy_key
          chmod 600 ~/.ssh/deploy_key
          printf '%s\n' "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
          rsync -rlptz --delete --exclude=.well-known --exclude=cgi-bin \
            -e "ssh -p 1967 -i ~/.ssh/deploy_key" \
            dist/ "$SSH_USER@$SSH_HOST:domains/$DOMEIN/public_html/"

Ha nem használ Supabase-t, hagyja ki a VITE_SUPABASE kezdetű sorokat, vagy írja be helyettük a saját alkalmazása VITE_-változóit. Ha a bejelentkezés többször egymás után sikertelen, a szerver ideiglenesen letiltja a GitHub IP-címét. Ilyenkor ellenőrizze a secreteket, és indítsa újra a workflow-t.

8. Gyakori hibák

• A kezdőlap működik, de frissítéskor vagy közvetlen hivatkozás megnyitásakor 404-es hiba jelenik meg. A 3. pontban szereplő .htaccess fájl hiányzik, vagy rossz mappában található.
• Fehér képernyő. Nyissa meg a böngészője fejlesztői eszközeit (F12), és nézze meg a Console vagy a Network lapot. 404-es hibákat lát a /assets mappában lévő fájloknál? Akkor az elérési út nem megfelelő: a dist mappát töltötte fel a tartalma helyett, vagy az alkalmazás egy almappában található a megfelelő base beállítás nélkül (4. pont).
• Az alkalmazás betöltődik, de a bejelentkezés vagy az adatok nem működnek, vagy például a supabaseUrl is required üzenet jelenik meg. A VITE_ változók nem voltak elérhetők a buildeléskor. Adja meg őket a .env fájlban vagy secretként, majd buildelje újra az alkalmazást.
• A build a Node.js verziójára vonatkozó üzenettel meghiúsul. Használja a Node.js 22-es verzióját a számítógépén és a workflow-ban is (node-version: 22).
• Az npm ci parancs sikertelen. Nincs package-lock.json fájl, például mert a projektben csak bun.lock található. Futtassa le egyszer az npm install parancsot, és tegye be az új package-lock.json fájlt a repositoryjába.
• A buildben nincs index.html. Ebben az esetben saját szerverrel rendelkező alkalmazásról van szó, például TanStack Start. Ezt Node.js alkalmazásként állítsa be (6. pont).

Lásd még: Csatlakozás FileZillával (FTP, FTPS és SFTP) és SSH kulcsok és bejelentkezés SSH-val.

Részletes leírás képernyőképekkel: Node.js alkalmazás beállítása a DirectAdmin útmutatóban.