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.
As Aplicações Web Estáticas do Azure geram um URL exclusivo para o seu site, que pode encontrar no separador Overview (Descriçã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 |
|---|---|---|
| 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 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. O seu repositório tem um projeto Api que contém um projeto incompleto das Funções do Azure e pontos finais HTTP para PUT, POST e DELETE dos 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 uma solicitação pull de sua nova ramificação para a ramificação principal , a Ação do GitHub cria seu aplicativo e API e implanta ambos em uma URL de 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.