#03: API-включение статических веб-приложений

Добро пожаловать на Неделю 1, день 3 из #30DaysOfSWA!!!

Вчера мы создали и развернули наше первое статическое веб-приложение (используя шаблон vanillaJS) из репозитория GitHub. Мы использовали расширение VS Code Extension и, всего несколькими щелчками мыши, оно прозрачно настроило для нас автоматизированные рабочие процессы GitHub Actions (CI/CD). Сегодня мы узнаем, как добавить конечные точки бессерверных API в наше приложение с помощью Azure Functions, что поможет нам более эффективно масштабировать API в зависимости от спроса.

Что мы рассмотрим

• Зачем переходить на бессерверные технологии с помощью SWA?
• Добавление API с помощью Azure Functions
• Быстрый старт: Использование управляемых функций
• Создавайте собственные функции
• Пример: Принесите Azure-SWAG на 4 мая!
• Упражнение: Попробуйте сами!

Об авторе(ах)

Этот пост написан в соавторстве с Энтони Чу, менеджером по продуктам Microsoft для Azure Container Apps, Azure Static Web Apps и Azure Functions. Следуйте за ним @nthonyChu или прямо здесь на dev.to

Энтони Чу

Я менеджер по продуктам в Microsoft, работаю над Azure Container Apps и Azure Static Web Apps. Я также работал над Azure Functions и был Cloud Developer Advocate.

Почему стоит переходить на бессерверные технологии?

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

Во вчерашней заметке мы рассмотрели базовое статическое веб-приложение, содержащее только активы контента (без API). Развертывание этого приложения с помощью SWA помогло нам воспользоваться преимуществами глобально распределенных серверов контента Azure для быстрого и экономически эффективного доступа. Сегодня мы хотим добавить конечную точку API для поддержки динамических запросов от клиентов. Что же означает термин «бессерверный» и как реализовать бессерверные конечные точки API?

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

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

Использование функций Azure Functions

Static Web Apps и Azure Functions легко интегрируются, обеспечивая ключевые возможности в отношении безопасности (пользовательские данные) и интеграции маршрутизации:

• Доступ к данным пользователя — API-функции могут напрямую обращаться к данным аутентификации пользователя и авторизации на основе ролей при обработке запросов.
• Доступ к маршруту API — приложение может безопасно обращаться к маршруту /api, не требуя пользовательских правил CORS.

Но это еще лучше. Ваш SWA может быть настроен для Azure Functions двумя способами:

• Managed Functions — когда служба Azure Static Web Apps настраивает и управляет развертыванием Azure Functions.
• Bring Your Own Functions — когда вы используете уже существующее приложение Azure Functions и сами управляете развертыванием.

План Free поддерживает только вариант Managed Functions. Он имеет некоторые ограничения — например, поддерживает только HTTP-триггеры, не поддерживает Durable Functions и т. д. — но он быстро настраивается и прост в использовании. Мы рассмотрим этот вариант сегодня, но ищите пост на четвертой неделе, в котором будет подробно рассмотрен подход Bring Your Own Functions.

Добавление API

Хотите получить практический опыт добавления конечной точки API в развертывание Static Web Apps? Посмотрите это краткое руководство, которое основано на приложении vanilla-JS, развернутом ранее. Ключевыми шагами являются:

1. Настройка Azure Functions для SWA

• Установите расширение Azure Functions для VS Code.
• Откройте корневую папку приложения («/») — создайте вложенную папку «api».
• Выберите «Azure Static Web Apps: Create HTTP Function» через палитру команд или выберите опцию молнии в меню расширения Azure.
• Введите необходимую информацию о конфигурации (language=»JavaScript», function name=»message») и подтвердите.

Откиньтесь на спинку кресла и дождитесь завершения процесса настройки. В результате в корневой папке /api появится каталог /api с файлами конфигурации (*.json), а в подпапке /api/message — 2 файла:

• function.json — определяет триггер этой функции, привязки и другие настройки.
• index.js — реализует асинхронную функцию (доступ по адресу /api/message).

2. Обновите файл index.js для реализации вашей функции — убедитесь, что она возвращает желаемый ответ, учитывая входящий запрос API и контекст (входные параметры).

3. Обновите код вашего приложения, чтобы вызвать API — вы можете сделать это, вызвав fetch('/api/message') напрямую — бесшовная интеграция Azure Functions гарантирует, что маршрутизация API происходит автоматически.

4. Протестируйте интеграцию локально с помощью SWA CLI.
Azure Static Web Apps CLI (SWA CLI) — это инструмент для поддержки локальной разработки статических веб-приложений путем эмуляции необходимых служб там, где это необходимо. Выполните следующие шаги, чтобы установить инструменты и запустить/протестировать ваше приложение и API вместе в локальной среде разработки. Ищите подробный пост из двух частей на третьей неделе («Инструменты разработчика»), где мы более подробно расскажем о возможностях SWA CLI, настройке и использовании.

5. Обновление рабочего процесса GitHub Actions с указанием местоположения API

Это ключевой шаг для того, чтобы рабочий процесс развертывания Azure Static Web Apps также подхватил новую функцию API.

• Откройте файл рабочего процесса GitHub Actions по умолчанию для вашего SWA и обновите свойство api_location до «api».
• Сохраните и зафиксируйте изменения, чтобы запустить пересборку и развертывание.

Хотите увидеть API в действии? Прокрутите вниз до раздела Exercise, где мы расскажем о быстром действии, которое можно выполнить для создания и развертывания статического веб-приложения с помощью GitHub (SWAG) и отпраздновать День Звездных Войн в процессе!

Предпочитаете видеоуроки? Посмотрите этот видеоурок Azure Static Web Apps: Tips & Tricks, в котором рассматривается процесс на основе шаблона react-starter, а также демонстрируется использование контейнера удаленной разработки для Visual Studio Code, что еще больше упрощает процесс разработки.

Упражнение: SWAG!

Сегодня 4 мая — День Звездных войн! Разве не было бы здорово, если бы мы могли отпраздновать его, используя наши любимые цитаты из «Звездных войн»? К счастью, у моего коллеги Йохана есть отличный шаблон Azure-SWAG, который объединяет изображения из Unsplash с заранее определенным набором цитат в API-функции («/api/quote»). Читайте об этом в его оригинальном посте здесь:

Развертывание бессерверных веб-приложений и API с помощью Azure Static Web Apps и GitHub

Йохан Ласорса для Microsoft Azure ・ May 19 ’20 ・・ 4 min read

#webdev #новички #javascript #staticwebapps

Итак, я создал версию для моего посвящения 4 мая. Вот как это выглядит при развертывании. Обновляйте SWA, чтобы каждый раз получать новое изображение и цитату (из API).

• Посмотреть репозиторий кода
• Посмотреть развернутый SWA

Ваше задание: выполните эти шаги, чтобы повторить мой проект, затем изучите код index.js, чтобы увидеть, как реализована функция /api/quote, и изучите код app.js, чтобы увидеть, как этот API вызывается в приложении.

Полезные ресурсы

• Поддержка API в SWA
• Добавление API с помощью управляемых функций
• Принесите свои собственные функции
• Демонстрация May4-Swag