Criar uma API com o Azure Functions
Agora é hora de criar uma API para seu aplicativo de lista de compras.
Azure Functions
Um dos maiores benefícios dos Aplicativos Web Estáticos do Azure é que ele hospeda 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 configurar e manter um servidor completo para seu front-end ou back-end. Esse recurso é o ponto ideal para os Aplicativos Web Estáticos do Azure: você tem a facilidade de publicar o aplicativo e a API com o mínimo de configuração e manutenção.
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 está disponível por meio dessa mesma URL, acrescentando /api à URL.
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 sua API tenha pontos de extremidade que atendam a essas necessidades.
Veja os quatro pontos de extremidade:
| 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 seus pontos de extremidade de API no aplicativo. Você pode definir qualquer outras rota para atender às necessidades do 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, adicione uma API e a conecte ao seu aplicativo front-end. Seu repositório tem um projeto Api que contém um projeto incompleto do Azure Functions e pontos de extremidade HTTP para executar PUT, POST e DELETE dos produtos. A API não tem a função HTTP GET. Conclua a API do projeto do Azure Functions e adicione a função ausente e, em seguida, conecte a API ao seu aplicativo Web front-end.
Visualizar as alterações no aplicativo Web
Antes de fazer alterações em um aplicativo, é uma boa prática criar um branch para as alterações. Você está fazendo várias alterações ao concluir a API para seu aplicativo, portanto, crie um branch para essas alterações.
Depois de fazer as alterações, você quer vê-las em execução antes de decidir mesclar as alterações. Depois de criar um pull request do seu novo branch para o branch principal, o GitHub Actions cria o aplicativo e a API e os implanta em uma URL de visualização. Essa URL de visualização permite que você deixe seu aplicativo Web em execução com os Aplicativos Web Estáticos do Azure, mas também veja uma segunda URL com os resultados do seu pull request.
Configurar a comunicação entre o aplicativo Web e a API
Quando você executa a API localmente, 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 ação é conhecida como 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.