Siirrä Lovablella, Boltilla tai muulla tekoälytyökalulla tehty sovellus WebOké-webhotelliisi

Teitkö sovelluksen Lovablella, Boltilla tai muulla tekoälytyökalulla ja haluat julkaista sen omassa verkkotunnuksessasi WebOkéssa? Se onnistuu. Tässä artikkelissa kerromme, miten saat koodin ulos tekoälytyökalusta, miten rakennat sovelluksen ja lataat sen palvelimelle ja miten GitHub voi hoitaa tämän puolestasi automaattisesti.

1. Millainen sovellus sinulla on?

Avaa projektisi tiedosto package.json. Siitä näet, millaisesta sovelluksesta on kyse.

• Staattinen sovellus (React ja Vite). Tiedostossa package.json on vite eikä palvelinkehystä. Komento npm run build luo kansion dist, jossa on tavallisia HTML-, JavaScript- ja CSS-tiedostoja. Ne ladataan kansioon public_html. Tämä toimii kaikissa webhotellipaketeissa. Monet Boltilla tehdyt ja vanhemmat Lovablella tehdyt sovellukset on rakennettu näin.
• Sovellus, jolla on oma palvelin. Lovable tekee 13. toukokuuta 2026 lähtien sovelluksia TanStack Startilla: silloin tiedostossa package.json on @tanstack/react-start. Tällainen sovellus ajaa palvelinkoodia, joten se ei toimi pelkkinä tiedostoina kansiossa public_html. Asennat sen Node.js-sovelluksena (katso kohta 6). Sama koskee muita sovelluksia, joilla on oma palvelin, kuten Express-taustajärjestelmää.
• Sovellus, jonka taustajärjestelmänä on Supabase tai Lovable Cloud. Tietokanta, kirjautuminen ja funktiot jäävät tällöin Supabaseen tai Lovableen. WebOkéhen asennat vain käyttöliittymän (front-endin). Rakennusvaiheessa annat kuitenkin Supabasen osoitteen ja julkisen avaimen (katso kohta 5).

2. Koodin hakeminen tekoälytyökalusta GitHubin kautta

Lovable ja Bolt voivat tallentaa projektisi omaan GitHub-repositorioon. Muutokset kulkevat silloin molempiin suuntiin: tekoälytyökalussa tekemäsi muutokset päätyvät GitHubiin, ja GitHubissa tekemäsi muutokset palaavat tekoälytyökaluun.

Lovablessa:

1. Avaa projektisi ja siirry kohtaan Project settings > Git > GitHub.
2. Napsauta Add connection ja anna Lovable-sovellukselle pääsy GitHub-tiliisi.
3. Napsauta kohdassa Accounts painiketta Connect. Lovable luo yksityisen repositorion ja pitää sen ajan tasalla.

Onnistuu myös ilman GitHubia: kohdan Project settings > Git toiminnolla Download codebase lataat koodin itsellesi (maksullisella Lovable-tilauksella).

Boltissa:

1. Avaa projektisi ja napsauta oikeasta yläkulmasta GitHub-kuvaketta.
2. Kirjaudu GitHubiin, napsauta Authorize ja asenna Boltin GitHub-sovellus.
3. Anna repositoriolle nimi ja napsauta Create repository. Bolt työskentelee sen jälkeen haarassa main.

3. Staattisen sovelluksen rakentaminen ja lataaminen palvelimelle

Rakennat sovelluksen omalla tietokoneellasi. Tarvitset siihen Node.js:n version 22 (nykyinen Vite vaatii vähintään version 20.19 tai 22.12).

1. Hae koodi: git clone repositoriostasi tai pura ladattu paketti.
2. Avaa pääte projektin kansiossa ja asenna paketit komennolla npm ci (tai npm install, jos tiedostoa package-lock.json ei ole).
3. Rakenna sovellus komennolla npm run build. Nyt sinulla on kansio dist, jossa on index.html ja kansio assets.
4. Lataa kansion dist sisältö kansioon domains/example.com/public_html FTP-ohjelmalla tai DirectAdminin File Managerilla. Älä siis lataa itse kansiota dist äläkä lähdekoodia tai kansiota node_modules.
5. Lisää alla oleva .htaccess-tiedosto kansioon public_html.

Sovellus, jossa on useita sivuja (reititin), näyttää selaimessa osoitteita kuten example.com/about. Näitä sivuja ei ole palvelimella tiedostoina. Jos päivität tällaisen sivun tai avaat linkin suoraan, saat 404-virheen. Tämän .htaccess-tiedoston avulla palvelin ohjaa nämä osoitteet tiedostoon index.html, ja sovellus näyttää oikean sivun:

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

Olemassa olevat tiedostot ja kansiot palvelin näyttää normaalisti. Puuttuva tiedosto kansiossa assets antaa oikean 404-virheen, joten virheet on helpompi huomata. Kaikki muu ohjataan sovellukselle.

4. Sovelluksen asentaminen alikansioon

Haluatko sovelluksen osoitteeseen example.com/app etkä osoitteeseen example.com? Silloin sovelluksen on tiedettävä se jo rakennusvaiheessa. Muuten selain etsii tiedostoja polusta /assets eikä polusta /app/assets, ja näyttö jää valkoiseksi.

1. Lisää tiedostoon vite.config.js (tai vite.config.ts) asetus base: '/app/'.
2. Anna reitittimelle sama polku. React Routerissa se tehdään näin: <BrowserRouter basename={import.meta.env.BASE_URL}>.
3. Rakenna sovellus uudelleen ja lataa kansion dist sisältö kansioon public_html/app.
4. Lisää tiedostoon public_html/app/.htaccess sama sisältö kuin yllä, mutta rivillä RewriteBase /app/.

5. Supabase, Lovable Cloud ja muut asetukset (env-muuttujat)

Asetukset, jotka alkavat VITE_, kuten VITE_SUPABASE_URL ja VITE_SUPABASE_PUBLISHABLE_KEY (vanhemmissa projekteissa VITE_SUPABASE_ANON_KEY), Vite kirjoittaa JavaScript-tiedostoihin koonnin aikana. Palvelimella et voi enää asettaa niitä jälkikäteen.

• Löydät arvot projektisi tiedostosta .env. Kopioi nimet täsmälleen sellaisinaan.
• Jos projektissasi ei ole tiedostoa .env, luo se itse projektikansioon ennen kuin ajat komennon npm run build. GitHub Actionsissa lisäät ne secreteiksi (katso kohta 7).
• Jos muutit jotain arvoa, koosta ja lataa sovellus uudelleen.

6. Sovellus, jolla on oma palvelin: Node.js-sovelluksena

Sovelluksen, jossa on palvelinkoodia, kuten Lovablesta tulevan TanStack Start -sovelluksen, otat käyttöön DirectAdminin toiminnolla Setup Node.js App. Miten se toimii, voit lukea artikkelista Node.js:n aktivointi DirectAdminissa. TanStack Start -sovelluksessa se käy näin:

1. Koosta sovellus tietokoneellasi komennolla NITRO_PRESET=node-server npm run build. Nyt sinulla on kansio .output.
2. Luo sovellus kohdassa Setup Node.js App. Valitse Node.js 22 ja kansio public_html:n ulkopuolelta, esimerkiksi apps/myapp.
3. Lataa kansio .output siihen kansioon.
4. Luo samaan kansioon tiedosto start.cjs, jossa on tämä yksi rivi, ja kirjoita start.cjs kenttään Application startup file:

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

5. Lisää palvelimen tarvitsemat asetukset, kuten SUPABASE_URL ja SUPABASE_PUBLISHABLE_KEY, kohtaan Environment variables.
6. Napsauta Restart. Tee se myös jokaisen uuden latauksen jälkeen.

Pientä tiedostoa start.cjs tarvitaan, koska .output-kansion palvelin on moderni JavaScript-moduuli (.mjs) ja Node.js-ympäristö lataa käynnistystiedoston vanhalla tavalla. Jos sovellus antaa virheen 503, katso tiedostoa stderr.log sovelluksesi kansiossa.

7. Automaattinen julkaisu GitHub Actionsilla

GitHub Actionsin avulla GitHub rakentaa sovelluksesi aina, kun main-haaraan tulee muutos, ja siirtää tuloksen pakettiisi. Koska Lovable ja Bolt tallentavat muutokset GitHubiin, tekoälyrakentajassa tehty muutos on verkossa muutaman minuutin kuluttua. DirectAdminin Git-toiminto ei rakenna mitään, vaan ainoastaan sijoittaa tiedostot paikalleen. Siksi GitHub Actions on Vite-sovellukselle kätevämpi.

Älä koskaan laita salasanoja tai avaimia repositorioosi, vaan tallenna ne GitHubiin secreteinä:

1. Avaa repositoriosi GitHubissa ja siirry kohtaan Settings > Secrets and variables > Actions.
2. Napsauta New repository secret, anna nimi ja arvo ja napsauta Add secret. Tee näin jokaiselle valitsemasi vaihtoehdon secretille.
3. Luo repositorioosi tiedosto .github/workflows/deploy.yml ja käytä siinä jompaakumpaa alla olevista esimerkeistä.
4. Tarkista seuraavan muutoksen jälkeen Actions-välilehdeltä, onnistuiko julkaisu. Run workflow -painikkeella voit käynnistää sen myös käsin.

Vaihtoehto A: FTPS:n kautta (kaikki webhotellipaketit). Luo DirectAdminissa GitHubille oma FTP-tili ja valitse kohdassa Directory vaihtoehto Domain (katso Miten FTP toimii WebOkéssa?). Secretit: FTP_SERVER (pakettisi palvelimen nimi, esimerkiksi linux2023.webawere.nl, ei verkkotunnuksesi), FTP_USERNAME (koko nimi, esimerkiksi github@example.com), FTP_PASSWORD sekä sovelluksesi VITE_-arvot.

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/

Vaihtoehto B: SSH:n ja rsyncin kautta (paketit, joissa on SSH). SSH sisältyy paketteihin Power Webhost Three ja Four, AI Wordpress Three ja Power Reseller. Se toimii portissa 1967 ja vain avaimella (katso SSH-yhteys ja Terminal DirectAdminissa).

1. Luo tietokoneellasi GitHubille erillinen avain ilman salasanaa: ssh-keygen -t ed25519 -f github-deploy -N "".
2. Liitä tiedoston github-deploy.pub sisältö DirectAdminissa kohtaan SSH Keys > PASTE KEY.
3. Tallenna tiedoston github-deploy (yksityinen avain) sisältö secretiin SSH_PRIVATE_KEY. Poista tiedosto sen jälkeen tietokoneeltasi.
4. Suorita ssh-keyscan -p 1967 linux2023.webawere.nl ja tallenna tuloste secretiin SSH_KNOWN_HOSTS. Näin GitHub varmistaa, että se todella muodostaa yhteyden sinun palvelimeesi.
5. Tallenna secreteiksi myös SSH_HOST (palvelimen nimi), SSH_USER (DA-käyttäjätunnuksesi), DOMEIN (esimerkiksi example.com) ja VITE_-arvot.

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

Jos et käytä Supabasea, jätä VITE_SUPABASE-rivit pois tai korvaa ne oman sovelluksesi VITE_-muuttujilla. Jos kirjautuminen epäonnistuu muutaman kerran, palvelin estää GitHubin IP-osoitteen tilapäisesti. Tarkista silloin secretisi ja käynnistä työnkulku uudelleen.

8. Yleisimmät virheet

• Etusivu toimii, mutta sivun päivitys tai suora linkki antaa 404-virheen. Kohdan 3 .htaccess-tiedosto puuttuu tai on väärässä kansiossa.
• Valkoinen näyttö. Avaa selaimesi kehittäjätyökalut (F12) ja katso kohtaa Console tai Network. Näetkö 404-virheitä kansion /assets tiedostoissa? Silloin polku ei ole oikein: olet ladannut palvelimelle itse dist-kansion sen sisällön sijaan, tai sovellus on alikansiossa ilman oikeaa base-asetusta (kohta 4).
• Sovellus latautuu, mutta kirjautuminen tai tiedot eivät toimi, tai näet ilmoituksen kuten supabaseUrl is required. VITE_-muuttujat puuttuivat koontivaiheessa. Lisää ne tiedostoon .env tai secretiksi ja tee koontiversio uudelleen.
• Koontiversion teko epäonnistuu ja näet ilmoituksen Node.js-versiosta. Käytä Node.js 22:ta sekä omalla tietokoneellasi että workflow'ssa (node-version: 22).
• npm ci epäonnistuu. Tiedostoa package-lock.json ei ole, esimerkiksi koska projektissa on vain bun.lock. Suorita kerran npm install ja lisää uusi package-lock.json repositorioosi.
• Koontiversiossa ei ole tiedostoa index.html. Silloin kyseessä on sovellus, jolla on oma palvelin, kuten TanStack Start. Ota se käyttöön Node.js-sovelluksena (kohta 6).

Katso myös: Yhdistäminen FileZillalla (FTP, FTPS ja SFTP) ja SSH-avaimet ja kirjautuminen SSH:lla.

Tarkemmat ohjeet kuvakaappauksineen: Node.js-sovelluksen käyttöönotto DirectAdmin-oppaassa.