Создание API с помощью функций Azure
Теперь пришло время создать API для приложения списка покупок.
Функции Azure
Одним из величайших преимуществ статических веб-приложений Azure является размещение веб-приложения и API, созданного вместе с функциями Azure. Статические веб-приложения Azure глобально распределяют статические ресурсы веб-приложения и размещают API в Функциях Azure. Благодаря этой настройке вы получаете доступность и скорость, которая поставляется с глобальным распределением ресурсов веб-приложения.
То, что вы не получаете, также важно.
Вам не нужен полный сервер для настройки и обслуживания фронтенда или бэкенда. Благодаря статическим веб-приложениям Azure вы получите удобное место для публикации приложения и API с минимальной конфигурацией и обслуживанием.
Функции Azure обслуживают конечные точки маршрута, не требуют полнофункционального бэкенд-сервера для настройки или обслуживания, а также обеспечивают автоматическое масштабирование вширь и вниз в зависимости от спроса. Эти функции делают Функции Azure отличным партнером API для веб-приложения списка покупок, которое обслуживает статические ресурсы.
Статические веб-приложения Azure создают уникальный URL-адрес сайта, который можно найти на вкладке Обзор на портале. API доступен через этот же URL-адрес, добавив /api к URL-адресу.
API списка покупок
Приложение списка покупок позволяет пользователям получать, добавлять, обновлять и удалять элементы из списка. Поэтому имеет смысл, что API должен иметь конечные точки, соответствующие этим потребностям.
Ниже приведены четыре создаваемые конечные точки:
| Методика | Конечные точки маршрута | Полная конечная точка API |
|---|---|---|
| ПОЛУЧИТЬ | products |
api/products |
| ПОСТ | products |
api/products |
| КЛАСТЬ | products/:id |
api/products/:id |
| УДАЛИТЬ | products/:id |
api/products/:id |
Обратите внимание, что ваши GET-запросы HTTP направляются к api/products. Префикс api зарезервирован для конечных точек API в приложении. Вы можете определить любые другие маршруты в соответствии с потребностями сайта, но api всегда указывает на приложение Функций Azure.
Создание API для веб-приложения
До сих пор вы использовали фронтенд-фреймворк. Вскоре вы можете добавить API и подключить его к интерфейсным приложениям. В вашем репозитории есть папка api-starter, содержащая неполный проект Azure Functions и конечные точки HTTP для PUT, POST и DELETE ваших продуктов.
В API отсутствует функция HTTP GET. Завершите проект функций Azure и добавьте отсутствующую функцию. Затем подключите API к вашему фронтенд веб-приложению.
Предварительный просмотр изменений в веб-приложении
Прежде чем вносить изменения в приложение, рекомендуется создать новую ветвь для изменений. Так как вы вносите несколько изменений, чтобы завершить API для приложения, необходимо создать ветвь для этих изменений.
После внесения изменений вы захотите посмотреть, как они работают, прежде чем принять решение о слиянии изменений. После создания запроса на вытягивание из новой ветви в ветвь основной ветвь GitHub Action создает приложение и API и развертывает их в URL-адрес предварительной версии. Данная функция позволяет вашему веб-приложению продолжать работу с Azure Static Web Apps, а также просматривать второй экземпляр предварительной версии с результатами вашего pull-запроса.
Взаимодействие между веб-приложением и API
При локальном запуске API с функциями Azure он выполняется через порт 7071 по умолчанию. Веб-приложение выполняется на другом локальном порту. Когда веб-приложение пытается выполнить HTTP-запрос из своего порта в порт 7071 API, запрос называется общим доступом к ресурсам между источниками (CORS). Браузер запрещает выполнение HTTP-запроса, если сервер API не разрешает продолжить запрос.
При публикации в статических веб-приложениях Azure вам не нужно беспокоиться о CORS. Статические веб-приложения Azure автоматически настраивают ваше приложение так, чтобы оно общалось с API на Azure через обратный прокси. Обратный прокси-сервер — это то, что позволяет веб-приложению и API отображаться из того же веб-домена. Поэтому при локальном развертывании необходимо настроить CORS.
Дальнейшие действия
Теперь вы готовы к созданию API и настройке конечных точек HTTP для приложения списка покупок.