Реализация веб-приложения с помощью Статических веб-приложений Azure
Ссылка на видео: https://www.youtube.com/watch?v=JZbO-e6dvOw
Вы узнаете, как реализовать веб-приложение с помощью Статических веб-приложений Azure. Вы узнаете о службе приложений Azure в Главе 4: Обзор Azure для разработчиков, но в этом проекте будет рассмотрен один из расширенных вариантов размещения службы приложений: статические веб-приложения. Разработчики могут использовать статические веб-приложения для отображения статического содержимого (например, HTML, CSS и JavaScript), обеспечивая при этом необходимую динамическую логику путем разработки бессерверных API-интерфейсов с помощью функций Azure. Рабочий процесс статических веб-приложений (см. рис. 3. Рабочий процесс статических веб-приложений Azure) очень похож на повседневный рабочий процесс разработчика. Статические веб-приложения предоставляют управляемый конвейер непрерывной интеграции и непрерывной доставки (CI/CD), который автоматически создает и развертывает веб-приложения с полным стеком из репозитория GitHub в Azure. Это стало возможным благодаря действиям GitHub (чтобы узнать больше о действиях GitHub, посетите эту документацию).
Когда вы создаете ресурс статических веб-приложений, Azure настраивает рабочий процесс GitHub Actions в репозитории исходного кода приложения, который отслеживает выбранную вами ветвь. Каждый раз, когда вы отправляете коммиты или принимаете запросы на вытягивание в отслеживаемую ветку, GitHub Actions автоматически создает и развертывает ваше приложение и его API в Azure. Статические веб-приложения Azure обычно создаются с использованием библиотек и платформ, таких как Angular, React, Svelte или Vue. Эти приложения включают ресурсы HTML, CSS, JavaScript и изображения, из которых состоит приложение.
Статические веб-приложения Azure и традиционный веб-сервер
При использовании традиционного веб-сервера ресурсы обслуживаются с одного сервера вместе с любыми необходимыми конечными точками API. В статических веб-приложениях статические ресурсы отделены от традиционного веб-сервера и вместо этого обслуживаются из точек, географически распределенных по всему миру. Этот дистрибутив значительно ускоряет обслуживание файлов, поскольку файлы физически находятся ближе к конечным пользователям. Кроме того, конечные точки API размещаются с использованием бессерверной архитектуры, что снижает потребность в полном внутреннем сервере.
Основные возможности статических веб-приложений Azure
● Веб-хостинг для статического содержимого, такого как HTML, CSS, JavaScript и изображения.
● Интегрированная поддержка API, обеспечиваемая функциями Azure.
● Интеграция с GitHub первой стороны, при которой изменения репозитория запускают сборку и развертывание.
● Автоматически создавайте промежуточные среды для тестирования обновлений кода перед их развертыванием в рабочей среде.
● Статическое содержимое, распространяемое по всему миру, делает его ближе к вашим пользователям.
● Бесплатные сертификаты SSL, которые автоматически обновляются.
● Персональные домены. для предоставления фирменных настроек вашему приложению
● Бесшовная модель безопасности с обратным прокси-сервером при вызове API, которая не требует настройки CORS
● Интеграция поставщика аутентификации с Azure Active Directory, Facebook, Google, GitHub и Twitter
● Определение и назначение настраиваемых ролей авторизации.
● Правила внутренней маршрутизации, обеспечивающие полный контроль над контентом и маршрутами, которые вы обслуживаете.
Пример использования статических веб-приложений Azure
● Создавайте одностраничные приложения с помощью фреймворков и библиотек, таких как Angular, React, Svelte или Vue, с помощью серверной части функций Azure
● Публикуйте статические сайты с помощью таких фреймворков, как Gatsby, Hugo и VuePress
● Развертывайте веб-сайты. приложения с такими фреймворками, как Next.js и Nuxt.js
Применение на практике Примечание:
На момент написания статьи Статическое веб-приложение Azure находится в предварительной версии и предоставляется бесплатно. Это может быть изменено после выхода из предварительного просмотра.
1. Войдите в свою учетную запись GitHub и перейдите по этому URL-адресу, чтобы создать новый репозиторий.
2. Дайте вашему репозиторию имя, например, my-first-static-web-app. Затем нажмите кнопку Создать репозиторий из шаблона.
3. Затем перейдите на портал Azure. 4. Перейдите в Azure Marketplace, нажав кнопку Создать ресурс. Введите Статическое веб-приложение в поле поиска.
5. Нажмите Статическое веб-приложение (предварительная версия), затем нажмите кнопку Создать:
7. Выберите регион, в котором вы хотите разместить статическое веб-приложение Azure:
8. Подключитесь к своей учетной записи GitHub:
9. В разделе учетной записи GitHub укажите информацию об организации, репозитории и филиале, как показано ниже:
10. Перейдите на вкладку "Рецензирование + создание" и нажмите кнопку "Создать":
11. После завершения развертывания нажмите кнопку Перейти к ресурсам, чтобы найти новый URL-адрес, созданный для вашего статического веб-приложения:
12. Найдите новый URL-адрес, созданный для вашего статического веб-приложения:
13. Откройте браузер и перейдите по сгенерированному URL-адресу, чтобы увидеть свое статическое веб-приложение в действии:
Поздравляем, вы успешно развернули свое первое статическое веб-приложение Azure.
Свяжитесь со мной в
LinkedIn: https://www.linkedin.com/in/dushyants... Github: https://github.com/Dushyantsingh-ds Twitter: https://twitter.com/dushyantsingh_d Блог: https://dushyantsingh-ds.medium.com/ Instagram: https://www.instagram.com/dushyantsin... Facebook: https: //www.facebook.com/dushyantsing...
