Lovable'is, Boltis või mõnes muus tehisintellektiga rakenduseloojas tehtud rakenduse paigaldamine oma WebOké majutusse

Kas tegid äpi Lovable'i, Bolti või mõne muu tehisintellektiga äpiehitajaga ja tahad selle WebOké juures oma domeenile panna? See on võimalik. Sellest artiklist loed, kuidas kood äpiehitajast kätte saada, kuidas äpp ehitada ja üles laadida ning kuidas GitHub saab seda sinu eest automaatselt teha.

1. Mis tüüpi äpp sul on?

Ava oma projektis fail package.json. Sellest näed, mis tüüpi äpiga on tegu.

• Staatiline äpp (React koos Vite'iga). Failis package.json on vite ja serveriraamistikku pole. Käsuga npm run build tekib kaust dist tavaliste HTML-, JavaScript- ja CSS-failidega. Need laadid üles kausta public_html. See töötab igas majutuspaketis. Paljud Bolti äpid ja Lovable'i vanemad äpid on nii ehitatud.
• Oma serveriga äpp. Alates 13. maist 2026 teeb Lovable äppe TanStack Startiga: siis on failis package.json @tanstack/react-start. Selline äpp käivitab serverikoodi ega tööta seega lahtiste failidena kaustas public_html. Seadistad selle Node.js-äpina (vt punkt 6). Sama kehtib teiste oma serveriga äppide kohta, näiteks Expressi taustasüsteemiga äpi puhul.
• Äpp, mille taustasüsteem on Supabase või Lovable Cloud. Andmebaas, sisselogimine ja funktsioonid jäävad siis Supabase'i või Lovable'i juurde. WebOkésse paned ainult esiosa (front-end). Ehitamisel annad siiski kaasa Supabase'i aadressi ja avaliku võtme (vt punkt 5).

2. Koodi kättesaamine äpiehitajast GitHubi kaudu

Lovable ja Bolt saavad panna su projekti sinu enda GitHubi repositooriumisse. Muudatused liiguvad siis mõlemas suunas: mida muudad äpiehitajas, jõuab GitHubi, ja mida muudad GitHubis, jõuab tagasi äpiehitajasse.

Lovable'is:

1. Ava oma projekt ja mine Project settings > Git > GitHub.
2. Klõpsa Add connection ja anna Lovable'i äpile ligipääs oma GitHubi kontole.
3. Klõpsa jaotises Accounts nuppu Connect. Lovable loob privaatse repositooriumi ja hoiab selle ajakohasena.

Ka ilma GitHubita saab: valikuga Download codebase jaotises Project settings > Git laadid koodi alla (Lovable'i tasulise paketiga).

Boltis:

1. Ava oma projekt ja klõpsa paremal üleval GitHubi ikooni.
2. Logi GitHubi sisse, klõpsa Authorize ja paigalda Bolti GitHubi äpp.
3. Sisesta repositooriumi nimi ja klõpsa Create repository. Seejärel töötab Bolt harus main.

3. Staatilise äpi ehitamine ja üleslaadimine

Ehitad äpi oma arvutis. Selleks on vaja Node.js-i versiooni 22 (praegune Vite nõuab vähemalt versiooni 20.19 või 22.12).

1. Too kood: tee oma repositooriumist git clone või paki allalaaditud fail lahti.
2. Ava projekti kaustas terminal ja paigalda paketid käsuga npm ci (või npm install, kui faili package-lock.json pole).
3. Ehita äpp käsuga npm run build. Nüüd on olemas kaust dist, milles on index.html ja kaust assets.
4. Laadi kausta dist sisu üles kausta domains/sinudomeen.nl/public_html, kas FTP-programmiga või DirectAdmini File Manageriga. Ära laadi üles kausta dist ennast ega lähtekoodi või kausta node_modules.
5. Pane allolev .htaccess-fail kausta public_html.

Mitme lehega äpp (ruuteriga) näitab brauseris aadresse nagu sinudomeen.nl/meist. Neid lehti serveris failina ei ole. Kui värskendad sellist lehte või avad lingi otse, saad vea 404. Selle .htaccess-failiga suunab server need aadressid faili index.html ja äpp näitab siis õiget lehte:

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

Olemasolevaid faile ja kaustu näitab server tavapäraselt. Puuduv fail kaustas assets annab päris 404 vea, nii et märkad viga kergemini. Kõik muu läheb äpile.

4. Äpi panemine alamkausta

Tahad äpi panna mitte aadressile sinudomeen.nl, vaid aadressile sinudomeen.nl/app? Siis peab äpp seda teadma juba ehitamisel. Muidu otsib brauser faile kaustast /assets, mitte /app/assets, ja ekraan jääb valgeks.

1. Lisa faili vite.config.js (või vite.config.ts) valik base: '/app/'.
2. Anna ruuterile sama tee. React Routeriga teed seda nii: <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Ehita uuesti ja laadi kausta dist sisu üles kausta public_html/app.
4. Pane faili public_html/app/.htaccess sama sisu mis ülal, kuid reaga RewriteBase /app/.

5. Supabase, Lovable Cloud ja muud seaded (env-muutujad)

Seaded, mis algavad eesliitega VITE_, näiteks VITE_SUPABASE_URL ja VITE_SUPABASE_PUBLISHABLE_KEY (vanemates projektides VITE_SUPABASE_ANON_KEY), kirjutab Vite ehitamise käigus JavaScripti failidesse. Serveris ei saa neid hiljem enam määrata.

• Väärtused leiad oma projekti failist .env. Võta nimed üle täpselt samal kujul.
• Kui sinu projektis pole faili .env, loo see ise projekti kausta, enne kui käivitad npm run build. GitHub Actionsi puhul lisa need secret'idena (vt punkt 7).
• Kui muutsid mõnda väärtust, ehita rakendus uuesti ja laadi see uuesti üles.

6. Oma serveriga rakendus: Node.js-rakendusena

Serverikoodiga rakenduse, näiteks Lovable'i TanStack Starti rakenduse, seadistad DirectAdminis tööriistaga Setup Node.js App. Kuidas see käib, loe artiklist Node.js aktiveerimine DirectAdminis. TanStack Starti rakenduse puhul käib see nii:

1. Ehita rakendus oma arvutis käsuga NITRO_PRESET=node-server npm run build. Nüüd on olemas kaust .output.
2. Loo jaotises Setup Node.js App rakendus, valides Node.js 22 ja kausta väljaspool public_html, näiteks apps/minuapp.
3. Laadi kaust .output sellesse kausta üles.
4. Loo samasse kausta fail start.cjs selle ühe reaga ja sisesta start.cjs välja Application startup file:

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

5. Lisa seaded, mida server vajab, näiteks SUPABASE_URL ja SUPABASE_PUBLISHABLE_KEY, jaotisesse Environment variables.
6. Klõpsa Restart. Tee seda ka pärast iga uut üleslaadimist.

Väike fail start.cjs on vajalik, sest kausta .output server on kaasaegne JavaScripti moodul (.mjs), aga Node.js-keskkond laadib käivitusfaili vanal viisil. Kui rakendus annab vea 503, vaata rakenduse kaustas faili stderr.log.

7. Automaatne avaldamine GitHub Actionsiga

GitHub Actionsiga ehitab GitHub su rakenduse iga muudatuse järel harus main ja paneb tulemuse sinu paketile. Kuna Lovable ja Bolt kirjutavad GitHubi, on tehisintellektiga ehitajas tehtud muudatus paari minuti pärast võrgus. DirectAdmini Git-funktsioon ei ehita midagi, see ainult paigutab failid; Vite-rakenduse jaoks on seepärast GitHub Actions mugavam.

Paroole ja võtmeid ei pane sa kunagi oma repositooriumi, vaid GitHubi secretina:

1. Ava oma repositoorium GitHubis ja mine Settings > Secrets and variables > Actions.
2. Klõpsa New repository secret, sisesta nimi ja väärtus ning klõpsa Add secret. Tee seda iga secreti puhul, mis on sinu valitud variandis.
3. Loo oma repositooriumis fail .github/workflows/deploy.yml, kasutades üht kahest allolevast näitest.
4. Vaata pärast järgmist muudatust vahekaardilt Actions, kas see õnnestus. Nupuga Run workflow saad selle ka käsitsi käivitada.

Variant A: FTPS kaudu (kõik majutuspaketid). Loo DirectAdminis GitHubi jaoks eraldi FTP-konto ja vali väljal Directory valik Domain (vt Kuidas FTP WebOkés töötab?). Secretid: FTP_SERVER (sinu paketi serveri nimi, näiteks linux2023.webawere.nl, mitte su domeeninimi), FTP_USERNAME (täielik nimi, näiteks github@sinudomeen.nl), FTP_PASSWORD ning su rakenduse VITE_-väärtused.

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/

Variant B: SSH kaudu rsynciga (SSH-ga paketid). SSH on olemas paketides Power Webhost Three ja Four, AI Wordpress Three ja Power Reseller, pordil 1967 ning ainult võtmega (vt SSH-ligipääs ja Terminal DirectAdminis).

1. Loo oma arvutis GitHubi jaoks eraldi võti ilma paroolita: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Pane faili github-deploy.pub sisu DirectAdminis jaotisesse SSH Keys > PASTE KEY.
3. Pane faili github-deploy (privaatvõti) sisu secreti SSH_PRIVATE_KEY väärtuseks. Kustuta seejärel fail oma arvutist.
4. Käivita ssh-keyscan -p 1967 linux2023.webawere.nl ja pane väljund secreti SSH_KNOWN_HOSTS väärtuseks. Nii kontrollib GitHub, et ühendus on tõesti sinu serveriga.
5. Lisa secretina ka SSH_HOST (serveri nimi), SSH_USER (su DA kasutajanimi), DOMEIN (näiteks sinudomeen.nl) ja VITE_-väärtused.

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/"

Kui sa Supabase'i ei kasuta, jäta VITE_SUPABASE read välja või pane nende asemele oma rakenduse VITE_-muutujad. Kui sisselogimine mitu korda ebaõnnestub, blokeerib server ajutiselt GitHubi IP-aadressi. Kontrolli siis oma secreteid ja käivita workflow uuesti.

8. Levinud vead

• Avaleht töötab, kuid värskendamine või otselink annab vea 404. Punktis 3 kirjeldatud .htaccess-fail puudub või asub vales kaustas.
• Valge ekraan. Ava oma brauseri arendaja tööriistad (F12) ja vaata jaotist Console või Network. Kas näed 404-vigu kaustas /assets olevate failide puhul? Siis on tee vale: laadisid üles kausta dist enda, mitte selle sisu, või asub rakendus alamkaustas ilma õige base-väärtuseta (punkt 4).
• Rakendus laadib, kuid sisselogimine või andmed ei tööta, või näed teadet nagu supabaseUrl is required. VITE_-muutujaid ei olnud ehitamise ajal olemas. Lisa need faili .env või saladusena (secret) ja ehita uuesti.
• Ehitamine ebaõnnestub Node.js-i versiooni puudutava teatega. Kasuta Node.js 22, nii oma arvutis kui ka töövoos (node-version: 22).
• npm ci ebaõnnestub. Fail package-lock.json puudub, näiteks seetõttu, et projektis on ainult bun.lock. Käivita üks kord npm install ja lisa uus package-lock.json oma repositooriumisse.
• Ehituses puudub index.html. Siis on tegemist oma serveriga rakendusega, näiteks TanStack Start. Seadista see Node.js-rakendusena (punkt 6).

Vaata ka: Ühendamine FileZillaga (FTP, FTPS ja SFTP) ja SSH-võtmed ja sisselogimine SSH-ga.

Põhjalik juhend koos ekraanipiltidega: Node.js-rakenduse seadistamine DirectAdmini juhendis.