🥇Jak umieścić statyczną stronę za pomocą Yandex.Cloud Object Storage

Cześć, Habr!

W tym artykule opowiem, jak łatwo i prosto umieścić statyczną stronę internetową z wykorzystaniem technologii Yandex, a dokładnie Object Storage.

Na koniec będziecie mieć stronę internetową, która będzie dostępna pod publicznym linkiem.

Artykuł ten będzie przydatny, jeśli jesteś

Początkującym programistą, który dopiero uczy się programowania;
Programistą, który stworzył portfolio i chce umieścić je w przestrzeni publicznej, aby pokazać znajomym i pracodawcom.

O mnie

Ostatnio pracowałem nad usługą SaaS, coś w rodzaju rynku, gdzie ludzie znajdują trenerów sportowych do osobistych treningów. Korzystałem ze stosu Amazon Web Services (AWS). Jednak im głębiej zanurzałem się w projekt, tym więcej szczegółów poznawałem na temat różnych procesów organizowania startupu.

Natknąłem się na następujące problemy:

AWS pochłaniało dużo pieniędzy. Po trzech latach pracy w firmach korporacyjnych przywykłem do takich udogodnień jak Docker, Kubernetes, CI/CD, blue green deployment, i jako początkujący programista startupowy chciałem to wszystko zrealizować. W rezultacie okazało się, że miesięcznie AWS pochłaniało od 300 do 400 dolarów. Najdroższy okazał się Kubernetes, około 100 dolarów, przy minimalnych wymaganiach z jednym klastrem i jedną nodą.
P.S. Na początku nie należy tego robić.
Następnie, myśląc o stronie prawnej, dowiedziałem się o ustawie 152-FZ, w której powiedziano mniej więcej to: "Dane osobowe obywateli Federacji Rosyjskiej muszą być przechowywane na terytorium Federacji Rosyjskiej", w przeciwnym razie grożą mi kary, czego chciałem uniknąć. Postanowiłem zająć się tymi kwestiami, zanim "odgórnie" dostanę jakiś sygnał :).

Zainspirowany artykułem migracją infrastruktury z Amazon Web Services do Yandex.Cloud, postanowiłem dokładniej zgłębić stos technologii Yandexa.

Dla mnie kluczowe cechy Yandex.Cloud to:

Tańsze o 2-3 razy (zgodnie z powyższym artykułem i publicznymi cennikami)
Przechowywanie danych osobowych użytkowników na terytorium Federacji Rosyjskiej, co wielki Amazon na razie nie może zrealizować.

Zbadałem innych konkurentów tej usługi, ale w tamtym momencie Yandex wygrywał.

O sobie powiedziałem, możemy przejść do konkretów.

Krok 0. Przygotowanie strony

Na początek potrzebujemy strony, którą chcemy umieścić w internecie. Jako programista Angular stworzę prosty szablon aplikacji SPA, który później umieszczę w internecie.

P.S. Kto zna się na Angularze lub wie o jego dokumentacji https://angular.io/guide/setup-local, przejdźcie do Kroku 1.

Zainstalujemy Angular-CLI, aby tworzyć aplikacje SPA w Angularze:

npm install -g @angular/cli

Stwórzmy aplikację Angular za pomocą następującej komendy:

ng new angular-habr-object-storage

Następnie przechodzimy do folderu aplikacji i uruchamiamy ją, aby sprawdzić jej działanie:

cd angular-habr-object-storage
ng serve --open

Aplikacja została stworzona, ale na razie nie jest gotowa do umieszczenia na hoście. Zbudujemy aplikację w małym buildzie (Production), aby usunąć wszystkie zbędne pliki i zostawić tylko te niezbędne.
W Angularze można to zrobić następującą komendą:

ng build --prod

W wyniku tej komendy w głównym folderze aplikacji pojawił się folder dist z naszą stroną.

Działa. Teraz przechodzimy do hostingu.

Krok 1.

Przechodzimy na stronę https://console.cloud.yandex.ru/ i klikamy na przycisk "Połącz".

Uwaga:

Aby korzystać z usługi Yandexa, może być potrzebny mail Yandex (ale to nie pewne).
Na niektóre funkcje trzeba będzie naładować konto w panelu użytkownika (minimum 500 rubli).

Po udanej rejestracji i autoryzacji jesteśmy w panelu użytkownika.

Następnie po lewej stronie w menu należy znaleźć usługę "Object Storage", którą właśnie będziemy używać do hostingu strony.

Krótko o terminach:

Object Storage to magazyn plików, kompatybilny z podobną technologią Amazona AWS S3, który również ma swoje API do zarządzania magazynem z kodu i może być używany podobnie jak AWS S3 do umieszczania statycznej strony.
W Object Storage tworzymy "bucket" (Koszyk), który jest oddzielnym magazynem naszych plików.

Stwórzmy jeden z nich. W tym celu w konsoli usługi klikamy przycisk "Utwórz bucket".

W formularzu tworzenia bucketa znajdują się następujące pola, więc przelecimy przez nie:

Nazwa bucketa. Dla uproszczenia nazwijmy go tak samo jak projekt Angular — angular-habr-object-storage
Maks. rozmiar. Ustawiamy tyle, ile waży nasza strona, ponieważ strona nie jest przechowywana za darmo, a za każdy przydzielony gigabajt będziemy płacić Yandexowi trochę pieniędzy.
Dostęp do odczytu obiektów. Ustawiamy "Publiczny", ponieważ użytkownik musi mieć dostęp do każdego pliku naszej statycznej strony, aby układ został poprawnie wyrenderowany, a skrypty działały itd.
Dostęp do listy obiektów i dostęp do odczytu ustawień. Zostawiamy "Ograniczony". To potrzebne, aby używać bucketa jako wewnętrznego magazynu plików dla aplikacji.
Klasa magazynu. Pozostawiamy "Standardowy". Oznacza to, że nasza strona będzie często odwiedzana, a więc pliki, które ją tworzą, będą często pobierane. Ponadto ten punkt wpływa na wydajność i opłatę (wstaw link).

Klikamy "Utwórz bucket" i bucket został utworzony.

Teraz musimy załadować naszą stronę do bucketa. Najprostszym sposobem jest otwarcie obok folderu dist naszej strony i ręczne przeciągnięcie go bezpośrednio na stronę. To wygodniejsze niż kliknięcie przycisku "Prześlij obiekty", ponieważ w takim przypadku foldery nie są przenoszone i trzeba je stworzyć ręcznie w odpowiedniej kolejności.

Zatem strona została załadowana do magazynu, możemy umożliwić użytkownikom dostęp do magazynu jak do strony.
Aby to zrobić, klikamy zakładkę "Strona internetowa" po lewej stronie w menu.

Na stronie ustawień bucketa jako strony internetowej wybieramy zakładkę "Hosting". Tutaj wskazujemy stronę główną serwisu, zwykle jest to index.html. Jeśli masz aplikację SPA, prawdopodobnie wszystkie błędy są również obsługiwane na stronie głównej, dlatego również na stronie błędów wskaźnikujemy index.html.

Natychmiast widzimy, pod jakim linkiem będzie dostępna nasza strona. Klikamy zapisz.

Po około 5 minutach, przechodząc pod link, widzimy, że teraz nasza strona jest dostępna dla wszystkich chętnych.

Dziękuję wszystkim, którzy dotrwali do końca! To mój pierwszy artykuł, planuję opisać kolejne usługi Yandexa oraz ich integrację z technologiami frontend i backend.

Napiszcie w komentarzach, jak bardzo interesuje Was poznanie innych usług Yandexa lub użycie Angulara w nowoczesnym rozwijaniu.

Źródło: habr.com