Хостинг статического веб-сайта на 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.


Можно выбрать сразу несколько файлов.

Деплоить по одному файлу через Azure Portal - это занятие которое прекрасно развивает усидчивость однако мало пригодно для реальной работы. Чтобы задеплоить статический веб-сайт со сложной структурой одной командой лучше воспользоваться чем-то другим AzureCLI или AzCopy. Тем кто предпочитает GUI инструмент, могу порекомендовать Azure Storage Explorer.

После того как все файлы "залиты" можно проверять работу сайта. Вернитесь  назад в свой Azure Storage Account и в пункте Static Website снова найдете урл на свой сайт.


Как удалить статический веб-сайт

Есть масса способов удалить статический веб-сайт. Вот несоклько их них
- отключить опцию Static Website на Storage Account
- удалить файлы из контейнера $web
- удалить контейнер $web
- удалить Storage Account
- удалить Resource group в которой был создан Storage Account

Сколько это стоит?

Мало. Сама опция Static website бесплатна. Нужно будет заплатить за место в контейнере, которое занимает веб-сайт. В бесплатный аккаунт входят 12 месяцев бесплатного использования 5 Gb. После этого или если 5Gb будет мало, то надо будет заплатить 1-3 цента за Gb в месяц. 


Что можно сделать еще?

1. Свой домен. Да, статическому веб-сайту можно прикрутить свой домен. См. пункт Custom domain в разделе Blob service.



2. Azure CDN.  Можно добавить кэширование контента статического веб-сайта ближе к конечным пользователям при помощи Azure CDN. Эта опция так же находится в Blob service.




Комментарии

Популярные сообщения из этого блога

Команды docker save/load, docker export/import – в чем отличие, как и когда ими пользоваться

Как узнать, кто заблокировал файл или папку

Эрик Гамма переходит на работу в Майкрософт