Lovable AI ja Louhen webhotelli – opas sivuston julkaisuun

Etsitkö tapaa toteuttaa Lovable hosting tai Lovable deployment Suomessa? Tässä oppaassa näytämme, kuinka julkaiset Lovable AI -projektin Louhen webhotelliin GitHubin, cPanelin ja Node.js:n avulla turvallisesti ja helposti.

Lovable AI (lovable.dev) on tekoälypohjainen AI website builder, jonka avulla voidaan rakentaa moderneja verkkosivustoja ja sovelluksia luonnollisen kielen komennoilla. Sen avulla voit luoda toimivia verkkopalveluita nopeasti myös ilman laajaa ohjelmointiosaamista.

Mutta tiesitkö, että Lovable AI:lla rakennettu projekti ei vaadi kalliita ulkomaisia pilvipalveluita? Se voidaan julkaista turvallisesti ja suorituskykyisesti myös Louhen kotimaiseen webhotelliin.

Lovable hyödyntää taustalla TanStack Start -frameworkia ja Nitro-sovellusmoottoria, joiden avulla voidaan rakentaa moderneja ja suorituskykyisiä verkkosovelluksia. Tässä käytännönläheisessä oppaassa käymme vaihe vaiheelta läpi, miten julkaiset, ylläpidät ja päivität Lovable AI -projektin Louhen webhotellissa.

Mikä on Lovable AI?

Lovable AI on tekoälypohjainen kehitysalusta, jonka avulla verkkosivustoja ja verkkosovelluksia voidaan rakentaa luonnollisella kielellä ilman laajaa ohjelmointiosaamista. Käyttäjä kuvailee haluamansa toiminnallisuudet, ja Lovable tuottaa niiden pohjalta modernia ohjelmistokoodia, jota voidaan jatkokehittää ja ylläpitää myös perinteisillä kehitystyökaluilla.
Lovable hyödyntää taustalla nykyaikaisia web-teknologioita, kuten TanStack Start- ja Nitro-sovellusmoottoreita, joiden avulla voidaan rakentaa suorituskykyisiä ja hakukoneystävällisiä verkkosivustoja sekä dynaamisia Node.js-pohjaisia sovelluksia. Tässä oppaassa kerromme, kuinka julkaiset Lovable AI:lla rakennetun projektin turvallisesti Louhen kotimaiseen webhotelliin ja ylläpidät sitä GitHubin, cPanelin ja Node.js:n avulla.

Tärkeä huomautus ja rajaukset
Tämä opas on suunniteltu Lovable-alustalla rakennetuille dynaamisille verkkosivustoille, portfolioille ja yrityssivuille, jotka käyttävät TanStack Start- ja Nitro-moottoreita dynaamiseen esikatseluun (SSR) ja sivujen jakeluun.
⚠️ Opas ei kata Supabase-tietokannallisia sovelluksia: Jos sovelluksesi hyödyntää aktiivista Supabase-tietokantaa datan tallentamiseen tai käyttäjien autentikointiin, nämä dynaamiset tietokantaominaisuudet vaativat ympäristömuuttujien (.env) tarkempaa asettamista sekä tietokantayhteyksien erillistä määrittämistä Supabasen pilven tai erillisen Louhelle rakennetun API-sillan kautta. Keskitymme tässä oppaassa oletusarvoisen Lovable-teknologiapinon julkaisemiseen.

Miksi julkaista Lovable AI -projekti Louhen webhotelliin?

Lovable AI:lla rakennettu projekti tarvitsee luotettavan hosting-ympäristön, jossa sovellus toimii vakaasti ja sitä on helppo ylläpitää myös jatkossa. Louhen webhotelli tarjoaa tähän valmiit työkalut, kuten Git-tuen, cPanelin kehittäjäominaisuudet ja Node.js-ympäristön, joiden avulla projektin julkaiseminen ja päivittäminen onnistuvat hallitusti.
Kun projekti on julkaistu Louhen webhotelliin, voit hyödyntää GitHubia versionhallintaan ja päivittää sivuston helposti aina, kun teet muutoksia Lovable AI:ssa. Tarvittaessa ympäristöä on myös helppo laajentaa tehokkaampaan ratkaisuun, kuten virtuaalipalvelimeen tai Sovelluskartanoon, mikäli sovelluksen vaatimukset kasvavat. Näin sama ratkaisu skaalautuu yksinkertaisista verkkosivustoista vaativampiin full-stack-sovelluksiin.

Mitä tarvitset ennen aloittamista?

Ennen kuin aloitat Lovable AI -projektin julkaisemisen Louhen webhotelliin, varmista, että käytössäsi ovat seuraavat palvelut ja työkalut:

• Louhen Webhotelli Voima (tai tehokkaampi webhotellipaketti), joka sisältää Git-tuen sekä Node.js-sovellusten julkaisemiseen tarvittavat ominaisuudet.
• Lovable AI -projekti, jonka haluat julkaista.
• GitHub-tili, jonka kautta Lovable synkronoi projektin lähdekoodin ja jota käytetään versionhallintaan.
• Noin tunti aikaa ensimmäiseen käyttöönottoon ja ympäristön määrittämiseen.

Kun nämä ovat valmiina, voit siirtyä yhdistämään Lovable-projektin GitHubiin ja julkaisemaan sen vaihe vaiheelta Louhen webhotelliin.

Vaihe 1: Yhdistä Lovable AI GitHub-tiliisi

Lovable hoitaa koodin versionhallinnan ja synkronoinnin automaattisesti taustalla, kun kytket sen ilmaiseen GitHub-tiliisi.

1. Avaa projektisi Lovablessa ja klikkaa vasemmasta yläkulmasta projektin nimeä, “Settings”, “Git” ja “Github”
2. Anna Lovablelle valtuutus kirjautumalla GitHub-tilillesi ja klikkaamalla Authorize.
3. Valitse, haluatko luoda projektille julkisen (Public) vai yksityisen (Private) repositorion. (Suosittelemme yrityskäytössä yksityistä).
4. Lovable luo repositorion puolestasi ja siirtää koodin sinne. Jatkossa kaikki tekoälylle antamasi muutokset päivittyvät GitHubiin automaattisesti taustalla!

Vaihe 2: Kloonaa koodi Louhen palvelimelle (cPanel Git)

Yksityisen (Private) repositorion kloonaus vaatii suojatun avainparin (SSH-avaimen) määrittämisen Louhen webhotellin ja GitHubin välille, jotta palvelimet voivat keskustella luotettavasti keskenään.

1. Luo ja aktivoi SSH-avain cPanelissa

1. Kirjaudu cPaneliin ja avaa osiosta työkalu SSH Access (SSH-yhteys).
2. Klikkaa Manage SSH Keys -> Generate a New Key.
3. Täytä asetukset:
   Key Name: id_rsa (oletusarvo on hyvä)
   Key Password: Jätä tämä tyhjäksi, jotta automaattinen päivitys toimii ilman kyselyitä.
4. Klikkaa Generate Key.
5. Palattuasi avainsivulle, etsi uusi avaimesi listalta ja klikkaa sen kohdalta Manage -> klikkaa Authorize (tämä aktivoi avaimen käyttöön).

2. Vie julkinen avain GitHubiin (Deploy Key)

1. Klikkaa cPanelin avainsivulta julkisen avaimen (Public Keys) kohdalta View/Download.
2. Kopioi pitkä, kirjaimilla ssh-rsa alkava koodirimpsu kokonaisuudessaan leikepöydällesi.
3. Siirry selaimesi toisessa välilehdessä GitHubiin kyseisen projektisi sivulle.
4. Klikkaa yläpalkista Settings (Asetukset) -> vasemmasta sivupalkista Deploy keys -> klikkaa Add deploy key.
5. Liitä kopioimasi avain Key-kenttään, anna nimeksi esimerkiksi Louhi Webhotelli ja klikkaa Add key. (Lukuoikeus riittää, joten Allow write access -kohtaa ei tarvitse valita).

3. Kloonaa repositorio cPanelin Gitiin SSH-osoitteella

1. Mene GitHub-projektisi etusivulle, klikkaa vihreää Code-painiketta ja valitse välilehti SSH (HTTPS:n sijaan). Kopioi SSH-osoite (muotoa git@github.com:kayttaja/projekti.git).
2. Mene cPanelissa kohtaan Git™ Version Control (löytyy osiosta Kehittäjät) -> klikkaa Create.
3. Liitä kopioimasi git@github.com:… -osoite Clone URL -kenttään.
4. Määritä polku (Repository Path) (esim. repositories/oma-lovable-app) ja klikkaa Create. cPanel noutaa koodin nyt turvallisesti ja salatusti sekunneissa!

Vaihe 3: Koodin kääntäminen full-stack-palvelimeksi

Koska Lovable-sovellukset ovat dynaamisia Node.js-pohjaisia järjestelmiä, ne täytyy kääntää (buildata) palvelimella ennen niiden julkaisua. Ohitetaan cPanelin graafinen käyttöliittymä ja hoidetaan tämä suoraan ja luotettavasti cPanelin komentoriviltä.

1. Avaa cPanelin päävalikosta Terminal (Terminaali).
2. Siirry projektisi kansioon kirjoittamalla: cd repositories/oma-lovable-app (korvaa hakemistopolulla jonka määrittelit projektisi poluksi)
3. Varmistetaan, että käytämme Louhen virallista Node.js 22 -versiota tässä terminaali-istunnossa syöttämällä tämä polkukomento: export PATH=/opt/alt/alt-nodejs22/root/usr/bin:$PATH
4. Asennetaan sovelluksen tarvitsemat paketit: npm install HUOM: npm-pakettien asennus saattaa kestää joitain minuutteja
5. Käännetään projekti viralliseksi Node.js-palvelimeksi: UV_THREADPOOL_SIZE=1 RAYON_NUM_THREADS=1 NITRO_PRESET=node-server npm run build

Kun build-prosessi on valmis, se ilmoittaa onnistumisesta ja luo projektisi sisään näkymättömän kansion .output/server/ sekä sinne sovelluksen dynaamisen moottoritiedoston index.mjs.

Vaihe 4: Luo käynnistyssilta (app.js)

cPanelin Node.js-sovellushallinta (Passenger) etsii projektin juuresta perinteistä app.js-tiedostoa sen käynnistämiseksi. Luodaan silta, joka yhdistää cPanelin ja Lovablen oman dynaamisen moottorin.

1. Avaa cPanelin Tiedonhallinta (File Manager) ja siirry projektikansioosi (repositories/oma-lovable-app).
2. Luo uusi tiedosto nimellä app.js.
3. Avaa tiedosto muokattavaksi (Edit). Jos tiedostossa on vanhaa oletuskoodia (kuten ”It works!” -placeholder), pyyhi se kokonaan pois ja liitä tilalle tämä yksi ainoa rivi: import(’./.output/server/index.mjs’);
4. Tallenna ja sulje tiedosto.

Vaihe 5: Kytke Node.js-sovellus päälle cPanelissa

Nyt kerrotaan Louhen palvelimelle, että sovellus on valmis otettavaksi käyttöön dynaamisena taustaprosessina.

1. Etsi cPanelista kohta Setup Node.js App ja klikkaa Create Application.
2. Täytä lomake täsmälleen seuraavasti:
   Node.js version: Valitse vähintään versio 22 (voit käyttää myös versiota 24, huomaa kuitenkin että tässä ohjeessa viitataan myöhemmin versioon 22)
   Application mode: Valitse Production
   Application root: Syötä kansion polku (esim. repositories/oma-lovable-app)
   Application URL: Valitse haluamasi domain pudotusvalikosta ja jätä sen perässä oleva tekstikenttä tyhjäksi (jotta sovellus vastaa suoraan domainisi etusivulla).
   Application startup file: Kirjoita app.js
3. Klikkaa Create.

Sivustosi on nyt virallisesti livenä! Voit avata selaimeesi oman domainisi ja nähdä Lovablella luomasi sivuston latautuvan dynaamisesti Louhen suorituskykyisestä webhotelliympäristöstä.

Miten päivität Lovable AI -sivustoa myöhemmin?

Yksi tämän ratkaisun parhaista puolista on sen helppo päivitettävyys. Kun haluat muokata sivustoasi myöhemmin Lovable-alustan tekoälyn avulla, päivitys livenä Louhelle vaatii vain muutaman nopean askeleen:

1. Tee muutokset Lovablessa: Pyydä tekoälyä tekemään haluamasi muutokset tai lisäämään uutta sisältöä. Lovable tallentaa ja puskee uuden koodin automaattisesti taustalla GitHub-repositorioosi.
2. Hae uusi koodi Louhelle (Git Pull):
   -Mene cPanelissa kohtaan Git™ Version Control.
   -Etsi listalta projektisi ja klikkaa sen kohdalta Manage.
   -Siirry välilehdelle Pull or Deploy ja klikkaa sinistä Update from Source -painiketta. Louhi hakee uusimman koodiversion GitHubista sekunneissa.
3. Käännä projekti uudelleen (Build):
   -Avaa cPanelin Terminal ja siirry projektikansioon (cd repositories/oma-lovable-app).
   -Varmista Node-polku: export PATH=/opt/alt/alt-nodejs22/root/usr/bin:$PATH
   -Aja asennus ja kääntökomento uudestaan: npm install && UV_THREADPOOL_SIZE=1 RAYON_NUM_THREADS=1 NITRO_PRESET=node-server npm run build
4. Uudelleenkäynnistä Node.js-sovellus:

Mene cPanelissa kohtaan Setup Node.js App.

Etsi listalta sovelluksesi ja klikkaa sen kohdalta Restart. Tämä lataa uuden käännetyn koodin livenä kävijöillesi!
HUOM: Mikäli sivuston toiminnassa näkyy tämän jälkeen virheitä, sulje vanhat node prosessit terminaalissa komennolla:
pkill -u webhotellintunnus node
(Korvaa ‘webhotellintunnus’ omalla webhotellisi pääkäyttäjätunnuksella)

Milloin kannattaa siirtyä tehokkaampaan hosting-ratkaisuun?

Webhotelli Voima on hyvä lähtökohta, jolla saat julkaistua useimmat tyypilliset Lovablella luodut www-sivustot. Dynaamisen TanStack/Nitro-full-stack-sovelluksen kääntäminen (build) ja ajaminen taustaprosessina vaatii palvelimelta enemmän suorituskykyä, muistia sekä levynkirjoitusnopeutta kuin perinteiset staattiset HTML-sivut tai kevyet WordPress-sivustot. Mikäli sinulla on tarve julkaista laajempia Lovablella tehtyjä verkkosovelluksia tai tehdä omia kustomointeja alustaan, voi Louhen virtuaalipalvelin tai Sovelluskartano olla sinulle oikea ratkaisu. Autamme tarvittaessa valitsemaan oikeanlaisen paketin projektillesi.

Usein kysytyt kysymykset Lovable AI:sta

Voiko Lovable AI -projektin julkaista tavalliseen webhotelliin?
Kyllä, useimmat Lovable AI:lla rakennetut verkkosivustot voidaan julkaista Louhen Webhotelli Voima -pakettiin. Jos projekti kasvaa laajemmaksi tai vaatii enemmän suorituskykyä, kannattaa harkita virtuaalipalvelinta tai Sovelluskartanoa.

Tarvitaanko GitHub-tili?
Kyllä. GitHub toimii versionhallintana ja yhdistää Lovable AI:n sekä Louhen webhotellin. Sen avulla projektin lähdekoodi pysyy tallessa ja päivitysten käyttöönotto on helppoa.

Voiko sivustoa päivittää myöhemmin?
Kyllä. Kun teet muutoksia Lovable AI:ssa, uusi koodi päivittyy GitHubiin. Sen jälkeen päivität projektin Louhen webhotelliin hakemalla uusimman version, rakentamalla projektin uudelleen ja käynnistämällä Node.js-sovelluksen.

Tarvitaanko Node.js-sovelluksen julkaisemiseen ohjelmointiosaamista?
Perustiedot GitHubista, cPanelista ja komentorivin käytöstä helpottavat käyttöönottoa, mutta tämän oppaan avulla myös vähemmän kokenut käyttäjä pystyy julkaisemaan Lovable AI -projektin vaihe vaiheelta.

Milloin kannattaa siirtyä virtuaalipalvelimeen?
Jos sovelluksesi käyttää paljon muistia tai suorituskykyä, sisältää runsaasti taustaprosesseja tai vaatii laajoja mukautuksia, virtuaalipalvelin tai Sovelluskartano tarjoaa enemmän resursseja ja joustavuutta kuin tavallinen webhotelli.

Mistä löydän Lovable AI:n?
Lovable AI löytyy osoitteesta lovable.dev, jossa voit luoda uuden projektin ja yhdistää sen GitHubiin.

Tarvitsetko apua Lovable AI -projektin julkaisemisessa?
Louhen asiantuntijat auttavat valitsemaan projektiisi sopivan webhotellin tai palvelinratkaisun. Ota yhteyttä myyntiimme tai tutustu webhotellipalveluihimme.