Github repositorio ja sivun julkaiseminen Vercelin avulla

15.07.2023

Kun luodaan uusi FullStack projekti, kannattaa tietysti kehitettävät koodit tallentaa versionhallintaan talteen. Github on varmasti suosituin tällainen versionhallintapalvelu, jossa paljon julkaistaan Open Source - projekteja avoimesti ja jota käytetään myös omien privaattien web-sivu projektien hallinnointiin.

Vercel on Amerikkalainen pilvipalveluyritys, joka tarjoaa web-sivujen julkaisu palvelua. Sen avulla voi kuka vaan julkaista web-sivun Internettiin suoraan Github-repositorion avulla.

Pienet web-sivut ja FullStack projektit on kehitysvaiheessa todella helppoa julkaista testausta varten, täysin ilmaiseksi. Sitten kun käyttäjämäärät ja liikennöinti kasvaa, tulee tietysti maksupolitiikka mukaan. Mutta varsinkin kehitysvaiheessa, Vercel on todella kätevä palvelu web applikaatioiden kehittäjille.

Github Desktop on hyvä työkalu, jonka avulla voi graafisesti luoda Github-repositorioita ja näin suorittaa versionhallintaa omalle kehityskoodille. Sen voi ladata ja asentaa ilmaiseksi omalle kehitys tietokoneelle.


Uuden repositorion luominen on helppoa. Add-valikosta valitaan "Create new repository".

Täytetään tiedot, kuten repositorion nimi, kuvaus, kansion paikka oman tietokoneen kovalevyllä, lisätään "Readme" tiedosto projektiin, lisätään myös Git ignore tiedosto (johon voidaan määrittää, mitä ei kopioida versionhallintaan) ja valitaan haluttu lisenssi tyyppi. (MIT- Licence on yleisesti käytetty, Open Source projekteissa. Se tarkoittaa, että koodi on sellainen kun se on, kaikille avoin, vapaasti kenen vaan kopioitavissa ja kehitettävissä ja alkuperäistä kehittäjää ei voida syyttää koodin mahdollisista virheistä.)

Painetaan Create repository painiketta, jolloin työkalu luo nyt tämän uuden kansion oman koneen tietokoneelle ja lisää sinne ne Readme ja Gitignore tiedostot.

Seuraavaksi painetaan Publish - painiketta. Tällöin tämä juuri luotu uusi kansio kopioidaan tieto myös Github-palveluun talteen automaattisesti.

Näin on helposti luotu uusi Github repositorio. Ja nyt voidaan alkaa Visual Studio Coden ja Node.js avulla alkaa kehittämään omaa FullStack-projektia.

Jossain vaiheessa, kun on ensin testattu omalla koneella sovelluksen toimintaa riittävästi, tulee tarve saada julkaistua kehitettävä FullStack websovellus Internettiin.

Seuraavaksi voidaan kokeilla web-sovelluksen julkaisua Vercelin palvelun avulla.

Mennään Vercelin web-sivulle, luodaan sinne tunnukset& kirjaudutaan sisälle palveluun (se käy helposti omien Github-tunnusten avulla) ja annetaan Vercelille lupa päästä käsiksi omiin Github-repositorioihin. (Voi myös valita yksitellen, ne mihin Vercelin on lupa päästä)

Valitaan "New project" ja "Import Git Repository". Sitten haetaan se haluttu repositorio, joka halutaan julkaista internettiin.

Tässä "Configure Project" näkymässä on mahdollista asetella projektiin liittyviä asetuksia. Usein asetukset ovat jo valmiiksi oikein. Vercelin palvelu osaa hakea Github-repositoriosta automaattisesti "Package.json"-tiedoston ja asentaa kaikki tarvittavat Node.js Javascript kirjastot.

Seuraavaksi Vercelin palvelu lähtee tekemään "Deploy"-toiminnetta. Eli se kääntää projektin, julkaisua varten. Joskus tässä vaiheessa saattaa tulla virheilmoituksia, jos koodin kääntäminen epäonnistuu. Tällöin täytyy itse tarkastaa missä kooditiedostossa mahdollinen virhe sijaitsee ja korjata se Github-repositorioon. Vercel lähtee automaattisesti kääntämään koodia uudelleen, kun se huomaa Github-repositorion tiedostojen muuttuneen.

Kun koodin kääntäminen "Deploy" on suoritettu, web-sivu on nyt jo julkaistu Internettiin. Jokainen julkaisu tuottaa oman internet osoitteen, Vercel tekee sen automaattisesti.

https://  repositoriosi-main.vercel.app   on nyt  tämän juuri julkaistun web-sivun osoite.

Kaikki pääsevät tähän nyt käsiksi Internetin kautta. Ja voivat osallistua FullStack web-palvelun testaamiseen ja kehittämiseen.

Tietysti, nyt täytyy vielä miettiä se tietokanta.  Miten FullStack-palvelu yhdistetään siihen käytettävään PostgreSQL-tietokantaan, jotta web-palvelu toimii, kuten omalla kehityskoneella.

PostgreSQL tietokanta on mahdollista myös ulkoistaa pilvipalveluksi. Vercel myös tarjoaa nykyisin omaa PostgreSQL-palvelua. (https://vercel.com/docs/storage/vercel-postgres/quickstart)

Täytyy kokeilla, miten se toimii ja onko se ilmainen, pienessä käytössä.

Railway on myös yksi toinen Amerikkalainen yritys, joka tarjoaa tietokantapalveluja muille. Ilmaiseksi on mahdollista saada myös sitä kautta pieni postgresql-tietokanta käyttöön. Railwayn palveluun tietysti täytyy myös luoda tunnukset, kirjautua sisään ja luoda uusi tietokanta. Asettaa sille käyttäjä ja salasana jne. 

Sen jälkeen voidaan muokata oma Github-projekti käyttämään Railwayn tarjoamaa tietokantapalvelua.

Tässä tietokannan luomisessa ja asettamisessa projektiin on jo sen verran iso työ, että siitä kannattaa kirjoittaa ihan oma Blog-postaus. 


Toivottavasti tässä oli lukijalle uusia ajatuksia ja vinkkejä! 

Github ja Vercel toimivat hyvin yhteen ja niiden avulla on tosi helppoa nykypäivänä julkaista kehitettävä sovellus testikäyttöön Internettiin.

Tässä on osoite Github repositorioon:

https://github.com/hennahoo/JoogaPlanneri-FullStack-app-main


Tässä on osoite, josta pääsee jo testaamaan ensimäistä FrontEnd versiota:

https://jooga-planneri-full-stack-app-main.vercel.app/

Huom!  Back end, eli tietokantapuoli ei nyt vielä heti toimi, täytyy opetella ensin, miten saadaan Vercel/Railway palvelujen kautta PostgreSQL-tietokanta tuotua mukaan.


Luo kotisivut ilmaiseksi! Tämä verkkosivu on luotu Webnodella. Luo oma verkkosivusi ilmaiseksi tänään! Aloita