Sovelluksen julkaisu Verceliin – paikallisesta projektista tuotantoon 15 minuutissa

Olet vibekoodannut sovelluksen. Se pyörii koneellasi, localhost näyttää hyvältä ja kaikki toimii. Sitten tulee se kysymys, joka pysäyttää monen aloittelijan: miten tämä saadaan nettiin, niin että muutkin voivat käyttää sitä?

Vastaus on Vercel. Ja se on helpompaa kuin luulet.

Tässä oppaassa käymme läpi koko prosessin: GitHub-reposta tuotantoon, domainin asetus, ympäristömuuttujat ja automaattinen CI/CD. Kaikki 15 minuutissa.

Miksi Vercel?

Vercel on alusta, joka on rakennettu erityisesti frontend-sovellusten ja Next.js-projektien julkaisemiseen. Se on sama yritys, joka on rakentanut Next.js:n – joten yhteensopivuus on luonnollisesti parasta mahdollista.

Mutta miksi juuri Vercel eikä esimerkiksi Netlify, Railway tai oma palvelin? Muutama syy:

Nolla konfiguraatiota. Yhdistät GitHub-repon, ja Vercel tunnistaa automaattisesti, että kyseessä on Next.js-projekti. Se osaa rakentaa ja julkaista sen ilman, että kirjoitat yhtään build-komentoa.

Automaattinen CI/CD. Jokainen push GitHubin main-branchiin julkaisee uuden version automaattisesti. Pull requestit saavat omat preview-URL:t, joilla voit testata muutoksia ennen julkaisua.

Ilmainen aloitus. Hobby-taso on ilmainen ja riittää useimpiin henkilökohtaisiin projekteihin. Et tarvitse luottokorttia.

Edge-verkko. Sovelluksesi jaellaan automaattisesti CDN:n kautta ympäri maailmaa. Suomalaisille käyttäjille sisältö tulee lähimmältä palvelimelta.

Ennen kuin aloitat

Tarvitset kolme asiaa:

1. Toimiva Next.js-projekti koneellasi. Jos et ole vielä rakentanut mitään, katso rakentamisopas.
2. GitHub-tili ja projekti pushattuna GitHub-repoon.
3. Vercel-tili. Voit luoda sen ilmaiseksi osoitteessa vercel.com.

Jos projektisi ei vielä ole GitHubissa, tässä pikaohjeet:

# Luo uusi repo GitHubissa (github.com/new)
# Sitten terminaalissa projektikansiossa:
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/KÄYTTÄJÄNIMI/PROJEKTI.git
git branch -M main
git push -u origin main

Vaihe 1: Yhdistä Vercel ja GitHub

Mene osoitteeseen vercel.com ja kirjaudu sisään GitHub-tililläsi. Tämä on nopein tapa, koska Vercel saa samalla pääsyn repoihisi.

Kirjautumisen jälkeen näet dashboardin. Klikkaa "Add New Project".

Vercel näyttää listan GitHub-repoistasi. Valitse se projekti, jonka haluat julkaista. Jos et näe sitä, tarkista että olet antanut Vercelille oikeudet kyseiseen repoon (Settings → Applications GitHubissa).

Vaihe 2: Konfiguroi projekti

Vercel tunnistaa automaattisesti Next.js-projektin ja ehdottaa oikeita asetuksia. Useimmiten sinun ei tarvitse muuttaa mitään. Tarkista kuitenkin nämä:

Framework Preset: Next.js (tunnistettu automaattisesti).

Build Command: next build tai npm run build. Vercel valitsee oikean automaattisesti.

Output Directory: .next. Ei tarvitse muuttaa.

Root Directory: Jos projektisi on repon juuressa, jätä tyhjäksi. Jos se on alikansioissa (esim. monorepo), kerro oikea polku.

Ympäristömuuttujat

Tässä kohtaa tulee usein ensimmäinen kompastuskivi. Jos sovelluksesi käyttää ympäristömuuttujia – esimerkiksi API-avaimia, tietokantayhteyksiä tai Supabase-URL:ia – ne pitää lisätä Verceliin erikseen.

Klikkaa "Environment Variables" ja lisää jokainen muuttuja:

DATABASE_URL = postgresql://user:password@host:5432/db
NEXT_PUBLIC_SUPABASE_URL = https://xxxxxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY = eyJhbGciOi...

Tärkeää: NEXT_PUBLIC_-alkuiset muuttujat näkyvät selaimessa. Älä laita salaisuuksia (API secret key, database password) NEXT_PUBLIC_-muuttujiin.

Voit myös määrittää eri ympäristömuuttujat eri ympäristöille: Production, Preview ja Development.

Vaihe 3: Deploy

Klikkaa "Deploy". Vercel alkaa rakentaa sovellustasi. Näet reaaliaikaisen login, jossa näkyy mitä tapahtuu:

1. Asennetaan riippuvuudet (npm install)
2. Rakennetaan sovellus (next build)
3. Julkaistaan edge-verkkoon

Ensimmäinen build kestää yleensä 1–3 minuuttia. Jos kaikki menee hyvin, näet vihreän "Ready"-tekstin ja linkin sovellukseesi.

Sovelluksesi on nyt osoitteessa projektinimi.vercel.app. Se on livenä. Kuka tahansa voi avata sen.

Vaihe 4: Oma domain

projektinimi.vercel.app toimii, mutta oman domainin käyttö näyttää ammattimaisemmalta. Näin lisäät sen:

1. Mene projektisi asetuksiin Vercelissä → Domains
2. Kirjoita domainisi (esim. minunsovellus.fi)
3. Vercel antaa sinulle DNS-tietueet, jotka lisäät domainisi rekisteröijän hallintapaneeliin

Tyypillisesti tarvitset:

A-tietue:     @ → 76.76.21.21
CNAME-tietue: www → cname.vercel-dns.com

DNS-muutokset voivat kestää muutamasta minuutista 48 tuntiin, mutta yleensä ne toimivat alle tunnissa. Vercel hoitaa SSL-sertifikaatin automaattisesti – sinun ei tarvitse tehdä mitään HTTPS:n eteen.

Automaattinen CI/CD GitHubilla

Tässä on se taikuus, jota et saa perinteisellä palvelimella ilman lisätyötä: jokainen push GitHubiin julkaisee uuden version automaattisesti.

Main-branch = tuotanto. Kun pushaat main-branchiin, Vercel rakentaa ja julkaisee uuden version tuotantoon.

Pull request = preview. Kun avaat pull requestin, Vercel luo automaattisesti preview-deploymentin omalla URL:llaan. Voit jakaa linkin tiimiläisille tai asiakkaalle testattavaksi.

Tämä tarkoittaa, että työnkulku on yksinkertainen:

# Tee muutoksia
git add .
git commit -m "Lisää uusi ominaisuus"
git push origin main
# → Vercel julkaisee automaattisesti

Jos käytät brancheja:

git checkout -b uusi-ominaisuus
# Tee muutoksia
git add .
git commit -m "Lisää uusi ominaisuus"
git push origin uusi-ominaisuus
# → Vercel luo preview-URL:n
# Kun merge main-branchiin → julkaistaan tuotantoon

Tyypilliset ongelmat ja ratkaisut

Build epäonnistuu

Yleisin syy: jokin toimii lokaalisti mutta ei Vercelissä. Tarkista nämä:

• Ympäristömuuttujat puuttuvat. Build log näyttää yleensä selkeästi, mikä muuttuja puuttuu.
• Case-sensitivity. Macissa Component.tsx ja component.tsx ovat sama tiedosto, mutta Linuxissa (Vercelin palvelin) ne ovat eri tiedostoja. Tarkista importit.
• Node.js-versio. Vercel käyttää oletuksena Node.js 20:tä. Jos projektisi vaatii tietyn version, lisää engines-kenttä package.json-tiedostoon.

Sivut palauttavat 404

Jos käytät dynaamisia reittejä (esim. [slug]), tarkista että generateStaticParams tai vastaava funktio palauttaa oikeat polut. Static export -tilassa kaikki reitit pitää tietää build-aikana.

API-reitit eivät toimi

Varmista, että API-reitit ovat app/api/-kansiossa ja käyttävät oikeaa Next.js-syntaksia. Tarkista myös, että ympäristömuuttujat ovat saatavilla server-puolella (ei NEXT_PUBLIC_-etuliitettä tarvita).

Vercel-projektin optimointi

Kun sovellus on julkaistu, voit vielä parantaa sitä muutamalla asetuksella.

Analytics. Vercel tarjoaa Web Vitals -analytiikkaa, jolla näet sivuston suorituskyvyn. Ota se käyttöön dashboardista.

Speed Insights. Reaaliaikainen näkymä sivuston nopeuteen eri maissa ja laitteilla.

Caching. Vercel cachettaa automaattisesti staattisen sisällön. Dynaamisille reiteille voit määrittää revalidate-arvon ISR:llä (Incremental Static Regeneration).

Monorepo-tuki. Jos projektisi on monorepo, Vercel osaa rakentaa vain ne osat, jotka ovat muuttuneet. Tämä nopeuttaa buildeja merkittävästi.

Yhteenveto: julkaisun checklist

Ennen kuin julkaiset, käy läpi tämä lista:

• [ ] Projekti on GitHubissa ja ajan tasalla
• [ ] npm run build toimii lokaalisti ilman virheitä
• [ ] Ympäristömuuttujat on lisätty Verceliin
• [ ] Kuvat ja fontit latautuvat oikein (ei absoluuttisia localhost-polkuja)
• [ ] Meta-tagit ja SEO-asetukset ovat kunnossa
• [ ] Domain on yhdistetty (jos käytössä)

Sovelluksen julkaisu ei ole enää se pelottava viimeinen vaihe. Vercelin kanssa se on kirjaimellisesti muutama klikkaus ja pari minuuttia odottelua.

Jos olet vasta aloittamassa vibekoodausta, julkaisu Verceliin on se hetki, jolloin projektistasi tulee oikea. Ei enää "se pyörii mun koneella" – vaan oikea sovellus, oikealla URL:lla, oikeille käyttäjille.

Seuraava askel? Rakenna jotain ja julkaise se. Se on paras tapa oppia.