Čau Habr!
V tomto článku vám řeknu, jak snadno a jednoduše hostovat statický web pomocí technologií Yandex, jmenovitě Uložení objektů.
Nakonec budete mít webovou stránku, která bude přístupná přes externí odkaz.
Tento článek vám bude užitečný
- Vývojář začátečník, který se teprve učí programovat;
- Vývojář, který vytvořil portfolio a chce je umístit do veřejné sféry, aby je ukázal přátelům a zaměstnavatelům.
O mně
Nedávno jsem vyvíjel službu SaaS, jakési tržiště, kde lidé nacházejí sportovní trenéry pro osobní trénink. Používal zásobník webových služeb Amazon (dále jen AWS). Ale čím hlouběji jsem se ponořil do projektu, tím více nuancí jsem se dozvěděl o různých procesech organizace startupu.
Narazil jsem na následující problémy:
- AWS spotřebovalo spoustu peněz. Po 3 letech práce v Enterprise společnostech jsem si zvykl na takové radosti jako Docker, Kubernetes, CI/CD, modrozelené nasazení a jako začínající programátor jsem chtěl implementovat to samé. V důsledku toho jsem dospěl k závěru, že AWS spotřebovalo 300-400 babek měsíčně. Kubernetes se ukázal být nejdražší, asi 100 babek, s minimální mzdou jeden cluster a jeden uzel.
PS Není potřeba to dělat na začátku. - Dále, když jsem přemýšlel o právní stránce, dozvěděl jsem se o zákonu 152-FZ, který říkal něco jako následující: "Osobní údaje občanů Ruské federace musí být uchovávány na území Ruské federace", jinak pokuty, což jsem nechtěl. Rozhodl jsem se, že se s těmito problémy poperu, než to na mě přišlo shůry :).
Inspirovaný o migraci infrastruktury z Amazon Web Services na Yandex.Cloud jsem se rozhodl prostudovat zásobník Yandex podrobněji.
Pro mě byly klíčové funkce Yandex.Cloud následující:
- 2-3x levnější (dle článku výše a veřejných ceníků)
- , kterého velký Amazon zatím nemůže dosáhnout.
Studoval jsem další konkurenty této služby, ale v té době vyhrál Yandex.
Řekl jsem vám o sobě, takže se můžeme pustit do práce.
Krok 0. Připravte místo
Nejprve potřebujeme webovou stránku, kterou chceme umístit na internet. Jelikož jsem Angular vývojář, udělám si jednoduchou šablonu SPA aplikace, kterou následně dám na internet.
PS Kdo rozumí Angularu nebo ví o jeho dokumentaci , jít do .
Pojďme nainstalovat Angular-CLI k vytvoření SPA stránek v Angular:
npm install -g @angular/cliVytvořme aplikaci Angular pomocí následujícího příkazu:
ng new angular-habr-object-storageDále přejděte do složky aplikace a spusťte ji, abyste ověřili její funkčnost:
cd angular-habr-object-storage
ng serve --open
Aplikace byla vytvořena, ale ještě není připravena k hostování. Pojďme sestavit aplikaci do malého sestavení (Produkce), abychom odstranili všechny nepotřebné věci a nechali pouze potřebné soubory.
V Angular to můžete udělat pomocí následujícího příkazu:
ng build --prodV důsledku tohoto příkazu se v kořenovém adresáři aplikace objevila složka dist s naším webem.
funguje. Nyní přejděme k hostingu.
Krok 1.
Jděte na webové stránky a klikněte na tlačítko „Připojit“.
Poznámka:
- Chcete-li používat službu Yandex, možná budete potřebovat poštu Yandex (ale není to jisté)
- Pro některé funkce budete muset vložit peníze na svůj účet na svůj osobní účet (minimálně 500 rublů).
Po úspěšné registraci a autorizaci jsme na vašem osobním účtu.
Dále v nabídce vlevo musíte najít službu „Object Storage“, kterou použijeme pro hostování webu.
Stručně řečeno:
- Object Storage je úložiště souborů kompatibilní s podobnou technologií Amazon AWS S3, která má také vlastní API pro správu úložiště z kódu a stejně jako AWS S3 lze použít k hostování statického webu.
- V Object Storage vytváříme "buckety" (buckety), což jsou samostatné úložné oblasti pro naše soubory.
Pojďme vytvořit jeden z nich. Chcete-li to provést, v servisní konzoli klikněte na tlačítko „Vytvořit kbelík“.
Formulář pro vytvoření bucketu má následující pole, pojďme si je projít:
- Název kbelíku. Pro jednoduchost nazvěme projekt stejně jako Angular -
angular-habr-object-storage - Max. velikost. Vsadili jsme tolik, kolik váží naše stránka, protože stránka není uložena zdarma a za každý přidělený gigabajt zaplatíme Yandexu pěkný cent.
- Přístup ke čtení objektů. Nastavili jsme ji na „Veřejné“, protože uživatel musí obdržet každý soubor našeho statického webu, aby na něm bylo možné správně nakreslit rozložení, zpracovat skripty atd.
- Přístup k seznamu objektů a Přístup k nastavení čtení. Nechte to jako "Omezené". To je nezbytné pro použití bucketu jako interního úložiště souborů pro aplikace.
- Třída úložiště. Nechte to jako "Standardní". To znamená, že naše stránky budou často navštěvovány, a proto budou často stahovány soubory, které stránku tvoří. Plus položka ovlivňuje výkon a platbu (vložit odkaz).
Klikněte na „Vytvořit bucket“ a bucket se vytvoří.
Nyní musíme nahrát náš web do bucketu. Nejjednodušší způsob je otevřít složku poblíž dist náš web a přetáhněte jej přímo na stránku pomocí úchytů. Je to pohodlnější než klikání na tlačítko „Načíst objekty“, protože v tomto případě se složky nepřenesou a budete je muset vytvořit ručně ve správném pořadí.
Stránky se tedy načítají do úložiště, takže uživatelům můžeme poskytnout možnost přístupu k úložišti jako webové stránky.
Chcete-li to provést, na levé straně nabídky klikněte na kartu „Webové stránky“.
Na stránce pro nastavení segmentu jako webu vyberte kartu „Hostování“. Zde označujeme hlavní stránku webu, obvykle index.html. Pokud máte aplikaci SPA, pak se pravděpodobně všechny chyby zpracovávají také na hlavní stránce, takže na chybové stránce uvedeme i index.html.
Okamžitě vidíme, přes který odkaz bude naše stránka přístupná. Klikněte na uložit.
Asi po 5 minutách kliknutím na odkaz vidíme, že naše stránky jsou nyní dostupné všem.
Děkuji všem, kteří dočetli až do konce! Toto je můj první článek, plánuji dále popsat další služby Yandex a jejich integraci s frontend a backend technologiemi.
Napište do komentářů, jaký máte zájem dozvědět se o dalších službách Yandex nebo o využití Angularu v moderním vývoji.
Zdroj: www.habr.com