Moderni Web-sovelluskehitys – Osa4 Vercel julkaisu

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.

Ilmainen PostgreSQL tietokanta Vercel palvelun kautta

Seuraavaksi kokeillaan liittää Vercelin tarjoama ilmainen postgresql (Neon) storage palvelu Vercel-projektiin ja muokataan .env tiedostoa tarvittavilta osin.

Näin web-sovelluksen pitäisi lähteä toimimaan Vercelin palvelimella, kuten meidän paikallisella koneella, Virtualbox-hiekkalaatikossa, jossa koodia on tähän asti pääasiassa kehitetty.

Kirjaudu sisälle Vercel palveluun ja valitse “Storage” välilehti.

Paina Create, “Postgres painiketta”, luodaksesi uuden tietokannan.

Valitse Postgres.

Kirjoita tietokannalle haluamasi “tietokannan nimi” (Database Name).

Paina “Connect-painiketta”, yhdistääksesi tämän uuden tietokannan projektiin mukaan.

.env local välilehdeltä näet POSTGRES_URL=”******************” polun, joka sinun täytyy tietysti kopioida omaan .env tiedostoosi, ja päivittää projekti Vercelin palvelimella.

Koska tietokantana käytetään, Neonin tarjoamaa “serverless” postgres tietokantaa, joudutaan tähän “url-rimpsun” perään vielä laittamaan yksi tarkentava vipu:   ( ?schema=public&pgbouncer=true)

Tähän löytyi apua googlaamalla,  

https://stackoverflow.com/questions/71026259/prisma-postres-error-prepared-statement-s0-already-exists

https://www.prisma.io/docs/guides/performance-and-optimization/connection-management/configure-pg-bouncer

……pooler.us-east-1.postgres.vercel-storage.com:5432/verceldb”

…… pooler.us-east-1.postgres.vercel-storage.com:5432/verceldb?schema=public&pgbouncer=true”

Nyt pitää tietenkin tallentaa .env tiedosto ja kommitoida muutos githubin repositorioon.

Vercelin pilvipalvelu huomaa automaattisesti muutoksen github-repositoriossa ja lähtee kääntämään projektin uudelleen Vercelin palvelimelle.

Verce

Kuinka Vercel voi tarjota ilmaiseksi tietokantaa kaikkien kehittäjien käyttöön?

 – No ilmaiseksi saa vain yhden Storage-tietokannan / tunnukset, ja kovin iso ei tietokantakaan voi olla, vain 256 Megatavua maksimissaan.

– Vercel tietysti laskuttaa muista asioista, ja kerää ilmaispalvelujen avulla käyttäjiä omalle pilvipalvelulleen.

PostgreSQL-tietokanta tarjotaan vielä kokeiluvaiheessa olevalla “Neon-toteutuksena”. Tämä on uudenlainen avoin toteutustapa, jolla postgresql palvelimista pyritään tekemään “Serverless-arkkitehtuuriin” sopivia. Tässä työssä on vahvasti mukana mm. suomalainen tietokantakehittäjä Heikki Linnakangas;