Helló, Habr!
Ebben a cikkben arról fogok beszélni, hogyan lehet egyszerűen és könnyedén statikus weboldalt létrehozni a Yandex technológiáinak segítségével, nevezetesen Object Storage.
A cikk végére egy online elérhető weboldala lesz, amelyet külső hivatkozás segítségével érhet el.
Ez a cikk hasznos lesz, ha Ön
- Kezdő fejlesztő, aki éppen a programozásra tanul;
- Fejlesztő, aki elkészítette a portfólióját, és szeretné azt nyilvánosan elérhetővé tenni, hogy megmutathassa barátainak és munkáltatóinak.
Rólam
Nemrégiben egy SaaS szolgáltatást fejlesztettem, ami egyfajta piactér, ahol az emberek sportedzőket találhatnak személyi edzésekhez. Az Amazon Web Services (továbbiakban AWS) stack-et használtam. De minél mélyebben merültem a projektbe, annál több árnyalatot tudtam meg a startup szervezés különböző folyamatairól.
A következő problémákkal szembesültem:
- Az AWS sok pénzt emésztett fel. Miután 3 évet dolgoztam vállalati cégeknél, hozzászoktam az olyan örömökhöz, mint a Docker, Kubernetes, CI/CD, blue green deployment, és mint kezdő programozó startupere, szerettem volna ugyanazt megvalósítani. Végül arra jutottam, hogy az AWS havonta 300-400 dollárt fogyasztott. A legdrágább a Kubernetes volt, körülbelül 100 dollár, egy klaszterrel és egy noddal a minimális beállítással.
P.S. Kezdetben nem szükséges így csinálni. - Ezután, a jogi oldalra gondolván, megismertem a 152-FZ törvényt, amely nagyjából a következőket mondja: "A Orosz Föderáció állampolgárainak személyes adatait Oroszország területén kell tárolni", különben büntetések, amiket nem szerettem volna. Úgy döntöttem, foglalkozom ezekkel a kérdésekkel, míg "fentről" nem támadnak rám :)
Inspirálva az Amazon Web Services-ből a Yandex.Cloud-ba való migrációról, úgy döntöttem, hogy alaposabban tanulmányozom a Yandex stack-jét.
Számomra a Yandex.Cloud kulcsfontosságú jellemzői a következők voltak:
- 2-3-szor olcsóbb (a fent említett cikk és a nyilvános árak szerint)
- , amit az óriási Amazon még nem tud megvalósítani.
Tanulmányoztam a szolgáltatás más versenytársait is, de akkor a Yandex győzött.
Rólam beszéltem, most térjünk át a lényegre.
0. lépés. Készítsük elő a weboldalt
Először szükségünk lesz egy weboldalra, amelyet az interneten szeretnénk elérhetővé tenni. Mivel Angular fejlesztő vagyok, egyszerű SPA alkalmazás sablont készítek, amelyet később az interneten elhelyezek.
P.S. Akik jártasak az Angularban, vagy ismerik a dokumentációját , lépjünk a .
Telepítsük az Angular-CLI-t, hogy SPA weboldalakat hozzunk létre Angularral:
npm install -g @angular/cliHozzuk létre az Angular alkalmazást a következő parancs segítségével:
ng new angular-habr-object-storageEzután lépjünk be az alkalmazás mappájába, és indítsuk el, hogy ellenőrizzük a működését:
cd angular-habr-object-storage
ng serve --open
Az alkalmazás létrejött, de még nem készült el a hostingra. Készítsünk egy kisebb buildet (Production), hogy eltávolítsuk a felesleges részeket, és csak a szükséges fájlokat hagyjuk meg.
Angularban ezt a következő parancs segítségével tehetjük meg:
ng build --prodEnnek a parancsnak az eredményeként az alkalmazás gyökerében megjelent egy mappa dist a weboldalunkkal.
Működik. Most lépjünk tovább a hostingra.
1. lépés.
Lépjünk a weboldalra és kattintsunk a "Kapcsolódás" gombra.
Megjegyzés:
- A Yandex szolgáltatás használatához szükség lehet Yandex email címre (de ez nem biztos)
- Néhány funkcióhoz pénzt kell feltöltenünk a személyes fiókunkba (minimum 500 rubel).
A sikeres regisztrálás és bejelentkezés után az önálló fiókunkban vagyunk.
Ezután bal oldalon a menüben meg kell találnunk az "Object Storage" szolgáltatást, amelyet a weboldalunk hosztolásához fogunk használni.
Röviden a kifejezésekről:
- Az Object Storage egy fájlstorage, amely kompatibilis az Amazon AWS S3 hasonló technológiájával, amelynek saját API-ja is van a storage kódon keresztüli kezelésére, és az AWS S3-hoz hasonlóan használható statikus weboldal elhelyezésére is.
- Az Object Storage-ban "bödönöket" (bucket) hozunk létre, amelyek a fájljaink külön tárolói.
Hozzunk létre egyet közülük. Ehhez a szolgáltatás konzolján kattintsunk a "Bödön létrehozása" gombra.
A bödön létrehozási formjában a következő mezők találhatók, nézzük át őket:
- Bödön neve. Az egyszerűség kedvéért nevezzük el ugyanúgy, mint az Angular projekt —
angular-habr-object-storage - Max. méret. Olyan nagyságot állítsunk be, amennyi a weboldalunk mérete, mivel a honlap tárolása nem ingyenes, és minden egyes kiemelt gigabájtért, kis pénzt fogunk fizetni a Yandexnek.
- Objektumok olvasási hozzáférése. Állítsuk "Nyilvános"-ra, mivel a felhasználónak hozzá kell férnie minden fájlhoz a statikus weboldalunkon, hogy a dizájn helyesen megjelenjen, a scriptjeink működjenek stb.
- Objektumok listájához és a beállítások olvasási hozzáféréséhez. Hagyjuk "Korlátozott"-ra. Ez szükséges ahhoz, hogy a bödönt belső fájl tárolásához használhassuk az alkalmazások számára.
- Tároló osztály. Hagyjuk a "Standard"-ot. Ez azt jelenti, hogy a weboldalunkat gyakran látogatni fogják, így gyakran töltenek le fájlokat, amelyek a weboldalt alkotják. Ezen kívül a választás hatással van a teljesítményre és a költségekre (link beillesztése).
Kattintsunk a "Bucket létrehozása" gombra, és a bucket létrejött.
Most fel kell töltenünk a weboldalunkat a bucketbe. A legegyszerűbb módja, ha megnyitunk egy mappát a weboldalunk mellett, dist majd egyszerűen áthúzzuk a fájlokat az oldalra. Ez kényelmesebb, mint a "Fájlok feltöltése" gombra kattintani, mert így a mappák nem kerülnek átkonvertálásra és kézzel kell őket létrehozni a megfelelő sorrendben.
Tehát, a weboldal feltöltve a tárolóba, most lehetőséget adhatunk a felhasználóknak, hogy a tárolóhoz weboldalként férjenek hozzá.
Ehhez bal oldalon a menüben kattintsunk a "Weboldal" fülre.
A bucket mint weboldal beállításainak oldalán válasszuk a "Hosting" lapot. Itt adjuk meg a weboldal kezdőlapját, ami általában index.html. Ha SPA alkalmazást használ, akkor valószínűleg az összes hibát is a kezdőlap kezel, ezért írjuk be a hibaoldalra is az index.html-t.
Azonnal láthatjuk, milyen linken lesz elérhető a weboldalunk. Kattintsunk a mentésre.
Néhány perc múlva, a linken át járva, látjuk, hogy most már a weboldalunk mindenki számára elérhető.
Köszönöm mindenkinek, aki végigolvasott! Ez az első cikkem, és a jövőben más Yandex szolgáltatásokról és azok frontend és backend technológiákba való integrálásáról szeretnék írni.
Írjátok meg kommentben, mennyire érdekelne titeket más Yandex szolgáltatások vagy az Angular használata a modern fejlesztésben.
Forrás: habr.com
