Criar uma API com o Azure Functions
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 ele hospeda seu aplicativo Web e uma API criada com o Azure Functions em conjunto. 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 configurar e manter seu front-end ou back-end. Com os Aplicativos Web Estáticos do Azure, você chega ao ponto ideal: obtém a facilidade de publicar seu aplicativo e 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 no 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 correspondam a essas necessidades.
Aqui estã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 |
| PUBLICAR | products |
api/products |
| COLOCAR | products/:id |
api/products/:id |
| EXCLUIR | products/:id |
api/products/:id |
Observe que suas solicitações HTTP GET são roteadas para api/products. O prefixo api é reservado para os seus endpoints da API no aplicativo. Você pode definir outras rotas para atender às necessidades do seu site, mas a 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 breve, você poderá adicionar uma API e conectá-la 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 EXCLUIR 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 ausente. Em seguida, conecte sua API ao seu aplicativo Web front-end.
Visualizando alterações em seu 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 do seu aplicativo, você deve criar um branch para essas alterações.
Depois de fazer as alterações, você desejará vê-las em execução antes de decidir mesclar as alterações. Depois que você criar um pull request da nova ramificação para a ramificação principal, a GitHub Action compilará o aplicativo e a API e os implantará em um 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 da solicitação de pull.
Comunicando-se 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. O aplicativo Web é executado em outra porta local. Quando seu aplicativo Web tenta fazer uma solicitação HTTP de sua porta para a porta 7071 da API, a solicitação é chamada 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.