Egy React progi Dockerben: YourPlaces

Egy React progi Dockerben: YourPlaces

feb 23, 2020 | Sandbox

Végy egy kis React-programot

Milyen lépések vezetnek oda, hogy a külvilág számára éljen egy program, mondjuk a node1.webhely.hu címen?

Egy online anyag során készített mintaprogramot kicsit átalakítottam. A kiinduláshoz szerencsére nem kellett túl sokat hozzányúlni, de egy kevés pofozgatás ráfért.

A YourPlaces egyszerű kis “kedvenc helyeim”-megosztó program. Nézegetheted a felhasználók által rögzített helyeket. Az autentikációt saját maga oldja meg: egyszerűen regisztrálhatsz egy név, egy emailcím és egy avatárkép segítségével. Ha regisztráltál, új helyeket vihetsz fel, illetve régiek szövegét szerkesztheted.

Az adatokat NoSQL-ben tárolja (egy MongoDB-hez kapcsolódik a háttérben), a jelszót bcrypttel titkosítja. Érdekes kérdés, hogy az ember rábízza-e az egész hitelesítést, felhasználó tárolást például a firebase-re, vagy maga kezelje?

A programban kisebb trükköket tudtunk gyakorolni, például: amenüt a Routeren kívül tartja a főoldal, így az oldalak között lépkedve ezt a területet nem is frissíti a rendszer.

Szuszakold be egy Dockerbe

Első éles Docker konténerem elkészítése nem öt perc volt, de egyáltalán nem olyan vészes, mint amilyennek tűnik! Az ötlet egyébként régóta a fejlesztők nagy vágya (elkészítem a programot, és azt madj egy okos rendszer szépen kidobálja akármilyen gépre, vagy éppen gépekre, és valahogy megoldja, hogy fusson).

Néhány furmányos dolog azért van. Egy komolyabb terhelést kiszolgáló, több példányban futó programot például fel kell készítsük arra, hogy vagy folyamatosan megosztjuk a munkamenetek adatait (például közös adatbázisban), vagy biztosítjuk, hogy egy felhasználó kérése mindig ugyanarra a gépre jöjjön, vagy eleve REST szerkezetben írjuk a programot. Szerencsére a szóban forgó programot egyelőre csak egy példányban tervezem futtatni (ráadásul eleve REST elven működik), ezzel most nem kell pepecselni.

A program leállíthatósága is kérdéses, és van még néhány apróság, de ezek felett nemes egyszerűséggel most átsiklunk.

Majd tálald saját webcímmel

A szerveren is kellett némi módosítást eszközölni, de talán öt sorra, ha szükség volt. A Docker telepítése, a forrásanyag felmásolása és felélesztése, a webszerver megfelelő moduljainak engedélyezése és a belső port-átirányítás.

Ennyi. Most már bárki regisztrálhat és feltöltheti kedvenc helyeit ide!

Legutóbbi bejegyzések

React-bootstrap minta

React-bootstrap minta

Egy Youtube-videó alapján Találtam egy érdekes youtube-videót, amiben nulláról épít fel a fejlesztő egy minimális react-bootstrap felületet Érdekesebb elemek:  react-app -ot használ react-bootstrap, bootstrap styled-components, hogy a fájlon belül szerkeszthesse a...

Egyszerű Node.js chat

Egyszerű Node.js chat

Andrew Mead remek Node.js Udemy-tanfolyamából merítve egy kicsit továbbfejlesztettem a chat-alkalmazást A rendszer githubra megy, onnan automatikusan Herokura építi újra magát. A felhasználó belépéskor választhat egy tetszőleges szobanevet. Itt láthatjuk az aktív...

Egyszerű css popup

Egyszerű css popup

Kerestem egy egyszerű popup megoldást, ami csak css, nem kell hozzá semmi JS. Természetesen, így nem lehet cookie-khoz rendelni, de néha csak egy kis infóablak kell. Prakash anyagai között találtam egy letisztult, egyszerűt. Szépsége, hogy csak css kell hozzá, oldalon...

Galériába régi képek

Galériába régi képek

Feltöltöttem néhány érdekes képet a galériába. Teljesen önkényesen összeválogatott néhány kép, a fotózásaim legkülönbözőbb területeiről. Illetve... nem csak fotókat találhatsz itt. Történt ugyanis, hogy 2016-17-ben terveztük kiegészíteni mozgóreklámokkal egy...

Három kis JS progi

Végigrágtam magam egy érdekes JavaScript online tanfolyamon, ami során három egyszerű kis JS programot készítettünk el. Notes: egyszerű szövegelemeket tudsz felrögzíteni, jegyzetfüzetként működik. A jegyzeteket a böngésző LocalStorage-területére menti, így...