Введение

  • 4 мин

Сценарий

Ваша компания запускает веб-приложение списка покупок. Через сайт клиенты могут добавлять товары (например, продукты и товары для дома) в список покупок, изменять их, а также просматривать и удалять.

Чтобы обеспечить конфиденциальность клиентов, сайт и API должны быть защищены. Пользователи будут из разных стран, и важно обеспечить для всех высокую производительность. Поэтому вам подойдет решение, которое максимально сократит работу с инфраструктурой, включая ее создание и публикацию, чтобы вы могли сосредоточиться на разработке функций и пользовательского интерфейса.

Вы могли бы развернуть веб-ресурсы в облачном хранилище, создать и назначить свой SSL-сертификат, создать API на сервере в облаке, установить подключение к обратному прокси-серверу, который позволяет приложению выполнять вызовы к API, распространить приложение глобально и настроить собственный процесс CI/CD.

Но при использовании Статических веб-приложений Azure все это обеспечивается по умолчанию.

Что такое служба статических веб-приложений Azure?

Служба статических веб-приложений Azure решает сложные задачи на всем пути от исходного кода до обеспечения глобальной доступности.

Пока вы занимаетесь разработкой приложения, служба "Статические веб-приложения Azure" автоматически выполняет его сборку и размещение из GitHub или Azure DevOps.

Статические веб-приложения обычно собираются с помощью библиотек и платформ, таких как Angular, React, Svelte или Vue. К таким приложениям относятся HTML, CSS, JavaScript и ресурсы изображений, составляющие приложение. При использовании традиционной архитектуры веб-сервера эти файлы обслуживаются с одного сервера вместе со всеми необходимыми конечными точками API.

При использовании службы статических веб-приложений Azure статические ресурсы отделены от традиционных веб-серверов и обслуживаются из точек, распределенных по всему миру. Это распределение намного ускоряет обслуживание файлов, поскольку файлы становятся ближе к пользователям физически. Конечные точки API, которые не являются обязательными, размещаются с использованием бессерверной архитектуры, что полностью снимает необходимость в полноценном внутреннем сервере.

Модель статических веб-приложений Azure состоит в том, что вы получаете именно то, что вам нужно, ни больше ни меньше.

Screenshot showing the Static Apps overview.

При создании ресурса службы "Статические веб-приложения 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.
  • В конце вы изучите и запустите свое приложение, как показано ниже.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the Vue sample application.

Следующие шаги

Сейчас вы, наверное, думаете о том, что сначала вам нужно создать ресурсы Azure, но Статические веб-приложения Azure уже учли ваш порядок работы. Лучше всего будет начать с работы с кодом в GitHub, а затем создать ресурсы в Azure.