Знакомство

  • 2 мин

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

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

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

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

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

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

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

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

Диаграмма, показывающая статическую модель обзора приложений.

При создании ресурса статических веб-приложений Azure, Azure настраивает рабочий процесс GitHub Actions или Azure DevOps в репозитории исходного кода приложения. Рабочий процесс отслеживает выбранную ветвь. При выполнении отправки коммитов или создании pull-запросов в отслеживаемую ветвь, конвейер автоматически создает и разворачивает ваше приложение и его API в Azure.

Azure размещает и обслуживает веб-приложение. Функции Azure поддерживают функциональность серверного API, обеспечивая автоматическое масштабирование наружу и внутрь в зависимости от спроса.

Необязательные API

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

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

Ключевые функции

  • Глобально распределенный веб-хостинг размещает статический контент, такой как HTML, CSS, JavaScript и изображения, ближе к вашим пользователям.
  • Поддержка интеграции API, предоставляемая функциями Azure.
  • Интеграция первого класса с GitHub и Azure DevOps изменения в вашем репозитории запускают сборки и развертывания.
  • бесплатные SSL-сертификаты, которые автоматически обновляются.
  • уникальные URL-адреса предпросмотра для предварительного просмотра pull-запросов.

Цели обучения

В этом модуле вы создаете, изменяете и развертываете веб-приложение и API в статических веб-приложениях Azure.

Выбор собственного пути

Этот модуль предоставляет четыре варианта примера приложения для выбора: Angular, React, Svelte и Vue. Преимущество статических веб-приложений Azure заключается в том, что все эти варианты просто работают.

Начальный код включает четыре приложения и отправную точку для API, который вы используете позже.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Что вы сделаете

Выбрав клиентское приложение, выполните следующие действия.

  1. Автоматически создавайте и развертывайте веб-приложение в Azure из репозитория GitHub с помощью GitHub Actions.
  2. Создайте API с помощью Функций Azure.
  3. Измените веб-приложение, чтобы сделать HTTP-запросы к API.
  4. Автоматически создавайте и развертывайте веб-приложение в Azure из репозитория GitHub с помощью GitHub Actions.
  5. Наконец, вы изучите и запустите приложение, как показано на следующем рисунке.

Снимок экрана, иллюстрирующий пример приложения angular.

Снимок экрана, иллюстрирующий пример приложения React.

Снимок экрана, на котором показан пример приложения svelte.

Снимок экрана, демонстрирующий пример приложения vue.

Дальнейшие действия

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