Ahoj, Habr!
V tomto článku vám ukážu, jak snadno a rychle umístit statickou stránku pomocí technologií Yandex, a to konkrétně Object Storage.
Na konci budete mít webovou stránku umístěnou na internetu, která bude dostupná prostřednictvím externího odkazu.
Tento článek bude užitečný, pokud jste
- Začínající vývojář, který se teprve učí programování;
- Vývojář, který vytvořil portfolio a chce ho zveřejnit, aby ho ukázal přátelům a zaměstnavatelům.
O mně
Nedávno jsem vyvíjel SaaS službu, podobnou tržišti, kde lidé nacházejí sportovní trenéry pro osobní tréninky. Používal jsem technologický stack Amazon Web Services (dále AWS). Čím hlouběji jsem se do projektu ponořil, tím více nuancí jsem se dozvídal o různých procesech organizace startupu.
Narazil jsem na následující problémy:
- AWS spotřebovávalo hodně peněz. Po třech letech práce ve Firemních společnostech jsem si zvykl na takové radosti jako Docker, Kubernetes, CI/CD, blue-green deployment, a jako začínající programátor-startupista jsem chtěl realizovat to samé. Nakonec jsem zjistil, že AWS měsíčně stálo 300-400 dolarů. Nejvíce peněz bral Kubernetes, kolem 100 dolarů, při minimální konfiguraci s jedním klastrem a jednou nodou.
P.S. Na začátku není potřeba takto postupovat. - Poté, co jsem přemýšlel o právní stránce, jsem se dozvěděl o zákonu 152-FZ, který říká zhruba toto: "Osobní údaje občanů RF musí být uchovávány na území RF", jinak hrozí pokuty, což jsem nechtěl. Rozhodl jsem se věnovat těmto otázkám, dokud mi "shora" nepřišlo něco :).
Inspirován o migraci infrastruktury z Amazon Web Services do Yandex. Cloud, jsem se rozhodl podívat se na technologický stack Yandexu podrobněji.
Pro mě byly klíčovými vlastnostmi Yandex. Cloud následující:
- Levnější o 2-3 krát (podle výše uvedeného článku a veřejných cen)
- , což velký Amazon zatím není schopen uskutečnit.
Zkoumal jsem jiné konkurenty tohoto služby, ale v tu chvíli Yandex vyhrával.
O sobě jsem se zmínil, teď můžeme přejít k věci.
Krok 0. Připravíme si stránku
Nejprve budeme potřebovat stránku, kterou chceme umístit na internet. Jako Angular vývojář vytvořím jednoduchou šablonu SPA aplikace, kterou následně umístím na internet.
P.S. Kdo se vyzná v Angularu nebo ví o jeho dokumentaci , přejděte k .
Nainstalujeme Angular-CLI, abychom mohli vytvářet SPA stránky na Angularu:
npm install -g @angular/cliVytvoříme Angular aplikaci pomocí následujícího příkazu:
ng new angular-habr-object-storageNyní přejdeme do složky aplikace a spustíme ji, abychom zkontrolovali její funkčnost:
cd angular-habr-object-storage
ng serve --open
Aplikace byla vytvořena, ale zatím není připravena na hosting. Sestavíme aplikaci do malé verze (Production), abychom odstranili všechny nepotřebné soubory a ponechali pouze ty potřebné.
V Angularu to lze provést následujícím příkazem:
ng build --prodV důsledku tohoto příkazu se v kořenovém adresáři aplikace objevil složka dist s naším webem.
Funguje. Nyní přejdeme k hostingu.
Krok 1.
Přejdeme na stránku a klikneme na tlačítko "Připojit".
Poznámka:
- Pro používání služby Yandex může být potřeba účet u Yandexu (ale to není jisté).
- Pro některé funkce bude nutné vložit peníze na účet v osobním kabinetu (minimálně 500 rublů).
Po úspěšné registraci a autorizaci jsme v osobním kabinetu.
Dále vlevo v menu je nutné najít službu "Object Storage", kterou budeme používat pro hosting webu.
Krátce k termínům:
- Object Storage je úložiště souborů kompatibilní se obdobnou technologií od Amazonu AWS S3, která má také své API pro správu úložiště z kódu a lze ji také použít jako AWS S3 pro hostování statického webu.
- V Object Storage vytváříme "bucket" (bucket / Koš), což jsou samostatná úložiště našich souborů.
Vytvoříme jeden z nich. K tomu v konzoli služby klikneme na tlačítko "Vytvořit bucket".
V formuláři pro vytvoření bucketu jsou následující pole, projdeme si je:
- Jméno bucketu. Pro jednoduchost ho nazveme stejně jako Angular projekt —
angular-habr-object-storage - Max. velikost. Nastavíme tolik, kolik náš web váží, protože skladování webu není zdarma a za každý přidělený gigabajt budeme Yandexu platit drobné.
- Přístup pro čtení objektů. Nastavíme "Veřejný", aby uživatel mohl získat každý soubor našeho statického webu, aby se správně vykreslovala struktura, fungovaly skripty atd.
- Přístup k seznamu objektů a Přístup k nastavení čtení. Necháme "Omezený". To je potřeba k tomu, abychom mohli používat bucket jako interní úložiště souborů pro aplikace.
- Třída úložiště. Zanecháváme "Standardní". To znamená, že náš web bude často navštěvován, a tedy i často stáhnou soubory, které web tvoří. Navíc tento bod ovlivňuje výkon a platbu (vložit odkaz).
Klikneme na "Vytvořit bucket" a bucket je vytvořen.
Nyní je potřeba nahrát náš web do bucketa. Nejjednodušší způsob je otevřít vedle složku dist našeho webu a přetáhnout ji přímo na stránku. Je to pohodlnější než kliknout na tlačítko "Nahrát objekty", protože v takovém případě se složky nepřenášejí a bude potřeba je ručně vytvořit ve správném pořadí.
Takže, web byl nahrán do úložiště, takže můžeme uživatelům poskytnout možnost přistupovat k úložišti jako k webu.
Za tímto účelem vlevo v menu klikneme na kartu "Webová stránka".
Na stránce nastavení bucketa jako webu vybíráme kartu "Hosting". Zde uvádíme hlavní stránku webu, obvykle to je index.html. Pokud máte SPA aplikaci, pravděpodobně se všechny chyby zpracovávají také na hlavní stránce, proto uvedeme na stránce chyb také index.html.
Okamžitě vidíme, na jakém odkazu bude náš web dostupný. Klikneme na uložit.
Za minutu 5, přechodem na odkaz vidíme, že nyní je náš web dostupný všem zájemcům.
Děkuji všem, kdo dočetli až do konce! Tohle je můj první článek, plánuju dále popsat další služby Yandexu a jejich integraci s frontendovými a backendovými technologiemi.
Napište do komentářů, jak moc vás zajímá dozvědět se o dalších službách Yandexu nebo o použití Angularu v moderním vývoji.
Zdroj: habr.com
