PricingLoginStart free
Vibe-koodaus · Oppitunti

Julkaiseminen Verceliin tai Netlifyyn

Yhden napsautuksen hosting tekoälyn avulla.

Oppitunti 2/413 vaihetta

Julkaiseminen Verceliin tai Netlifyyn on ilmainen Vibe-koodaus-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vibe-koodaus-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.

On aika julkaista

Ymmärrätte, mitä julkaiseminen tarkoittaa. Nyt tehdään se oikeasti. Oppitunnin lopussa sovelluksellanne voi olla oikea julkinen linkki.

Käytämme Verceliä ja Netlifyä — kahta aloittelijoille sopivinta hosting-palvelua. Molemmat voivat ottaa projektinne ja antaa sille julkisen URL-osoitteen muutamassa minuutissa, usein yhdellä napsautuksella.

Parasta on, että tekoäly voi opastaa teitä jokaisessa vaiheessa selkeällä kielellä.

Kaksi tapaa julkaista

Sovelluksen siirtämiseen hosting-palveluun on kaksi yleistä tapaa:

  • Gitistä: yhdistätte koodivarastonne (GitHubissa), ja hosting-palvelu julkaisee sovelluksen automaattisesti aina, kun työnnätte uusia muutoksia palveluun. Tämä on nykyaikainen ja suositeltu tapa.
  • Vedä ja pudota: yksinkertaisissa staattisissa sivustoissa Netlifyssä voitte kirjaimellisesti vetää projektikansion selaimeen.

Git-pohjainen tapa on standardi, koska se tarjoaa automaattiset päivitykset. Älkää huolehtiko, vaikka Git olisi teille uusi — tekoäly voi määrittää sen puolestanne.

Vaihe 1: Siirtäkää koodi GitHubiin

Hosting-palvelut julkaisevat sovelluksia GitHubista, joka on verkossa sijaitseva koodin säilytyspaikka. Jos projektinne ei ole vielä siellä, pyytäkää tekoälyä avuksi.

Cursorissa tai Claude Codessa tekoälyavustajanne voi suorittaa komennot puolestanne. Kuvatkaa vain, mitä haluatte tehdä.

My project is a folder on my laptop called "my-portfolio". It's not on GitHub yet.

Walk me through getting it onto GitHub:
1. The exact commands to create a Git repo and push it.
2. How to make a new GitHub repository.
3. Explain each command in one short sentence.

I'm a beginner — assume I've never used Git.

Vaihe 2: Yhdistäkää Verceliin

Kun koodinne on GitHubissa, julkaiseminen Verceliin on lähes hämmästyttävän helppoa:

  • Kirjautukaa Verceliin GitHub-tilillänne.
  • Napsauttakaa Add New Project ja valitkaa koodivarastonne.
  • Vercel tunnistaa automaattisesti käyttämänne viitekehyksen ja asetukset.
  • Napsauttakaa Deploy.

Noin minuutissa saatte julkisen URL-osoitteen, kuten my-portfolio.vercel.app. Siinä kaikki — sovelluksenne on nyt internetissä.

Vaihe 2 (vaihtoehto): Yhdistäkää Netlifyhin

Pidättekö enemmän Netlifystä? Prosessi on lähes samanlainen:

  • Kirjautukaa Netlifyhin GitHub-tunnuksillanne.
  • Napsauttakaa Add new site → Import an existing project.
  • Valitkaa koodivarastonne.
  • Vahvistakaa koontiasetukset ja napsauttakaa Deploy.

Jos kyseessä on tavallinen staattinen sivusto (vain HTML:ää, CSS:ää ja JavaScriptiä), voitte ohittaa GitHubin ja vetää kansion suoraan Netlifyn hallintapaneeliin. Molemmat reitit päättyvät samalla tavalla: saatte julkisen linkin.

Koontiasetukset selitettynä

Määrityksen aikana voitte nähdä kenttiä, kuten Build Command ja Output Directory. Ne kertovat hosting-palvelulle, miten sovellus valmistellaan.

  • Build Command: suoritettava komento, usein npm run build.
  • Output Directory: hakemisto, johon valmiit tiedostot sijoitetaan, usein dist tai build.

Suosittujen viitekehysten kohdalla hosting-palvelu täyttää nämä tiedot automaattisesti. Jos olette epävarmoja, jättäkää oletusarvot voimaan — tai kysykää tekoälyltä, mitä projektinne tarvitsee.

Anna tekoälyn selvittää koontiasetukset

Jos hosting-palvelu ei tunnista projektianne automaattisesti, antakaa asetuksenne tekoälylle ja pyytäkää sitä kertomaan täsmälleen, mitä kenttiin tulee kirjoittaa. Näin säästätte paljon arvailua.

Vercel is asking me for a Build Command and Output Directory, but I don't know what to put.

Here's my project:
- It's a Vite + React app
- My package.json has a "build" script
- There's a "dist" folder after building

Tell me exactly what to type in each field, and explain why.

Ensimmäinen onnistunut julkaisu

Kun koonti valmistuu, näette vihreän onnistumisviestin ja napsautettavan linkin. Avatkaa se — ja siinä sovelluksenne on, koko maailman käytettävissä.

Jakakaa linkki ystävällenne ja pyytäkää häntä avaamaan se puhelimellaan. On merkittävä saavutus nähdä projektinne toimivan jonkun toisen laitteella.

Tässä on hauska koodinpätkä: pieni ilmoituspalkki, jonka voitte lisätä muistuttamaan kävijöitä siitä, että sovelluksenne on juuri julkaistu.

function shipBanner(appName, liveUrl) {
  return "\uD83D\uDE80 " + appName + " is now live at " + liveUrl + "!";
}

console.log(shipBanner("My Portfolio", "my-portfolio.vercel.app"));

Kun julkaisu epäonnistuu

Joskus julkaisu epäonnistuu — se on normaalia, ei katastrofi. Hosting-palvelu näyttää koontilokin: pitkän viestin, joka kertoo, mikä meni pieleen.

Teidän ei tarvitse lukea sitä rivi riviltä. Kopioikaa virhe ja antakaa se tekoälylle. Julkaisujen virheenkorjaus on yksi asioista, joissa tekoäly on parhaimmillaan.

  • Etsikää koontilokista punaisella näkyvä virhe.
  • Kopioikaa se.
  • Pyytäkää tekoälyä selittämään ja korjaamaan se.

Liitä koontivirhe tekoälylle

Näin muutatte pelottavalta vaikuttavan koontivirheen nopeaksi korjaukseksi. Antakaa tekoälylle virhe sekä projektianne koskevat taustatiedot, jotta saatte parhaan tuloksen.

My Vercel deploy failed. Here's the error from the build log:

  Error: Cannot find module 'react'
  npm ERR! code ELIFECYCLE

Context:
- It's a React app that runs fine on my laptop
- I pushed it to GitHub and connected Vercel

Explain in plain English what's wrong and give me the exact steps to fix it so the deploy succeeds.

Automaattiset päivitykset

Tässä on Git-pohjaisen hostingin taika: kun yhteys on kerran määritetty, tätä asetusta ei tarvitse tehdä uudelleen. Aina kun työnnätte uutta koodia GitHubiin, hosting-palvelu muodostaa uuden version ja julkaisee sen automaattisesti.

Tehkää muutos, tallentakaa se Gitiin, työntäkää se palveluun — ja hetkeä myöhemmin julkinen sovelluksenne päivittyy. Tätä kutsutaan jatkuvaksi julkaisuksi, ja juuri siksi rakentajat pitävät Vercelistä ja Netlifystä.

Tutustumme turvallisiin päivityksiin myöhemmässä oppitunnissa. Toistaiseksi muistakaa: julkaiskaa kerran, päivittäkää ikuisesti.

Pikatarkistus

Olette juuri julkaisseet ensimmäisen sovelluksenne. Varmistetaan, että ymmärrätte, miten se toimii.

Vastaa interaktiivisessa oppitunnissa

Kertaus: sovelluksenne on verkossa

Opitte juuri julkaisemaan sovelluksen käytännössä:

  • Siirtäkää koodinne GitHubiin (tekoäly voi hoitaa Git-vaiheet).
  • Yhdistäkää koodivarasto Verceliin tai Netlifyhin ja napsauttakaa Deploy.
  • Koontiasetukset tunnistetaan yleensä automaattisesti — kysykää tekoälyltä, jos olette epävarmoja.
  • Epäonnistunut julkaisu voidaan korjata: liittäkää koontivirhe tekoälylle.
  • Määrityksen jälkeen jokainen työntö palveluun käynnistää automaattisen uudelleenjulkaisun.

Seuraavaksi teemme sovelluksesta ammattimaisemman mukautetulla verkkotunnuksella ja turvallisilla ympäristöasetuksilla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
25
Oppitunnit
100
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Julkaiseminen Verceliin tai Netlifyyn” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vibe-koodaus-oppimispolun 3 oppituntia, myös oppitunnin “Julkaiseminen Verceliin tai Netlifyyn”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Julkaiseminen Verceliin tai Netlifyyn”?

Yhden napsautuksen hosting tekoälyn avulla. Harjoittelet Vibe-koodaus-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vibe-koodaus-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vibe-koodaus-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Julkaiseminen Verceliin tai Netlifyyn”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vibe-koodaus-oppitunnilla?

Kyllä. Jokainen Vibe-koodaus-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Mitä julkaiseminen tarkoittaa
  2. Julkaiseminen Verceliin tai Netlifyyn
  3. Mukautetut verkkotunnukset ja ympäristöt
  4. Julkaistun sovelluksen päivittäminen
← Takaisin: Vibe-koodaus