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. 

Комментарии

Отправить комментарий

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

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

Изображение
В этой статье я хочу рассказать про пары команды docker save/load и docker export/import, показать примеры их использования и рассказать чем они отличаются. Да и как обычно, если тексту с картинками вы предпочитаете видео, то вот моя видео-инструкция на YouTube. Команды docker save и docker load Начнем с пары docker save/load. Эта пара команд работает с докер-имиджами. Команда docker save сохраняет имидж с локальной машины в tar-архив. Этот архив содержит всю необходимую информацию, чтобы потом восстановить докер-имидж. Восстановление докер-имиджа из tar-архива производится командой docker load.  Теперь посмотрим на примере как это делается. У меня локально есть докер-имидж “alpine”.  Чтобы сохранить его как tar-архив воспользуемся командой  docker save alpine -o alpine-image.tar Обратите внимание, на ключ  “-o“. Он позволяет указать имя файла, в который надо сохранить докер-имидж. Теперь я удалю этот имидж из системы командой  docker image rm alpine  Как вы видите, никаких имиджей у м
Далее...

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

Изображение
Я регулярно пользуюсь утилитами Sysinternals и хочу поделиться одним из cпособов как при помощи Process Explorer выяснить какой процесс заблокировал доступ к файлу или папке. Использовать утилиты очень удобно – они бесплатны, не требуют инсталляции и могут быть запущены без предварительного скачивания из интернета (см http://live.sysinternals.com/ ). Последние 2 пункта делают их очень удобными при анализе и устранении проблем на серверах. Я недавно завел Ютуб-канал, где выкладываю видео по теме блога. Приглашаю Вас посмотреть и подписаться что бы не пропустить новые выпуски. Итак, как же узнать, кто держит тот или иной файл или папку. Для скриншотов я смоделировал такую ситуацию нарочно, открыв в Word файл "D:\temp\Doc1.docx" и пытаясь его в это же время удалить в проводнике. При попытке удалить файл получаю следующее сообщение Поищем этот документ в Process Explorer: Find->Find Handle or DLL… В появившемся окне вводим имя заблокированного файла и жмем Search Двойной к
Далее...

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

Как пишет в своем блоге Janson Zanders, признанный эксперт в области разработки программного обеспечения, соавтор книги Design Patterns, один из разработчиков JUnit и Eclipse -- Эрик Гамма присоединится к команде разработчиков Visual Studio и возглавит Visual Studio development lab в Цюрихе. Подробнее здесь .
Далее...