Szia Habr!
Ebben a cikkben elmondom, hogyan lehet egyszerűen és egyszerűen tárolni egy statikus webhelyet a Yandex technológiák segítségével, nevezetesen Objektum tárolása.
A végén lesz egy web-hosztolt webhelye, amely külső hivatkozáson keresztül érhető el.
Ez a cikk hasznos lesz, ha
- Kezdő fejlesztő, aki éppen programozni tanul;
- Egy fejlesztő, aki készített egy portfóliót, és nyilvánosan szeretné elhelyezni, hogy megmutassa barátainak és munkáltatóinak.
Magamról
Nemrég egy SaaS szolgáltatást fejlesztettem, egyfajta piacteret, ahol az emberek sportedzőket találnak a személyi edzéshez. Az Amazon Web Services verem (a továbbiakban: AWS) használata. De minél mélyebbre merültem a projektben, annál több árnyalatot tudtam meg a startup megszervezésének különböző folyamatairól.
A következő problémákkal találkoztam:
- Az AWS sok pénzt emésztett fel. Miután 3 évet dolgoztam Enterprise cégeknél, megszoktam az olyan örömöket, mint a Docker, a Kubernetes, a CI/CD, a kék zöld telepítés, és mint kezdő startup programozó, ugyanezt szerettem volna megvalósítani. Ennek eredményeként arra a következtetésre jutottam, hogy az AWS 300-400 dollárt fogyasztott havonta. A Kubernetes bizonyult a legdrágábbnak, körülbelül 100 dollárnak, egy klaszter és egy csomópont minimálbérével.
PS Ezt az elején nem kell megtenni. - Ezután a jogi oldalra gondolva megismertem a 152-FZ törvényt, amely valami ilyesmit tartalmazott: "Az Orosz Föderáció állampolgárainak személyes adatait az Orosz Föderáció területén kell tárolni", egyébként pénzbüntetés, amit nem akartam. Úgy döntöttem, hogy még azelőtt foglalkozom ezekkel a kérdésekkel, mielőtt felülről eszembe jutna :).
Ihletett Az Amazon Web Services-ről a Yandex.Cloudra való infrastruktúra áttelepítésével kapcsolatban úgy döntöttem, hogy részletesebben tanulmányozom a Yandex veremét.
Számomra a Yandex.Cloud legfontosabb jellemzői a következők voltak:
- 2-3-szor olcsóbb (a fenti cikk és a nyilvános árlisták szerint)
- , amit a nagy Amazon még nem tud elérni.
Tanulmányoztam a szolgáltatás többi versenytársát, de akkoriban a Yandex nyert.
Meséltem magamról, hogy nekiláthassunk.
0. lépés: Készítse elő a helyet
Először is szükségünk van egy weboldalra, amelyet el szeretnénk helyezni az interneten. Mivel Angular fejlesztő vagyok, készítek egy egyszerű SPA alkalmazássablont, amit aztán felteszek az internetre.
PS Aki érti az Angular-t vagy ismeri a dokumentációját , menj .
Telepítsük az Angular-CLI-t a SPA-helyek létrehozásához Angularban:
npm install -g @angular/cliHozzon létre egy Angular alkalmazást a következő paranccsal:
ng new angular-habr-object-storageEzután lépjen az alkalmazás mappájába, és indítsa el a működésének ellenőrzéséhez:
cd angular-habr-object-storage
ng serve --open
Az alkalmazás elkészült, de még nem áll készen a tárolásra. Állítsuk össze az alkalmazást egy kis buildbe (Production), hogy eltávolítsunk minden felesleges dolgot, és csak a szükséges fájlokat hagyjuk meg.
Angularban ezt a következő paranccsal teheti meg:
ng build --prodA parancs hatására egy mappa jelent meg az alkalmazás gyökerében dist weboldalunkkal.
Művek. Most pedig térjünk át a fogadásra.
Lépés 1.
Menjünk az oldalra és kattintson a „Csatlakozás” gombra.
Megjegyzés:
- A Yandex szolgáltatás használatához szükség lehet a Yandex levelezésére (de ez nem biztos)
- Egyes funkciókhoz pénzt kell befizetnie a személyes számlájára (minimum 500 rubelt).
Sikeres regisztráció és engedélyezés után az Ön személyes fiókjában vagyunk.
A bal oldali menüben ezután meg kell találni az „Object Storage” szolgáltatást, amelyet az oldal tárolására fogunk használni.
Röviden a kifejezésekkel:
- Az Object Storage egy olyan fájltároló, amely kompatibilis az Amazon hasonló AWS S3 technológiájával, amely saját API-val is rendelkezik a tárolás kódból történő kezelésére, és az AWS S3-hoz hasonlóan statikus webhelyek tárolására is használható.
- Az Object Storage-ban "vödröket" (vödröket) hozunk létre, amelyek külön tárolóterületek fájljaink számára.
Hozzunk létre egyet közülük. Ehhez a szervizkonzolon kattintson a „Vödör létrehozása” gombra.
A vödör létrehozására szolgáló űrlap a következő mezőket tartalmazza, menjünk át rajtuk:
- Vödör neve. Az egyszerűség kedvéért nevezzük a projektet ugyanúgy, mint Angular -
angular-habr-object-storage - Max. méret. Annyira fogadunk, amennyit az oldalunk nyom, mivel az oldal tárolása nem ingyenes, és minden egyes kiosztott gigabájtért egy szép fillért fizetünk a Yandexnek.
- Hozzáférés az objektumok olvasásához. „Nyilvános”-ra állítottuk, hiszen a statikus oldalunk minden egyes fájlját a felhasználónak meg kell kapnia, hogy helyesen lehessen rárajzolni az elrendezést, feldolgozni lehessen a szkripteket stb.
- Hozzáférés az objektumok listájához és Hozzáférés az olvasási beállításokhoz. Hagyja "Limited"-ként. Erre azért van szükség, hogy a vödör belső fájltárolóként használható legyen az alkalmazások számára.
- Tárolási osztály. Hagyja "Normál"-ként. Ez azt jelenti, hogy oldalunkat gyakran látogatják, és ezért az oldalt alkotó fájlok gyakran letöltésre kerülnek. Ráadásul az elem hatással van a teljesítményre és a fizetésre (link beszúrása).
Kattintson a „Csoport létrehozása” gombra, és a vödör létrejön.
Most fel kell töltenünk az oldalunkat a vödörbe. A legegyszerűbb módja, ha megnyit egy mappát a közelben dist webhelyünket, és húzza közvetlenül az oldalra a fogantyúk segítségével. Ez kényelmesebb, mint az „Objektumok betöltése” gombra kattintani, mert ebben az esetben a mappák nem kerülnek átvitelre, és manuálisan kell létrehoznia őket a megfelelő sorrendben.
Tehát az oldal betöltődik a tárhelyre, így a felhasználóknak lehetőséget tudunk biztosítani a tárhely weboldalként való elérésére.
Ehhez a menü bal oldalán kattintson a „Webhely” fülre.
A csoport webhelyként történő beállításának oldalán válassza a „Hosting” lapot. Itt a webhely főoldalát jelöljük, általában index.html. Ha van SPA alkalmazásod, akkor valószínűleg minden hiba a főoldalon is feldolgozásra kerül, így a hibaoldalon az index.html-t is feltüntetjük.
Azonnal látjuk, melyik linken keresztül lesz elérhető oldalunk. Kattintson a Mentés gombra.
Körülbelül 5 perc elteltével a linkre kattintva látjuk, hogy oldalunk már mindenki számára elérhető.
Köszönöm mindenkinek, aki a végéig elolvasta! Ez az első cikkem; azt tervezem, hogy részletesebben leírok más Yandex-szolgáltatásokat és azok integrációját a frontend és a háttértechnológiákkal.
Írja meg a megjegyzésekben, mennyire érdekli Önt a Yandex egyéb szolgáltatásairól vagy az Angular modern fejlesztésben való használatáról.
Forrás: will.com