Привіт, Хабре!
У цій статті, я розповім як легко та просто розмістити статичний сайт за допомогою технологій Яндекса, а саме Об'єкт зберігання.
Наприкінці у вас буде розміщений у мережі сайт, який буде доступний за зовнішнім посиланням.
Ця стаття буде корисною, якщо ви
- Розробник-початківець, який тільки навчається програмування;
- Розробник, який зробив портфоліо і хоче розмістити його у відкритому доступі, щоб показати друзям та роботодавцям.
Про себе
Нещодавно, я розробляв SaaS сервіс, подібний до маркетплейсу, де люди знаходять спортивних тренерів для персональних тренувань. Використовував стек Amazon Web Services (далі AWS). Але чим глибше занурювався в проект — тим більше нюансів дізнавався про різні процеси організації стартапу.
Я зіткнувся з такими проблемами:
- AWS споживав багато грошей. Попрацювавши 3 роки в Enterprise компаніях, я звик до таких радощів, як Docker, Kubernetes, CI/CD, blue green deployment, і, як програміст-стартапер-початківець, захотів реалізувати те саме. У результаті дійшов до того, що щомісяця AWS споживав по 300-400 доларів. Найдорожчим виявився Kubernetes, близько 100 доларів, при мінімалці з одним кластером і однією нодою.
PS На старті не потрібно робити так. - Далі, задумавшись про юридичну сторону, я дізнався про закон 152-ФЗ, в якому говорилося приблизно таке: "Персональні дані громадян РФ мають зберігатися біля РФ", інакше штрафи, чого мені не хотілося. Я вирішив зайнятися цими питаннями, поки "зверху" мені не прилетіло :).
Натхненний про мігрування інфраструктури з Amazon Web Services в Яндекс.Хмара, я вирішив вивчити стек Яндекса докладніше.
Для мене ключовими особливостями Яндекс.Хмари було таке:
- Дешевше в 2-3 рази (відповідно до статті вище та публічним прайсам)
- , що великий Амазон поки що не може здійснити.
Я вивчав інших конкурентів цього сервісу, але на той момент Яндекс виграв.
Про себе розповів, можна й перейти до справи.
Крок 0. Підготуємо сайт
Спочатку нам знадобиться сайт, який ми хочемо розмістити в інтернеті. Так як я Angular розробник, я зроблю простий шаблон SPA-додатку, який далі розміщу в інтернеті.
PS Хто знається на Angular або знає про його документацію , переходьте до .
Встановимо Angular-CLI щоб створювати SPA-сайти на Ангулярі:
npm install -g @angular/cliСтворимо Angular додаток за допомогою наступної команди:
ng new angular-habr-object-storageДалі переходимо в папку програми та запускаємо його, щоб перевірити працездатність:
cd angular-habr-object-storage
ng serve --open
Програма створена, але поки що не готова до розміщення на хостингу. Зберемо додаток у невеликий білд (Production), щоб прибрати все зайве та залишити лише необхідні файли.
В ангулярі це можна зробити наступною командою:
ng build --prodВ результаті цієї команди докорінно з'явилася татко dist із нашим сайтом.
Працює. Тепер переходимо до хостингу.
Крок 1.
Переходимо на сайт і тиснемо на кнопку "Підключитися".
Примітка:
- Для користування сервісом Яндекса може знадобитися пошта Яндекса (але це не точно)
- Для деяких функцій доведеться покласти гроші на рахунок у власному кабінеті (мінімум 500 рублів).
Після успішної реєстрації та авторизації ми в особистому кабінеті.
Далі зліва в меню потрібно знайти сервіс "Object Storage", який ми будемо використовувати для хостингу сайту.
Коротко за термінами:
- Object Storage — це сховище файлів, сумісне з аналогічною технологією Амазона AWS S3, який також має свій API для керування сховищем з коду і його також як і AWS S3 можна використовувати для розміщення статичного сайту.
- У Object Storage ми створюємо "бакети" (bucket/Кошик), які є окремими сховищами наших файлів.
Створимо один із них. Для цього в консолі сервісу натискаємо кнопку "Створити бакет".
У формі створення бакета є такі поля, пробіжимося ними:
- Ім'я бакета. Для простоти назвемо так само як і ангуляр проект.
angular-habr-object-storage - Макс. Розмір. Ставимо стільки, скільки у нас важить сайт, тому що сайт зберігається не безкоштовно і за кожен виділений гігабайт, ми платитимемо Яндексу копійчину.
- Доступ до читання об'єктів. Ставимо "Публічний", тому що користувач повинен отримувати кожен файл нашого статичного сайту, щоб на ньому правильно малювалася верстка, відпрацьовували скрипти і т.д.
- Доступ до списку об'єктів та Доступ до читання налаштувань. Залишаємо "Обмежений". Це потрібно для того, щоб використовувати бакет як внутрішнє сховище файлів для програм.
- Клас сховища. Залишаємо "Стандартний". Це означає, що наш сайт часто відвідуватимуть, а значить і часто завантажуватимуть файли, що становлять сайт. Плюс пункт впливає на продуктивність та оплату (вставити посилання).
Тиснемо "Створити бакет" і бакет створений.
Тепер потрібно завантажити наш сайт у бакет. Найпростіший спосіб - відкрити поруч татку dist нашого сайту та ручками перетягнути прямо на сторінку. Це зручніше, ніж натискати на кнопку "Завантажити об'єкти", тому що в такому випадку папки не переносяться і їх доведеться створювати ручками у правильній послідовності.
Отже, сайт завантажений у сховище, тим самим можемо надати користувачам можливість звертатися до сховища, як до сайту.
Для цього ліворуч у меню тиснемо на вкладку "Веб-сайт".
На сторінці налаштування бакета як сайту, вибираємо таб "Хостинг". Тут вказуємо головну сторінку сайту, як правило, це index.html. Якщо у вас SPA додаток, то ймовірно, всі помилки обробляються також на головній сторінці, тому вкажемо на сторінці помилки також index.html.
Ми відразу бачимо, за яким посиланням буде доступний наш сайт. Тиснемо зберегти.
Через хвилин 5, перейшовши за посиланням, ми бачимо, що тепер наш сайт доступний усім бажаючим.
Дякую всім хто дочитав до кінця! Це моя перша стаття, планую далі описати інші сервіси Яндекса та їх інтеграцію з frontend та backend технологіями.
Напишіть у коментарях наскільки цікаво вам дізнатися про інші сервіси Яндекса або використання Angular в сучасній розробці.
Джерело: habr.com