Здравей, Хабр!
В тази статия ще ви покажа как лесно и бързо да хоствате статичен сайт с помощта на технологиите на Яндекс, а именно Object Storage.
В края на статията ще имате сайт, хостван в мрежата, достъпен на външна връзка.
Тази статия ще бъде полезна, ако вие сте
- Начинаещ разработчик, който току-що учи програмиране;
- Разработчик, който е създал портфолио и иска да го публикува в отворен достъп, за да го покаже на приятели и работодатели.
За мен
Наскоро разработвах SaaS услуга, подобна на маркетплейс, където хора намират спортни треньори за персонални тренировки. Използвах стека на Amazon Web Services (по-нататък AWS). Но колкото по-дълбоко навлизах в проекта, толкова повече нюанси откривах относно различните процеси за организиране на стартап.
Срещнах се с следните проблеми:
- AWS изразходваше много средства. След трите години работа в компании от Enterprise сегмента, свикнах с такива предимства като Docker, Kubernetes, CI/CD, blue green deployment, и, като начинаещ програмист-стартапер, исках да реализирам същото. В крайна сметка стигнах до извода, че AWS ми струваше по 300-400 долара на месец. Най-скъпото беше Kubernetes, около 100 долара, при минимални изисквания с един кластер и една нода.
P.S. В началото не е нужно да се прави така. - След това, като се замислих за правната страна, научих за закон 152-ФЗ, който казваше нещо такова: "Личните данни на гражданите на Руската федерация трябва да се съхраняват на територията на Русия", в противен случай ще има глоби, което не исках. Реших да се занимавам с тези въпроси, докато "отгоре" не ми се обадят :).
Вдъхновен от мигрирането на инфраструктурата от Amazon Web Services в Яндекс.Облак, реших да изследвам стека на Яндекс подетайлно.
За мен основните предимства на Яндекс.Облак бяха следните:
- По-евтино с 2-3 пъти (според посочената по-горе статия и публични цени)
- , нещо, което голямото Амазон все още не може да осъществи.
Изследвах и другите конкуренти на тази услуга, но по това време Яндекс печелеше.
След като разказах за себе си, можем да преминем и към действието.
Стъпка 0. Подготовка на сайта
Първо, ще ни е необходим сайт, който искаме да хостваме в интернет. Тъй като съм Angular разработчик, ще направя прост шаблон на SPA приложение, който по-късно ще публикувам в интернет.
P.S. Който разбира от 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.
Преминаваме на сайта и натискаме бутона "Свържи се".
Бележка:
- За ползването на услугата на Яндекс може да е необходимо Яндекс пощата (но не е сигурно)
- За някои функции ще трябва да депозираме пари в акаунта (минимум 500 рубли).
След успешна регистрация и авторизация, сме в личния кабинет.
Следва да намерим услугата "Object Storage" в менюто отляво, която ще използваме за хостинг на сайта.
Накратко за термините:
- Object Storage — това е хранилище на файлове, съвместимо с аналогичната технология на Амазон AWS S3, която също има свой API за управление на хранилището от кода и може да се използва за разполагане на статични сайтове, подобно на AWS S3.
- В Object Storage създаваме "бакети" (bucket / Кошница), които са отделни хранилища за нашите файлове.
Създаващ един от тях. За това в конзолата на услугата натискаме бутона "Създай бакет".
В формата за създаване на бакет има следните полета, нека ги прегледаме:
- Име на бакета. За улеснение, ще го наречем също както Angular проекта —
angular-habr-object-storage - Макс. размер. Задаваме толкова, колкото е размерът на сайта, тъй като сайтът не се съхранява безплатно и за всеки отделен гигабайт, ще плащаме на Яндекс известно количество.
- Достъп за четене на обектите. Задаваме "Публичен", тъй като потребителят трябва да получава всеки файл на нашия статичен сайт, за да може да се визуализира коректно оформлението, скриптите да работят и т.н.
- Достъп до списъка с обекти и Достъп до настройки за четене. Оставяме "Ограничен". Това е необходимо, за да използваме бакета като вътрешно хранилище на файлове за приложения.
- Клас на хранилището. Оставяме "Стандартен". Това означава, че нашият сайт ще бъде посещаван често, а следователно и често ще се изтеглят файловете, които го съставят. Плюсът е, че този пункт влияе на производителността и разходите (вставете линк).
Натискаме "Създаване на бакет" и бакетът е създаден.
Сега трябва да качим нашия сайт в бакета. Най-лесният начин е да отворим папката до нашия сайт и ръчно да я прехвърлим направо на страницата. dist Това е по-удобно, отколкото да натиснем бутона "Качване на обекти", защото в такъв случай папките не се прехвърлят и ще трябва да ги създадем ръчно в правилната последователност.
И така, сайтът е качен в хранилището и можем да предоставим на потребителите възможността да се обръщат към хранилището, като към сайт.
За целта отляво в менюто натискаме табът "Уебсайт".
На страницата за настройка на бакета като сайт избираме таб "Хостинг". Тук посочваме главната страница на сайта, обикновено това е index.html. Ако имате SPA приложение, вероятно всички грешки се обработват също на главната страница, така че ще посочим index.html и на страницата за грешки.
Веднага виждаме по каква връзка ще бъде достъпен нашият сайт. Натискаме запази.
След около 5 минути, като отидем на линка, виждаме, че сега нашият сайт е достъпен за всички желаещи.
Благодаря на всички, които прочетоха до края! Това е моята първа статия, планувам да опиша и други услуги на Яндекс и тяхната интеграция с frontend и backend технологии.
Напишете в коментарите колко ви е интересно да научите за други услуги на Яндекс или за използването на Angular в съвременната разработка.
Източник: habr.com
