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

Привет, Хабр!

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


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


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


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

О себе


Недавно, я разрабатывал SaaS сервис, подобие маркетплейса, где люди находят спортивных тренеров для персональных тренировок. Использовал стек Amazon Web Services (далее AWS). Но чем глубже погружался в проект — тем больше нюансов узнавал о разных процессах организации стартапа.


Я столкнулся с следующими проблемами:


  • AWS потреблял много денег. Поработав 3 года в Enterprise компаниях, я привык к таким радостям, как Docker, Kubernetes, CI/CD, blue green deployment, и, как начинающий программист-стартапер, захотел реализовать тоже самое. В итоге пришел к тому, что ежемесячно AWS потреблял по 300-400 баксов. Самым дорогим оказался Kubernetes, около 100 баксов, при минималке с одним кластером и одной нодой.
    P.S. На старте не нужно так делать.
  • Далее, задумавшись о юридической стороне, я узнал про закон 152-ФЗ, в котором говорилось примерно следующее: "Персональные данные граждан РФ должны храниться на территории РФ", иначе штрафы, чего мне не хотелось. Я решил заняться этими вопросами, пока "сверху" мне не прилетело :).

Вдохновленный статьей о мигрировании инфраструктуры из Amazon Web Services в Яндекс.Облако, я решил изучить стек Яндекса подробнее.


Для меня ключевыми особенностями Яндекс.Облака было следующее:



Я изучал других конкурентов этого сервиса, но на тот момент Яндекс выигрывал.


О себе рассказал, можно и перейти к делу.


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


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


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


Спасибо всем кто дочитал до конца! Это моя первая статья, планирую дальше описать другие сервисы Яндекса и их интеграцию с frontend и backend технологиями.


Напишите в комментариях насколько интересно вам узнать про другие сервисы Яндекса или про использование Angular в современной разработке.

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 8

    0
    Сколько в общем будет стоить данное удовольствие?
      +1
      Есть удобный калькулятор cloud.yandex.ru/prices

      За 10 миллионов скачиваний файлов платишь всего 250 рублей))

      image
        0
        О как, спасибо!
          0
          Т.е. приблизительно 8 запросов в секунду и в два раза дороже KVM VDS других провайдеров при тех же или лучших условиях.

          К примеру, HostVDS с тарифом 2 GB RAM, 20 GB NVMe (50000 IOPS), 200 Mbps за ~110 руб/мес ($1.59). Не реклама.
            0
            ну вообще если посчитать…
            10 млн запросов в месяц = 333333 запроса в день = 13888 запросов в час = 3.8 запроса в секунду. да, и за такой охват будет 250р в месяц ок.

            1) только в статье пишу про «начинающих разработчиков», про «хостинг для портфолио», а тут сомневаюсь что у кого-то будет и 10-я часть этого охвата, а значит в ряд ли будет больше затрат чем 25 рублей в месяц (вероятно вообще меньше рубля).
            2) я рассказал про хранилище данных, а не про отдельную виртуалку, которая для таких целей вообще не требуется.
            3) Да, я загуглил про HostVDS, да возможно как виртуалка оно где-то будет дешевле, только появляется другая проблема: яндекс облако, как и амазон, это общий фреймворк, стек, в котором есть и виртуалки, и база данных и другие сервисы, которые лучше интегрированы друг с другом, чем если собирать зоопарк а потом возиться и запоминать где что хранится и как где с кем работать, единый CLI, амазон-подобный стек, а значит можно привлечь любого специалиста который сразу поймет как с чем работать (затраты на обучение)

            Не топлю конкретно за Яндекс, но больше предерживаюсь к тому, чтобы стек был единый, есть еще аналоги Мейл.Ру, другие подобные сервисы, можно посмотреть в их сторону, если не смущает цена по выше и интрефейс админки менее интуитивный

            Если искать прям вообще бесплатный-бесплатный, то есть GithubPages, где фронт из гитхаба можно вообще бесплатно (возможно не будет роутинг и http работать, зато бесплатно), но дальше гитхаба это опять же никуда не уйдет, в отличие от яндекса, где можно и домен прикрутить, и бэк на виртуалке рядом поставить и прочее.
              0
              10 млн запросов в месяц = 333333 запроса в день = 13888 запросов в час = 3.8 запроса в секунду.
              Я считал с позиции неравномерной нагрузки.

              1) Я считал исходя из вашего примера. Если нагрузка ещё меньше, то любого бесплатного хостинга хватит. В том числе и Github Pages.
              2) Если я не ошибаюсь, целью было «разместить статический сайт». Если есть вариант более простого или дешевого размещения статического сайта, то, считаю, его стоит обсудить.
              3) Считаю, что инструмент нужно выбирать под задачу. Если вам нужно «разместить статический сайт» силами «начинающих разработчиков» «для портфолио», то облака, фреймворки, базы данных и прочее явно не обязательно.

              чем если собирать зоопарк а потом возиться и запоминать где что хранится и как где с кем работать
              Зоопарк чего? Обязательно держать «проекты для портфолио» у разных провайдеров и на разных серверах? Только у облаков есть удобные панели? Поднятие своего s3-compatible сервиса на одном сервере невозможно?

              амазон-подобный стек, а значит можно привлечь любого специалиста который сразу поймет как с чем работать (затраты на обучение)
              В случае размещения статического сайта даже без «амазон-подобного стека» (на базе, к примеру, MinIO с MinIO Client) затраты на обучение вряд ли будут нужны, если уже есть знания относительно «амазон-подобного стека».

              но больше предерживаюсь к тому, чтобы стек был единый
              Рано или поздно он таковым не будет в силу того, что облакам как-то да нужно конкурировать. Если не ценой, то чем?

              есть GithubPages (вероятно придется скоро статью заплиить если на хабре нет еще)
              Я был бы удивлён, если бы такой статьи не было.

              можно и домен прикрутить
              Если я не ошибаюсь, к Github Pages можно прикрутить домен уже как несколько лет.

              бэк на виртуалке рядом поставить и прочее
              Что можно сделать более дёшево у любого другого провайдера. Если пользоваться облаками, то пользоваться как раз тем, чем они и привлекательны: сети, масштабирование в несколько кликов, запуск множества машин на короткий промежуток времени и тп когда это действительно нужно.
                0
                Спасибо за информацию, есть над чем подумать. Просто после этой статьи в личку уже поступают предложения «нативно рекламировать VDS в своих статьях», поэтому так реагирую.
        0
        Спасибо за статью. Правда когда начинал читать, ожидал, что в ней будет написано, как прикрутить свое доменное имя к такому сайту. Надеюсь это будет описано в следующие статье ;)

        Only users with full accounts can post comments. Log in, please.