воскресенье, 2 августа 2020 г.

Azure Static Web Apps - еще один способ бесплатного хостинга статического веб-сайта

В прошлой статье я рассказывал как можно использовать Azure Storage Account для хостинга статических веб-сайтов. А сейчас я хочу рассказать еще об одном сервисе Azure для подобных задач - Azure Static Web Apps.

На данный момент сервис находится в стадии Preview и его использование бесплатно. В рамках бесплатного использования Azure разрешает задеплоить до 10 сайтов, веб-приложений. Полагаю, что, когда сервис выйдет из preview эта квота такой и останется.

Кстати, если тексту с картинками вы предпочитаете видео, то вот мой обзор Azure Static Web Apps на YouTube

Azure Free Account

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


Деплоймент веб-сайта

Как и в случае с Storage Account, сервис Static Web Apps — это serverless решение и обладает всеми его преимуществами но при имеет и несколько существенных отличий от деплоймента при помощи Storage Account. Вот, наиболее важные, на мой взгляд
Во-первых, Static Web Apps (по крайней мере, на данный момент) требует привязки к аккаунту на GitHub и работает напрямую репозиториями на GitHub. Т. е. в отличие от Azure Storage Account файлы с локального компьютера с ним не задеплоишь
Во-вторых, сервис Static Web Apps позволяет в рамках этого же приложения. иметь и серверный код на основе Azure Functions.
И в-третьих, в сервисе ест ь возможность хранить конфигурационные параметры для веб-приложения (разного рода connection strings, secrets и пр.).

Перейдем непосредственно к тому, как работать с этим сервисом

1. В Azure Portal найдите сервис Static Web Apps. Проще всего это сделать через панель поиска.



2. Далее нажимаем на синюю кнопку Create static web app.
3. В форме Create Static Web App (Preview) нужно указать следующие поля
  • Resource group. Можно выбрать любою или создать новую кликнув на ссылку "Create new". Я создал новую и назвал ее MyStaticWebAppRG.
  • Static Web App details  - Name. Можно указать все что вам нравится.
  • Static Web App details  - Region. Место на земном шаре, где бы вы хотели задеплоить ваше приложение. Сервис еще в стадии Preview и не все регионы доступны.
Bот как эта форма выглядит в моем случае

4. Далее надо нажать на кнопку Sign in with GitHub. Откроется форма логина на GitHub. После успешного логина на форме Create Static Web App (Preview) появятся дополнительные поля для выбора организации, репозитория и бранчи. 
На GitHub я создал репозиторий StaticWebapp и залил в него веб-сайт из прошлой статьи
Вот как эти поля выглядят в моем случае

5. На вкладке Build можно указать, где расположены файлы сайта и где код сервисов. У моего репозитория простая структура, нет сервисов на Azure Functions, а файлы веб-сайта расположены сразу в корне. И поэтому в моем случае эти поля пустые.

6. Следующий шаг – нажимаем кнопку Review + create. .Azure проверит параметры и если все ОК переведет вас на последнюю вкладку Review + create. Здесь в последний раз можно проверить параметры и нажимаем синюю кнопку Create. 
7. Создание Static Web App происходит довольно быстро. У меня заняло где-то 30 секунд. Далее нажимаем Go to recourse чтобы попасть на страницу веб-приложения в Azure 

7. На этом в общем-то и все, сайт задеплоен. По клику на Browse или линку в URL в отдельной вкладке браузера откроется index.html сайта.
Интересны изменения, которые произошли с GitHub репозиторием. Azure добавил в него GitHub Workflow файл. Теперь, с его помощью на любое изменение в master бранче моего репозитория сайт будет автоматически передеплоен.
Вторая интересная фишка, заключается в том, что на каждый Pull Request Azure Static Web App создаст отдельный деплоймент сайта, который можно найти на Serttings/Enviroments
Как только pull request будет смержен, Staging деплоймент так же удалится.

Как вы, может быть уже заметили, в интерфейсе Static Web Apps нет возможности указать стартовую страницу сайта (например, что-то отличное от дефолтного index.html) или страницу для обработки 404. Все это и многое другое можно сделать при помощи специального routes.json файла. Он должен быть расположен в коне веб-сайта. Более детально со спецификацией этого файла можно познакомиться в документации.


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

Сайту так же можно указать доменное имя в элементе Settings/Custom domains. 
Что интересно, в отличие от решения на Storage Account в Settings нет опции Azure CDN. Все потому, что Azure CDN автоматически используется для веб-приложений задеплоенных при помощи Azure Static Web Apps. И что особенно приятно, платить за нее не надо.

Итог

В этой статье мы познакомились со Azure Static Web Apps. Если сравнивать это решение с деплойментом статических веб-сайтов при помощи Azure Storage Account, то все упирается в наличие репозитория на GitHub. По крайней мере сейчас. Если ваш репозиторий на GitHub, то конечно, этот вариант «из коробки» более прост удобен для работы. В добавок он поддерживает  серверную функциональность на основе Azure Functinos. 

Комментариев нет: