Criar uma API com o Azure Functions

Concluído

Agora é hora de criar uma API para seu aplicativo de lista de compras.

Funções do Azure

Um dos maiores benefícios dos Aplicativos Web Estáticos do Azure é que eles hospedam o aplicativo Web e uma API criada com o Azure Functions juntos. Os Aplicativos Web Estáticos do Azure distribuem globalmente os ativos estáticos do aplicativo Web e hospedam a API no Azure Functions. Com essa configuração, você obtém a disponibilidade e a velocidade proporcionadas pela distribuição global dos ativos do aplicativo Web.

O que você não obtém também é importante.

Você não precisa de um servidor completo para a configuração e manutenção de seu front-end ou back-end. Com os Aplicativos Web Estáticos do Azure, você chega ao ponto ideal: você tem a facilidade de publicar o aplicativo e a API com configuração e manutenção mínimas.

O Azure Functions serve os pontos de extremidade de sua rota, não precisa de um servidor de back-end completo para configuração ou manutenção e fornece redução e escala horizontais sob demanda. Esses recursos tornam o Azure Functions um ótimo parceiro de API para seu aplicativo Web de lista de compras que serve ativos estáticos.

Os Aplicativos Web Estáticos do Azure geram uma URL exclusiva para seu site, que você pode encontrar na guia Visão geral do Portal. A API é disponibilizada por meio dessa mesma URL, acrescentando /api a ela.

Sua API de lista de compras

O aplicativo de lista de compras permite que as pessoas obtenham, adicionem, atualizem e excluam itens das listas delas. Portanto, faz sentido que a API tenha pontos de extremidade que correspondem a essas necessidades.

Estes são os quatro pontos de extremidade que você cria:

Métodos	Pontos de extremidade da rota	Ponto de extremidade da API completa
GET	products	api/products
POST	products	api/products
PUT	products/:id	api/products/:id
DELETE	products/:id	api/products/:id

Observe que suas solicitações HTTP GET são roteadas para api/products. O prefixo api é reservado para os pontos de extremidade de sua API no aplicativo. Você pode definir outras rotas para atender às necessidades de seu site, mas api sempre aponta para o aplicativo do Azure Functions.

Criar uma API para o aplicativo Web

Até agora, você estava usando uma estrutura de front-end. Em seguida, você pode adicionar uma API e a conectar ao seu aplicativo front-end. Seu repositório tem uma pasta api-starter que contém um projeto incompleto do Azure Functions e pontos de extremidade HTTP para efetuar PUT, POST e DELETE de seus produtos. A API não tem a função HTTP GET. Conclua a API do projeto do Azure Functions e adicione a função que está faltando. Em seguida, conecte a API a seu aplicativo Web de front-end.

Visualizando alterações no aplicativo Web

Antes de fazer alterações em um aplicativo, é uma boa prática criar um branch para as alterações. Como você está fazendo várias alterações para concluir a API para seu aplicativo, você deve criar um branch para essas alterações.

Depois de fazer as alterações, você precisa vê-las em execução antes de decidir mesclá-las. Depois que você criar uma solicitação de pull do novo branch para o branch main, a GitHub Action compilará o aplicativo e a API e os implantará em uma URL de visualização. Este recurso permite que você deixe o aplicativo Web em execução com os Aplicativos Web Estáticos do Azure, mas também veja uma segunda instância de visualização com os resultados da solicitação de pull.

Comunicação entre o aplicativo Web e a API

Quando você executa a API localmente com o Azure Functions, ela é executada na porta 7071 por padrão. O aplicativo Web é executado em outra porta local. Quando seu aplicativo Web tenta fazer uma solicitação HTTP da porta dele para a porta 7071 da API, a solicitação é chamada de CORS (compartilhamento de recursos entre origens). Seu navegador impede que a solicitação HTTP seja concluída, a menos que o servidor da API permita que a solicitação prossiga.

Ao publicar nos Aplicativos Web Estáticos do Azure, você não precisa se preocupar com o CORS. Os Aplicativos Web Estáticos do Azure configuram automaticamente o aplicativo para que ele possa se comunicar com sua API no Azure usando um proxy inverso. Um proxy inverso é o que permite que o aplicativo Web e a API pareçam vir do mesmo domínio da Web. Portanto, você só precisa configurar o CORS quando executa localmente.

Próximas etapas

Agora, você está pronto para criar a API e configurar os pontos de extremidade HTTP para o aplicativo de lista de compras.