Хей Хабр!
В тази статия ще ви кажа как лесно и просто да хоствате статичен уебсайт с помощта на технологиите на Yandex, а именно Съхранение на обекти.
В крайна сметка ще имате уебсайт, хостван в мрежата, който ще бъде достъпен чрез външна връзка.
Тази статия ще ви бъде полезна, ако
- Начинающий разработчик, который только обучается программированию;
- Разработчик, който е направил портфолио и иска да го постави в публичното пространство, за да го покаже на приятели и работодатели.
За мен
Наскоро разработвах SaaS услуга, един вид пазар, където хората намират спортни треньори за лични тренировки. Използва стека на Amazon Web Services (наричан по-долу AWS). Но колкото по-дълбоко се гмурках в проекта, толкова повече нюанси научавах за различните процеси на организиране на стартъп.
Срещнах следните проблеми:
- AWS поглъщаше много пари. Работейки 3 години в корпоративни компании, свикнах с радости като Docker, Kubernetes, CI/CD, синьо зелено внедряване и като амбициозен стартиращ програмист исках да внедря същото. В резултат на това стигнах до извода, че AWS консумира 300-400 долара месечно. Kubernetes се оказа най-скъп, около 100 бона, с минимална заплата за един клъстер и един възел.
PS Няма нужда да правите това в началото. - След това, мислейки за правната страна, научих за закон 152-FZ, който казваше нещо като следното: „Личните данни на гражданите на Руската федерация трябва да се съхраняват на територията на Руската федерация“, иначе глоби, което не исках. Реших да се заема с тези проблеми, преди да ми дойде отгоре :).
Вдъхновен относно мигрирането на инфраструктура от Amazon Web Services към Yandex.Cloud, реших да проуча по-подробно стека на Yandex.
За мен ключовите характеристики на Yandex.Cloud бяха следните:
- 2-3 пъти по-евтино (според статията по-горе и публичните ценови листи)
- , което великият Amazon все още не може да постигне.
Проучих други конкуренти на тази услуга, но по това време Yandex печелеше.
Разказах ви за себе си, така че можем да се заемем с работата.
Стъпка 0. Подгответе сайта
Първо, имаме нужда от уебсайт, който искаме да поставим в Интернет. Тъй като съм разработчик на Angular, ще направя прост шаблон за SPA приложение, който след това ще публикувам в интернет.
PS Който разбира Angular или знае за документацията му , отидете на .
Нека инсталираме Angular-CLI, за да създадем SPA сайтове в Angular:
npm install -g @angular/cliНека създадем Angular приложение, като използваме следната команда:
ng new angular-habr-object-storageСлед това отидете в папката на приложението и го стартирайте, за да проверите неговата функционалност:
cd angular-habr-object-storage
ng serve --open
Приложението е създадено, но все още не е готово за хостване. Нека сглобим приложението в малка компилация (Production), за да премахнем всички ненужни неща и да оставим само необходимите файлове.
В Angular можете да направите това със следната команда:
ng build --prodВ резултат на тази команда се появи папка в корена на приложението dist с нашия уебсайт.
Върши работа. Сега да преминем към хостинга.
Стъпка 1.
Отидете на сайта и щракнете върху бутона „Свързване“.
Забележка:
- За да използвате услугата Yandex, може да ви е необходима поща Yandex (но това не е сигурно)
- За някои функции ще трябва да депозирате пари в сметката си в личната си сметка (минимум 500 рубли).
След успешна регистрация и авторизация, ние сме във вашия личен акаунт.
След това вляво в менюто трябва да намерите услугата “Object Storage”, която ще използваме за хостване на сайта.
Накратко по термини:
- Object Storage е файлово хранилище, съвместимо с подобната технология AWS S3 на Amazon, която също има собствен API за управление на съхранение от код и, подобно на AWS S3, може да се използва за хостване на статичен сайт.
- В Object Storage създаваме „кофи“ (кофи), които са отделни зони за съхранение на нашите файлове.
Нека създадем един от тях. За да направите това, в конзолата за услуги щракнете върху бутона „Създаване на кофа“.
Формата за създаване на кофа има следните полета, нека да ги разгледаме:
- Име на кофата. За простота, нека наречем проекта по същия начин като Angular -
angular-habr-object-storage - Макс. размер. Залагаме толкова, колкото тежи нашият сайт, тъй като сайтът не се съхранява безплатно и за всеки разпределен гигабайт ще платим на Yandex доста стотинка.
- Достъп до четене на обекти. Задаваме го на „Публичен“, тъй като потребителят трябва да получи всеки файл от нашия статичен сайт, така че оформлението да може да бъде начертано правилно върху него, да могат да се обработват скриптове и т.н.
- Достъп до списъка с обекти и Достъп за четене на настройките. Оставете го като „Ограничен“. Това е необходимо, за да използвате контейнера като вътрешно файлово хранилище за приложения.
- Клас на съхранение. Оставете го като "Стандартен". Това означава, че нашият сайт ще се посещава често и следователно файловете, които съставляват сайта, ще се изтеглят често. Освен това артикулът влияе върху ефективността и плащането (вмъкнете връзка).
Щракнете върху „Създаване на кофа“ и кофата е създадена.
Сега трябва да качим нашия сайт в кофата. Най-лесният начин е да отворите папка наблизо dist нашия сайт и го плъзнете директно върху страницата с помощта на дръжки. Това е по-удобно, отколкото да щракнете върху бутона „Зареждане на обекти“, тъй като в този случай папките не се прехвърлят и ще трябва да ги създадете ръчно в правилната последователност.
И така, сайтът се зарежда в хранилището, така че можем да предоставим на потребителите възможност за достъп до хранилището като уебсайт.
За да направите това, от лявата страна на менюто щракнете върху раздела „Уебсайт“.
На страницата за настройка на кофа като сайт изберете раздела „Хостинг“. Тук посочваме главната страница на сайта, обикновено index.html. Ако имате SPA приложение, вероятно всички грешки се обработват и на главната страница, така че ще посочим и index.html на страницата за грешки.
Веднага виждаме през коя връзка ще бъде достъпен нашият сайт. Щракнете върху запазване.
След около 5 минути, кликвайки върху връзката, виждаме, че нашият сайт вече е достъпен за всички.
Благодаря на всички, които прочетоха до края! Това е първата ми статия; планирам допълнително да опиша други услуги на Yandex и тяхната интеграция с frontend и backend технологии.
Напишете в коментарите колко сте заинтересовани да научите за други услуги на Yandex или за използването на Angular в съвременното развитие.
Източник: www.habr.com