Сборка API с помощью Функций Azure
Теперь пришло время создать API для приложения списка покупок.
Функции Azure
Одним из главных преимуществ службы статических веб-приложений Azure является то, что она размещает ваше веб-приложение и API в сборке с Функциями Azure. Служба статических веб-приложений Azure глобально распределяет статические ресурсы вашего веб-приложения и размещает ваш API в Функциях Azure. В результате вы получаете доступ и скорость, характерные для глобального распределения ресурсов вашего веб-приложений. Важно также то, что вы не получаете.
Вам не нужно настраивать и поддерживать весь сервер для вашего интерфейсной или серверной частей. Эта функция является сладким местом для Статические веб-приложения Azure: вы получаете простоту публикации приложения и API с минимальной конфигурацией и обслуживанием.
Функции Azure обслуживают конечные точки ваших маршрутов, не требуют наличия полноценного внутреннего сервера для настройки или обслуживания и обеспечивают автоматическое масштабирование в зависимости о ваших потребностей. Эти функции делают Функции Azure отличным партнером API для веб-приложения списка покупок, которое обслуживает статические ресурсы.
Служба статических веб-приложений Azure создает для вашего сайта уникальный URL-адрес, который можно найти на портале на вкладке Обзор. API доступен через этот же URL-адрес, добавляя /api к URL-адресу.
API вашего списка покупок
Ваше приложение списка покупок позволяет пользователям получать элементы из списка, добавлять их, обновлять и удалять. Поэтому имеет смысл, что API имеет конечные точки, соответствующие этим потребностям.
Ниже приведены четыре конечные точки:
| Методы | Конечные точки маршрутов | Конечная точка полного API |
|---|---|---|
| GET | products |
api/products |
| POST | products |
api/products |
| PUT | products/:id |
api/products/:id |
| DELETE | products/:id |
api/products/:id |
Обратите внимание, что HTTP-запросы GET направляются к API/продуктам. Префикс api зарезервирован для конечных точек API в приложении. Вы можете определить любые другие маршруты в соответствии с потребностями вашего сайта, но api всегда указывает на приложение Функции Azure.
Создание API для веб-приложения
До сих пор вы использовали интерфейсную платформу. Вскоре вы добавите API и подключите его к интерфейсным приложениям. В вашем репозитории есть проект Api, который содержит незавершенный проект Функций Azure и конечные точки HTTP для размещения, отправки и удаления ваших продуктов. В API отсутствует функция HTTP GET. Вы завершите api Функции Azure проекта и добавьте недостающую функцию, а затем подключите API к интерфейсным веб-приложениям.
Предварительный просмотр изменений в веб-приложении
Прежде чем вносить в приложение изменения, рекомендуется создать для изменений новую ветвь. Вы вносите несколько изменений при завершении API для приложения, поэтому вы создаете ветвь для этих изменений.
После внесения изменений необходимо просмотреть их перед принятием решения об объединении изменений. После создания запроса на вытягивание из новой ветви в главную ветвь действие GitHub создает приложение и API и развертывает их как в URL-адрес предварительной версии. Этот URL-адрес предварительной версии позволяет оставить веб-приложение запущенным с Статические веб-приложения Azure, но также просмотреть второй URL-адрес с результатами запроса на вытягивание.
Настройка взаимодействия между веб-приложением и API
Если API запускается локально, для его выполнения по умолчанию используется порт 7071. Веб-приложение выполняется через другой локальный порт. Когда веб-приложение пытается выполнить HTTP-запрос из порта в порт 7071 API, действие называется совместное использование ресурсов между источниками (CORS). Браузер запрещает выполнение HTTP-запроса, если сервер API не разрешает продолжить запрос.
При публикации в Статические веб-приложения Azure вам не нужно беспокоиться о CORS. Служба статических веб-приложений Azure автоматически настроит ваше приложение так, чтобы оно могло взаимодействовать с вашим API в Azure через обратный прокси-сервер. Обратный прокси-сервер создает видимость того, что веб-приложение и API находятся в одном и том же веб-домене. Поэтому в случае локального запуска вам нужно настраивать только CORS.
Следующие шаги
Теперь вы готовы создать API и настроить конечные точки HTTP для своего приложения списка покупок.