Как разместить статический сайт с помощью Yandex.Cloud Object Storage — 20.07.2020

Yandex.Cloud Object Storage
Как разместить статический сайт с помощью Yandex.Cloud Object Storage

В этой статье, расскажу как легко и просто разместить статический сайт с помощью технологий Яндекса, а именно Object Storage.

В конце у вас будет размещенный в сети сайт, который будет доступен по внешней ссылке.

Эта статья будет полезна, если вы

  • Начинающий разработчик, который только обучается программированию;
  • Разработчик, который сделал портфолио и хочет разместить его в открытом доступе, чтобы показать друзьям и работодателям.

Шаг 0. Подготовим сайт

Для начала нам понадобится сайт, который мы хотим разместить в интернете. Сделаем простой шаблон SPA приложения на Angular, который далее разместим в интернете.

P.S. Кто разбирается в Angular или знает про его документацию https://angular.io/guide/setup-local, переходите к Шагу 1.

Установим Angular-CLI чтобы создавать SPA-сайты на Ангуляре:

npm install -g @angular/cli

Создадим Angular приложение с помощью следующей команды:

ng new angular-habr-object-storage

Далее переходим в папку приложения и запускаем его, чтобы проверить работоспособность:

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

Статическое SPA-приложение на Angular

Приложение создано, но пока не готово к размещению на хостинге. Соберем приложение в небольшой билд (Production), чтобы убрать все лишнее и оставить только необходимые файлы.

В ангуляре это можно сделать следующей командой:

ng build --prod

В результате этой команды в корне приложения появилась папочка dist с нашим сайтом.

Работает. Теперь переходим к хостингу.

Шаг 1.

Переходим на сайт https://console.cloud.yandex.ru/ и жмем на кнопку «Подключиться».

Примечание:

  • Для пользования сервисом Яндекса может понадобится почта Яндекса (но это не точно)
  • Для некоторых функций придется положить деньги на счет в личном кабинете (минимум 500 рублей).

После успешной регистрации и авторизации, мы в личном кабинете.

Интерфейс личного кабинета Yandex.Cloud

Далее слева в меню нужно найти сервис «Object Storage», который мы как раз будем использовать для хостинга сайта.

Коротко по терминам:

  • Object Storage — это хранилище файлов, совместимое с аналогичной технологией Амазона AWS S3, у которого также есть свой API для управления хранилищем из кода и его также как и AWS S3 можно использовать для размещения статического сайта.
  • В Object Storage мы создаем «бакеты» (bucket / Корзина), которые являются отдельными хранилищами наших файлов.

Интерфейс сервиса Yandex.Cloud Object Storage

Создадим один из них. Для этого в консоли сервиса жмем на кнопку «Создать бакет».

Интрфейс создания бакета в Yandex.Cloud

В форме создания бакета есть следующие поля, пробежимся по ним:

  • Имя бакета. Для простоты, назовем так же как и ангуляр проект — angular-habr-object-storage
  • Макс. размер. Ставим столько, сколько у нас весит сайт, так как сайт хранится не бесплатно и за каждый выделенный гигабайт, мы будем платить Яндексу копеечку.
  • Доступ для чтения объектов. Ставим «Публичный», так как пользователь должен получать каждый файл нашего статического сайта, чтобы на нем правильно отрисовывалась верстка, отрабатывали скрипты и тд.
  • Доступ к списку объектов и Доступ на чтение настроек. Оставляем «Ограниченный». Это нужно для того, чтобы использовать бакет как внутреннее хранилище файлов для приложений.
  • Класс хранилища. Оставляем «Стандартный». Это означает, что наш сайт часто будут посещать, а значит и часто скачивать файлы, составляющие сайт. Плюс пункт влияет на производительность и оплату (вставить ссылку).

Жмем «Создать бакет» и бакет создан.

Yandex.Cloud Бакет создан

Теперь нужно загрузить наш сайт в бакет. Самый простой способ — открыть рядом папочку dist нашего сайта и ручками перетащить прямо на страницу. Это удобнее, чем жать на кнопку «Загрузить объекты», потому что в таком случае папки не переносятся и их придется создавать ручками в правильной последовательности.

Загрузили в бакет наш сайт

Итак, сайт загружен в хранилище, тем можем предоставить пользователям возможность обращаться к хранилищу, как к сайту.
Для этого слева в меню жмем на вкладку «Веб-сайт».

Настройка бакета под сайт

На странице настройки бакета как сайта, выбираем таб «Хостинг». Здесь указываем главную страницу сайта, обычно это index.html. Если у вас SPA приложение, то вероятно все ошибки обрабатываются также на главной странице, поэтому укажем на странице ошибки также index.html.

Мы сразу видим, по какой ссылке будет доступен наш сайт. Жмем сохранить.

Через минут 5, перейдя по ссылке мы видим что теперь наш сайт доступен всем желающим.

Хостинг Angular приложения с помощью Yandex.Cloud Object Storage

Благодарю за внимание!!!
Надеюсь статья  «Как разместить статический сайт с помощью Yandex.Cloud Object Storage» была полезной для Вас
Специально для сайта ITWORLD.UZНовость взята с сайта Хабр