1/5 - Statikus weboldalak hosztolása

1. A hosztolás

Egész eddig azzal foglakoztunk, hogyan hozhatunk létre egy weboldalt, vagy egy API-t, ami aztán kiszolgálja a felhasználó kéréseit. Korábban ígértem azt is, hogy lesz még szó a hosztolásról, azaz arról, hogyan lehet ezeket az interneten publikusan elérhetővé tenni. Ez azért fontos, mert amíg a lokális gépeden futtatod az alkalmazásod, addig igen nehezen fogsz megkereséseket kapni egy portfólió oldal kapcsán, a lokálisan futtatott webshopodról nem is beszélve. Telefonon jönnek a rendelések, te meg pötyögöd a billentyűzeten az összes ember bevásárlókosarát. Szóval egyszerűbb az élet, ha az oldalad nem csak a lokális hálózaton elérhető. 0. (A localhost-ot egy ideig a google "helyi szellem"-nek fordította, most már áttértek a "helyi kiszolgáló" elnevezésre, így szerencsére már nem kell az EzoTV-t hívni, hogy hány szellem van a lakásban amíg fejlesztesz)

A weboldalakat ma már egyre inkább felhőben hosztolják. Ennek olyan előnyei vannak, mint hogy nem kell érteni az összes hálózati réteghez, tűzfalat konfigurálni (amely megvéd attól, hogy hackerek tönkretegyék a hardvered és a szolgáltatásaid), és magát a hardvert karbantartani.

2. Felhő szolgáltatók

A felhővel valószínűleg találkoztál, ha van google drive-od, one-drive-od, vagy más online tárhelyed. Itt arról van szó, hogy valaki más tárolja helyetted az adataidat "ingyen" (általában azért cserébe, hogy ő elemezheti ezeket az adatokat). A felhőben való hosztolásnál is hasonló dolgoról van szó. Valaki más ad neked egy gépet (esetünkben egy gépnek egy picit szeletét), amin a te alkalmazásod fog futni.

Tehát valójában nem is létezik olyan hogy felhő? Nem. Ez csak valaki másnak a számítógépe. Amin kiépített egy infrastruktúrát és azt a rendelkezésedre bocsátja. 1

3., Github fiók

Ahhoz hogy továbblépj szükséged lesz egy github fiókra. A github egy olyan szolgáltató amely szintén lehetőséget biztosít számodra arra, hogy online tárold a forráskódod. Menj fel a github.com oldalra, és regisztrálj egy fiókot. majd hozz létre egy repository-t.

Add meg a repository nevét és azt hogy ez egy private azaz saját célú repo. Ha ez megvan látni fogsz egy .git végződésű címet. Ez a te saját tárhelyed a szolgáltatónál a forráskódod számára. Olyan mint a bitbucket-es fiók a 3. leckében.

A következőkhöz szükséged lesz valamilyen mintakódra, én ehhez a 2. lecke anyagát javaslom. 

• Hozz létre egy lokális repo-t és másold oda be ezt a kódot (jobb oldalt a zöld "Code" gomb és download as zip.) a .github/workflows mappa kivételével. 
• Majd pedig nyomj egy commit-ot (initial commit).
• Másold ki a .git végződésű címet github-ról és add meg mint remote a source tree-ben. Pont úgy mint a 3-as leckében, utána pedig nyomj egy push-t 

Ezzel feltöltöttük a kódunkat egy github repositoryba.

4. Azure portal és statikus webalkalmazás

A Microsoft felhő szolgáltatása a portal.azure.com. Ahova, ha regisztrálsz ezen az oldalon, akkor a Microsoft egy rakás ingyen dolgot ad neked 1 évig. Plusz havonta elkölthető keretet is kapsz non-commercial, azaz nem üzleti célra. Maga a regisztráció pénzbe nem kerül, de szükség lesz egy bankkártyára, hogy a Microsoft meg tudja erősíteni, hogy ember vagy-e (prepaid kártyát mint a revolut sajnos nem fogadnak el, ezügyben persze már írtam egy mérges hangulatú visszajelzést)

Ha sikerült regisztrálni a következő képernyő fogad. A jobb fölső sarokban át tudod állítani a nyelvet.

Én mondjuk jobban szeretem angolul, mert a neten is könnyebb megtalálni valami hibaüzenetet, ami angolul van. Továbbá felfedeztem egy tök érdekes bug-ot az Azure portal-on. Ha magyar a nyelv akkor sokkal tovább tart míg betölt a statikus webalkalmazás kezdő oldala, így célszerű az angolnál maradni. Ez sajnos egy ilyen iparág. Előbb utóbb meg kell tanulni angolul. Szerencsére az angol-szász mértékegység rendszert nem kell használni (incs, láb stb). Véleményem szerint ha ez kötelező lenne, sokkal kevesebb fejlesztő lenne a világon.

Vagy a Create resource-ra kattintva, vagy simán a fenti keresőbe beírva, hogy "static web app" felugrik pár lehetőség. A "Static Web Apps" -ot válasszuk ki. Ez egy újonnan bevezetett szolgáltatás, amivel statikus weboldalakat tudunk hosztolni. Kattintsunk az Add/Hozzáadás-ra. 

• Válaszd ki az előfizetést, 
• Ha még nincs akkor hozz létre egy erőforrás csoportot.
• Add meg az alkalmazásod nevét
• Régiónak add meg West Europe-ot

Kattints a bejelentkezés github fiókkal gombra, és add meg a bejelentkezési adataid. Ezután válaszd ki a szervezeet , a repo-t (Tárház) és branchet (Ág). Ezután görgess lejjebb és add meg az előre elkészített buildelési elemnek a Custom-ot.

• Fontos! Alkalmazás helye legyen /public. Ugyanis a repo-n belül ez az a publikus mappa ahol a statikus erőforrások vannak!

• Ezután a felülvizsgálat és létrehozás fülön.
• Létrehozás
• Kattintsunk az erőforrás megnyitására
• Jobb fölső sarokban az URL-cím-nél láthatjuk az alkalmazásunk címét.

Erre kattintva a böngésző megnyitja a weboldalunkat. Sajnos el kell telnie pár percnek, amíg ténylegesen hosztolásra kerül az oldalunk, ezért érdemes addig frissítgetni F5-tel amíg betölt.

A végeredmény pedig a már megszokott oldal.

Tippek és trükkök

Ha rámész a set up in desktop gombra, akkor a github szeretné veled letöltetni a saját asztali alkalmazását. Ha ezt letöltötted, és megadtad neki a szükséges engedélyeket, akkor meg fogja kérdezni, hogy szeretnél-e le-clone-ozni egy repository-t. Itt válaszd ki az aktuálisan létrehozott repo-dat, és voila, össze van kötve.

Kérlek, ha van pár perced segítsd a blog működését azzal, hogy névtelen visszajelzést adsz

https://docs.google.com/forms/d/e/1FAIpQLSetAJuTawR7tTW6SYqvqiEsi9AOTdo2LQUEkv2jt43egZF-_Q/viewform