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 seu 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 seu aplicativo Web e hospedam sua API no Azure Functions. Com essa configuração, você ganha a disponibilidade e a velocidade que vêm com a distribuição global dos ativos do seu aplicativo Web.
O que você não recebe também é importante.
Você não precisa de um servidor completo para configurar e manter o front-end ou back-end. Com os Aplicativos Web Estáticos do Azure, você atinge o ponto ideal: obtém a facilidade de publicar seu aplicativo e sua API com o mínimo de configuração e manutenção.
O Azure Functions serve os seus pontos de extremidade de rota, não requer um servidor back-end completo para configurar ou manter e fornece escalonamento automático com base nas necessidades. Esses recursos tornam o Azure Functions um ótimo parceiro de API para seu aplicativo Web de lista de compras que serve ativos estáticos.
As Aplicações Web Estáticas do Azure geram um URL único para o seu site, o qual pode ser encontrado no separador Visão Geral do portal. A API está disponível através deste mesmo URL, anexando /api ao URL.
A API da sua lista de compras
Seu aplicativo de lista de compras permite que as pessoas obtenham, adicionem, atualizem e excluam itens de suas listas. Portanto, faz sentido que sua API tenha pontos de extremidade correspondentes a essas necessidades.
Aqui estão os quatro pontos de extremidade que você cria:
| Metodologia | Pontos finais de rota | Endpoint completo da API |
|---|---|---|
| OBTER | products |
api/products |
| PUBLICAR | products |
api/products |
| COLOCAR | products/:id |
api/products/:id |
| SUPRIMIR | products/:id |
api/products/:id |
Observe que suas solicitações HTTP GET são encaminhadas para api/products. O prefixo api é reservado para os seus pontos de extremidade de API na aplicação. Você pode definir quaisquer outras rotas para atender às necessidades do seu site, mas api sempre aponta para o aplicativo Azure Functions.
Criar uma API para o aplicativo Web
Até agora, você tem usado uma estrutura de front-end. Em breve você pode adicionar uma API e conectá-la ao seu aplicativo front-end. O seu repositório tem uma pasta api-starter que contém um projeto incompleto do Azure Functions e endpoints HTTP para PUT, POST e DELETE dos seus produtos.
À API falta a função HTTP GET. Conclua a API do projeto do Azure Functions e adicione a função ausente. Em seguida, conecte sua API ao seu aplicativo Web front-end.
Pré-visualizar alterações à sua aplicação Web
Antes de fazer alterações em um aplicativo, é uma boa prática criar uma nova ramificação para as alterações. Como você está fazendo várias alterações para concluir a API do seu aplicativo, você deve criar uma ramificação para essas alterações.
Depois de fazer as alterações, você vai querer 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 , a ação do GitHub constrói a sua aplicação e API e implanta-os numa URL de visualização. Esse recurso permite que você deixe seu 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 de sua solicitação pull.
Comunicação entre seu aplicativo Web e a API
Quando você executa sua API localmente com o Azure Functions, ela é executada na porta 7071 por padrão. Seu aplicativo Web é executado em uma porta local diferente. Quando seu aplicativo Web tenta fazer uma solicitação HTTP de sua porta para a porta 7071 da API, a solicitação é chamada de Compartilhamento de Recursos entre Origens (CORS). Seu navegador impede que a solicitação HTTP seja concluída, a menos que o servidor de 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 seu aplicativo para que ele possa se comunicar com sua API no Azure usando um proxy reverso. Um proxy reverso é o que permite que seu aplicativo Web e sua API pareçam vir do mesmo domínio da Web. Portanto, você só precisa configurar o CORS quando executar localmente.
Próximos passos
Agora você está pronto para criar sua API e configurar seus pontos de extremidade HTTP para seu aplicativo de lista de compras.