среда, 29 июля 2020 г.

Хостинг статического веб-сайта на Azure Storage, о котором должен знать каждый фронтенд-разработчик

Всем привет! В этой статье хочу рассказать как элементарно просто развернуть статический веб-сайт на Azure при помощи Azure Storage. Процесс деплоймента весьма прост и состоит из нескольких шагов: создание Azure Storage Account, включение опции Static Website и непосредственно деплоймента веб-сайта. Причем это может быть очень дешево или совсем бесплатно. 

Кстати, если вы предпочитаете видео статье, то ниже мой ролик на эту же тему.


Что такое статический веб-сайт

Но сперва пару слов о том, что такое статический вебсайт. Статический веб-сайт, это набор HTML+CSS+JavaScript для работы которого не требуется серверного кода. Т.е. статический веб-сайт может быть вполне себе динамическим. но это должно достигаться клиентскими скриптами. Так, это может быть сайт на Angular или React. Разработано большое количество генераторов статических сайтов на основе популярных JavaScript фреймворков и библиотек с большим количеством плагинов и тем. Вот примеры некоторых их них.
  • GatsbyJS - генератор статических на основе React
  • Scully - генератор статических сайтов на Angular.
  • Jekyll - генератор статических веб-сайтов на основе Markdown. Кстати, на этом инструменте работает GitHub Pages.
Конечно, использование генераторов статических сайтов вовсе не обязательно, но они могут значительно упростить создание веб-сайта. Если просуммировать кратко основные достоинства статических веб-сайтов, то на мой взгляд, это будут высокая скорость работы сайта и простота деплоймента.

Azure Free Account

Важный нюанс. Если сейчас у вас нет, аккаунта на Azure, то можно создать бесплатный. В своем курсе на Udemy я рассказываю как это сделать в лекции "Step-by-step: Create Azure account and access to free resources". Она доступна через Free Preview и регистрация на Udemy для этого тоже не требуется.


Делай Раз. Создаем Azure Storage Account

Шаг первый - создаем Azure Storage Account. По сути, Azure Storage Account - это своего рода контейнер для группировки и администрирования различных Azure Storage.
Azure Storage в свою очередь - это общее название для 4 сервисов хранения данных - Azure Blobs, Azure Files, Azure Queues, и Azure Tables.

1. В Azure Portal зайдите в сервис Storage account.
2. Создайте новый Storage account. Сделать это можно нажав на кнопку "Add" или на "Create storage account".
3. Надо заполнить форму на создание нового Storage account. Это довольно просто, т.к большинство полей заполнено дефолтными значениями, которые нам менять не надо.
  • Resource group. Тоже своего рода контейнер для более удобного администрирования разных ресурсов в Azure. Можно выбрать любою или создать новую кликнув на ссылку "Create new". Я создал новую и назвал ее MyRG. 
  • Storage account name. Тут немного сложнее. Это имя будет присутствовать в урле для вашего вею-сайта и должно быть уникально среди всех Storage account зарегистрированных в Azure.

Вот как эта форма выглядит в моем случае.

Далее нажмите кнопку "Review + create"

4. Azure проверит параметры и если все ОК переведет вас на последнюю вкладку Review + create. В последний раз проверьте параметры и нажмите синюю кнопку Create.
5. Создание Storage Account занимает некоторое время. В мом случае это было секунд 20-30.
Далее перейдите к созданному Storage Account, например, нажав на синюю кнопку Go to resourse.


Делай Два. Включаем опцию Static website для созданного Storage Account

6. На странице Storage Account, в левом списке найдите раздел Settings и в нем кликните на Static Website. В правой панели переведите переключатель Static Website в режим Enabled.

7. Опционально, для веб-сайта можно указать главную страницу и что показывать если пользователь пытается открыть не существующую страницу. 

8. Не забудьте нажать кнопку Save.

Вот так выглядит моя страница после сохранения. Здесь Primary endpoint

это адрес вашего статического веб-сайта.


Делай Три. Заливаем веб-сайт на Azure

9. Ну и последний шаг - надо "залить" наш сайт в специальный контейнер $web созданный для нас Azure. Для этого найдите в левом списке группу Blob service и в ней кликните на  пункт Containers, В правой панели кликните на имя контейнера $web.

10. На этой форме уже непосредственно "заливаем" файлы веб-сайта в контейнер. Для этого нажмите на кнопку на тулбаре Upload. Появится панель справа, в которой выбираем имя файла, который надо залить в контейнер и нажимаем кнопку Upload.