Compilar uma API com as Funções do Azure
Agora é hora de criar uma API para seu aplicativo de lista de compras.
Funções do Azure
Um dos maiores benefícios das Aplicações Web Estáticas do Azure é o facto de alojarem a sua aplicação Web e uma API compilada com as Funções do Azure em conjunto! As Aplicações Web Estáticas do Azure distribuem globalmente os elementos estáticos da sua aplicação Web e alojam a sua API nas Funções do Azure. Com esta configuração, obtém a disponibilidade e a rapidez associadas à distribuição global dos seus elementos da aplicação Web. O que 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ê obtém a facilidade de publicar seu aplicativo e sua API com configuração e manutenção mínimas.
As Funções do Azure apresentam os seus pontos finais de rota, não exigem a configuração ou manutenção de um servidor de back-end completo e proporcionam o dimensionamento horizontal e vertical automático com base na procura. 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 através deste mesmo URL, anexando /api ao URL.
A API de lista de compras
A sua aplicação de lista de compras permite que as pessoas obtenham, adicionem, atualizem e eliminem itens da lista. Portanto, faz sentido que sua API tenha pontos de extremidade que correspondam a essas necessidades.
Aqui estão os quatro pontos finais:
| Métodos | Pontos finais da rota | Ponto final completo da API |
|---|---|---|
| Obtém | products |
api/products |
| Publicação | products |
api/products |
| INSERIR | 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 api prefixo é reservado para seus pontos de extremidade de API no aplicativo. 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 a aplicação Web
Até agora, utilizou uma arquitetura de front-end. Em breve, você adiciona uma API e a conecta ao seu aplicativo front-end. Seu repositório tem um projeto de API que contém um projeto incompleto de Azure Functions e pontos de extremidade HTTP que permitem operações de PUT, POST e DELETE nos seus produtos. A API tem em falta a função HTTP GET. Você conclui a API do projeto do Azure Functions e adiciona a função ausente e, em seguida, conecta sua API ao seu aplicativo Web front-end.
Visualizar alterações no seu aplicativo Web
Antes de fazer alterações a uma aplicação, recomenda-se criar um novo ramo para as alterações. Você está fazendo várias alterações ao concluir a API do seu aplicativo, portanto, cria uma ramificação para essas alterações.
Depois de fazer as alterações, você deseja vê-las em execução antes de decidir mesclá-las. Depois de criar um pull request do seu novo ramo para o ramo principal, a GitHub Action constrói a sua aplicação e a API, e os implementa num URL de pré-visualização. Esta URL de pré-visualização permite-lhe deixar a sua aplicação Web em execução com as Aplicações Web Estáticas do Azure, mas também ver um segundo URL com os resultados do seu pedido pull.
Configurar a comunicação entre a aplicação Web e a API
Quando executa a sua API localmente, esta é executada na porta 7071 por predefinição. A sua aplicação Web é executada noutra porta local. Quando seu aplicativo Web tenta fazer uma solicitação HTTP de sua porta para a porta 7071 da API, a ação é conhecida como CORS (Cross-Origin Resource Sharing). 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. As Aplicações Web Estáticas do Azure configuram automaticamente a sua aplicação para que possa comunicar com a sua API no Azure com recurso a um proxy inverso. Um proxy invertido é o que permite que a sua aplicação Web e API pareçam ser provenientes do mesmo domínio Web. Por isso, só terá de configurar a CORS quando executar localmente.
Próximos passos
Agora, está pronto para criar a sua API e configurar os seus pontos finais HTTP para a aplicação de lista de compras.