Введение
Сценарий
Ваша компания запускает веб-приложение списка покупок. Через сайт клиенты могут добавлять товары (например, продукты и товары для дома) в список покупок, изменять их, а также просматривать и удалять.
Чтобы обеспечить конфиденциальность клиентов, сайт и API должны быть защищены. Пользователи будут из разных стран, и важно обеспечить для всех высокую производительность. Поэтому вам подойдет решение, которое максимально сократит работу с инфраструктурой, включая ее создание и публикацию, чтобы вы могли сосредоточиться на разработке функций и пользовательского интерфейса.
Вы могли бы развернуть веб-ресурсы в облачном хранилище, создать и назначить свой SSL-сертификат, создать API на сервере в облаке, установить подключение к обратному прокси-серверу, который позволяет приложению выполнять вызовы к API, распространить приложение глобально и настроить собственный процесс CI/CD.
Но при использовании Статических веб-приложений Azure все это обеспечивается по умолчанию.
Что такое служба статических веб-приложений Azure?
Служба статических веб-приложений Azure решает сложные задачи на всем пути от исходного кода до обеспечения глобальной доступности.
Пока вы занимаетесь разработкой приложения, служба "Статические веб-приложения Azure" автоматически выполняет его сборку и размещение из GitHub или Azure DevOps.
Статические веб-приложения обычно собираются с помощью библиотек и платформ, таких как Angular, React, Svelte или Vue. К таким приложениям относятся HTML, CSS, JavaScript и ресурсы изображений, составляющие приложение. При использовании традиционной архитектуры веб-сервера эти файлы обслуживаются с одного сервера вместе со всеми необходимыми конечными точками API.
При использовании службы статических веб-приложений Azure статические ресурсы отделены от традиционных веб-серверов и обслуживаются из точек, распределенных по всему миру. Это распределение намного ускоряет обслуживание файлов, поскольку файлы становятся ближе к пользователям физически. Конечные точки API, которые не являются обязательными, размещаются с использованием бессерверной архитектуры, что полностью снимает необходимость в полноценном внутреннем сервере.
Модель статических веб-приложений Azure состоит в том, что вы получаете именно то, что вам нужно, ни больше ни меньше.
При создании ресурса службы "Статические веб-приложения Azure" Azure настроит рабочий процесс GitHub Actions или Azure DevOps в репозитории исходного кода приложения. Рабочий процесс отслеживает выбранную вами ветвь. При каждой отправке фиксаций или создании запросов на вытягивание в отслеживаемую ветвь рабочий процесс автоматически собирает и развертывает ваше приложение и его API в Azure.
Azure размещает и обслуживает ваше веб-приложение. Функции Azure обеспечивают работу API его серверной части, что обеспечивает автоматическое масштабирование в зависимости от требований.
Необязательные API
Статические веб-приложения Azure идеально подходят для обслуживания чистого статического содержимого, но у них также есть отличная поддержка статических веб-приложений, которым требуются интерфейсы API. Поэтому можно размещать статическое веб-приложение с API или без него.
В упражнениях этого модуля вы развернете приложение с помощью предпочитаемой веб-платформы.
Примечание.
В этом модуле вы будете развертывать приложение без API. Сведения о следующем модуле, в котором вы развернете API вместе с приложением, см. в разделе "Дальнейшие действия" в заключительном уроке.
Ключевые функции
- Глобально распределенное веб-размещение, при котором статическое содержимое, включая код HTML, CSS, JavaScript и изображения, размещается ближе к пользователям.
- Интегрированная поддержка API, которую обеспечивают Функции Azure.
- Прямая интеграция с GitHub и Azure DevOps, при которой изменения в репозитории активируют операции сборки и развертывания.
- Бесплатные SSL-сертификаты, которые обновляются автоматически
- Уникальные URL-адреса предварительного просмотра для предварительного просмотра запросов на вытягивание
Цели обучения
В этом модуле вы создадите, измените и развернете веб-приложение и API в Статических веб-приложениях Azure.
Выбор собственного пути
В этом модуле представлено четыре варианта примера приложения на выбор: Angular, React, Svelte и Vue. Большой плюс службы статических веб-приложений Azure в том, что все эти варианты работают без лишних усилий.
Начальный код включает в себя четыре приложения, которые вы будете использовать.
├ angular-app 👈 The Angular client app
├ react-app 👈 The React client app
├ svelte-app 👈 The Svelte client app
└ vue-app 👈 The Vue client app
Что вы будете делать
Выбрав клиентское приложение, вы выполните следующие действия:
- Сборка и запуск интерфейсного приложения.
- Автоматическая сборка и развертывание веб-приложения в Azure из репозитория GitHub с помощью GitHub Actions.
- В конце вы изучите и запустите свое приложение, как показано ниже.
Следующие шаги
Сейчас вы, наверное, думаете о том, что сначала вам нужно создать ресурсы Azure, но Статические веб-приложения Azure уже учли ваш порядок работы. Лучше всего будет начать с работы с кодом в GitHub, а затем создать ресурсы в Azure.