2024. április 16., kedd

Gyorskeresés

Alap NodeJS szerver a Heroku-n

Írta: | Kulcsszavak: node . js . heroku . webfejlesztés

[ ÚJ BEJEGYZÉS ]

Ebben a blogbejegyzésben megmutatom, hogy hogyan készíthetsz el egy alap (default) Node.JS szervert a Herokun-n. Illetve a szerver környezeti változók használatát is bemutatom.

De először röviden leírom, hogy mi az a Heroku, azok számára, akik nem ismerik.
A Heroku egy felhőplatform, amely lehetővé teszi különböző webalkalmazások futtatását és ezek számára szerver infrastruktúrát biztosítson.

Először is hozzunk létre a Githubon egy repo-t. Innen lehet majd feltölteni a Node.JS szerverfájlokat a Herokura.

A package.json fájlba beírhatjuk a webalkalmazásunk nevét, leírását, verziószámát és akár függőségeket adhatunk majd a Node.JS alkalmazásunkhoz.
A scripts.start-al hivatkozhatunk a szerverünk alapértelmezett fájljára.

A Heroku a futáshoz megkövetel egy Procfile-t is a képen látható sorral. Hozzuk ezt is létre a Git-en.

Írjuk meg a Node.JS szerverfájl, úgy, ahogy az localhost-on történő használat esetén is szeretnénk tenni, benne a legfontosabb adatokkal, mint a működési port.

Látogassunk el a Heroku.com oldalra és regisztráljunk, ha még nem tettük volna.
Az adminisztrátori felületen a New opciót használva hozhatunk létre webalkalmazást egyedi elnevezéssel. Akár saját domaint is hozzáadhatunk. Ingyenes csomagban 5 appot tudunk létrehozni.

Kiválaszthatjuk a szervert, hogy az alkalmazásunk melyik régióban működjön. Célszerű azt a régiót használni, ahonnan az alkalmazásunkat a legtöbben el szeretnék érni.

Ha létrehoztuk az alkalmazásunkat, kattintsunk rá, majd a settings rész alatt adjuk hozzá a build-pack-et, amivel használni szeretnénk.
A képen látható, hogy Node.JS mellett PHP, Java, Python, Ruby, Go és pár egyéb pack is használható.
Nekünk most a Node.JS kell.

A fiókbeállításpk alatt kapcsoljuk hozzá a Github fiókunkat a Herokuhoz.

Ismét az applikácóra kattintva válasszuk a "Deploy" lehetőséget.
Deploy Method legyen a Github. A Connect to Github résznél megkereshetjük a repo-t, amit fel szeretnénk tölteni a Herokura. Itt válasszuk azt a repo nevet, amiben a fent ismertetett package.json, Procfile és index.js fájlokat létrehoztuk.

Válasszuk ki, hogy melyik branch-et szeretnénk hozzáadni (alapértelmezetten a master vagy main szokott lenni). Kattintsunk a Deploy Branch gombra.
A fentebb található Enable Automatic Deploys gombbal automatizálhatjuk is a folyamatot.

Ezt látjuk ha elindult a deploy. Ez egy kis időt vesz igénybe. Ha a Build succeeded feliratot látjuk a logokban, akkor már a finishben vagyunk.

Kattintsunk a View Deploy vagy az Open App gombokra az alkalmazásunk megnyitásához. Ha mindent jól csináltunk, akkor ez a Hello World felirat fogad minket.

Settings->Config Vars alatt úgynevezett szerverkörnyezeti változókat adhatunk az alkalmazásunkhoz.
Ide olyan szenzitív adatokat célszerű megadni, amit a gitre nem tennénk ki. Például egy adatbázishoz szükséges kapcsolódási adatok, jelszavak, tokenek.

A Node.JS esetén a process.env.variablename -el tudunk hivatkozni az egyes változókra. Jelen esetben úgy alakítottam át a kódot,hogy az ownvar nevű környezeti változóm értékét jelenítse meg.

Az alkalmazásunkat újra Deploy-olva és frissítve a böngészőablakot már megjelenik a változtatás.

A NodeJS-ben consol-ozott logok nem a büngésző devtools-ában jelennek meg, hanem a szerver oldali naplófájlban. A Herokuban ez a napló More gomb lenyíló menüjében érhető el.

A Devtools-on csak a Node.JS által generált HTML kimenetet láthatjuk.

A bejegyzésben bemutatott repot itt éred el. Ha nem szeretnél kódolni, csak gyorsan kipróbálnád, akkor csak klónozd le és hozzákapcsolva a Heroku alkalmazásodhoz, máris használhatod és kedvedre változtathatod.
[link]

Ajánlom figyelmedbe még [Facebook csoportunkat] [Youtube csatornánkat] és [Discord szerverünket] továbbá van webfejlesztéssel foglalkozó Messenger csoportunk is.

Hozzászólások

(#1) #97623552


#97623552
törölt tag

Szia! Nekem nem tiszta, hogy ez miért jobb, mint egy sima tárhely, ahol van php, mysql? Ennek csak annyi az előnye, hogy össze lehet kötni Git-tel?

Mondjuk régen minden jobb volt, nem volt frontend, backend, a fejlesztő értett mindenhez is. Most meg... bootstrap, sablonok aztán meg egy sima css-t nem tud megírni, meg nem látja át melyik grafikai elem hova kerül. Szerintem jobb volt, amíg PS-ben megcsinálta az ember a grafikát, szétvágdosta, összerakta css-sel. Igaz akkor még 1024x768 lefedte a userek nagy részét, nem volt ez a mostani őskáosz.
A mai helyzet nekem úgy fest, mint a házépítés, senki nem ért semmihez, de mindenki a másikra mutogat és elkér egy rakás pénzt a hoppon maradt megrendelőtől. (aki a végén kap valami kész sablon klónt a legtöbb esetben. Itt vidéken legalábbis.)

[ Szerkesztve ]

(#2) Goose-T válasza #97623552 (#1) üzenetére


Goose-T
veterán

Talán mert ki tudsz tenne a szerverre NodeJS-ben írt backendet.

Amúgy meg miért volt régen jobb? Manapság rengeteg ingyenes és egyszerűen használható webes framework van, amiben gyorsan össze lehet dobni szép honlapokat, webshopokat, fórumokat stb. Nem kell CSS-sel meg javascripttel sem foglalkozni.

Régen egyszerűbb volt, mert nem volt annyi lehetőség, gagyibbak is voltak a weblapok. Most választhatsz:
1. Megírod 20 évvel korábbi színvonalon egyszerűen (most tekintsünk el a sebezhetőségektől stb.).
2. Választasz frameworköt, amiben ugyanannyi munkával sokkal szebbet csinálhatsz.
3. Megírod modern módon, ami nagyon sok meló, de a lehetőségek határtalanok a rendelkezésre álló eszköztár használatával.

Eladó XBOX: https://tinyurl.com/mvjdennu *** Rockbandám: https://fb.me/scharlotterhodes *** Gitárelektronikai műhelyem: https://www.fb.me/goosetgitar

(#3) bLaCkDoGoNe válasza #97623552 (#1) üzenetére


bLaCkDoGoNe
veterán

Szerintem a "régen minden jobb volt" kijelentéssel nincs igazad. Emlékszem még azokra az időkre, amikor a photoshopban felslice-olt design-t szépen táblázatként exportálta ki az ember, és az volt a layout. Azzal is volt szívás rendesen, hogy a különféle böngészőkben ugyanúgy nézzen ki.

Aztán jöttek a CSS-es, div-ekre épülő design-ok, ami jóval elegánsabbá tette a frontend készítést, a mai framework-ös megoldások (pl. Bootstrap) meg aztán végképp megkönnyítik az ember dolgát – persze nyilván hasznos, ha az ember érti a CSS-t, mert így még rugalmasabban tud dolgozni, ha esetleg valahol bele kell kotorászni valamibe. Szerintem teljesen jó a fejlődés.

"«Fuck does Cuno care?» The boy turns to you. (He doesn't care.)" [+] "The parasite makes nothing for itself. Its only tools are taxes and tithes meant to trick you into offering what it has not earned. In Rapture we keep what is ours." [+] 

(#4) Gargouille


Gargouille
őstag

Az igazság kedvéért azért azt is tegyük hozzá, hogy a modern weboldalak viszont lényegesen erőforrásigényesebbek is, tengernyi "felesleges" js-el és egyéb trash kóddal teletömve... :)

Lassan kiderül, hogy amit korábban abszurd humornak gondoltunk, az csak szimpla jövőbelátás volt.

(#5) dabadab válasza #97623552 (#1) üzenetére


dabadab
titán

Mondjuk régen minden jobb volt, nem volt frontend, backend, a fejlesztő értett mindenhez is.

"Értett" :DDD

Bocs, de szoftverfejlesztőként elképesztő volt látni azt a szintű dilettantizmust, amit az ilyen mindenhezértők csináltak és valószínűleg a grafikusok is ugyanezt gondolták az akkori polihisztorok munkásságáról.

DRM is theft

(#6) D1Rect


D1Rect
félisten

A heroku amúgy tök jó elsőnek, annyi baját találtam, hogy ha egy ideig nem piszkálod az oldalt az első betöltés kicsit lassú, de ez teljesen normális, nem kell meglepődni.

(#7) Bzozoo válasza Gargouille (#4) üzenetére


Bzozoo
tag

Ez nem attól függ, hogy mai kód vagy régi. Ma is lehet szép, minden sz...tól mentes kódot írni, akár Javascript-ben vagy PHP-ben is.

(#8) Bzozoo válasza D1Rect (#6) üzenetére


Bzozoo
tag

PHP-nál a szerveren is ugyan ez van. El kell indítania az első szálat a memóriában, utána már begyorsul. Persze a szerver kitakarítja a memóriát, ha nem használja az ember. Ez teljesen természetes.

További hozzászólások megtekintése...
Copyright © 2000-2024 PROHARDVER Informatikai Kft.