Suporte de API nos Aplicativos Web Estáticos do Azure com o Gerenciamento de API do Azure
O Azure Gerenciamento de API é um serviço que permite criar um gateway de API moderno para serviços de back-end existentes.
Ao vincular seu serviço de Gerenciamento de API do Azure ao seu aplicativo Web estático, todas as solicitações para seu aplicativo Web estático com uma rota que começa com /api são proxies para a mesma rota no serviço Gerenciamento de API do Azure.
Um serviço Gerenciamento de API do Azure pode ser vinculado a vários aplicativos Web estáticos ao mesmo tempo. Um produto de Gerenciamento de API é criado para cada aplicativo Web estático vinculado. Todas as APIs adicionadas ao produto estão disponíveis para o aplicativo Web estático associado.
Todos os tipos de preço do Gerenciamento de API do Azure estão disponíveis para uso com Aplicativos Web Estáticos do Azure.
As opções de API para Aplicativos Web Estáticos incluem os seguintes serviços do Azure:
- Azure Functions
- Gerenciamento de API do Azure
- Serviço de Aplicativo do Azure
- Aplicativos de Contêiner do Azure
Confira a Visão geral das APIs para obter mais informações.
Observação
A integração com o Gerenciamento de API do Azure requer o plano Static Web Apps Standard.
Não há suporte para a integração de back-end em ambientes de solicitação pull de Aplicativos Web Estáticos.
Pré-requisitos
Para vincular uma instância de gerenciamento de API ao seu aplicativo Web estático, você precisa ter um recurso de Gerenciamento de API do Azure existente e um aplicativo Web estático.
| Recurso | Descrição |
|---|---|
| Gerenciamento de API do Azure | Se você ainda não tiver um, siga as etapas no guia Criar uma nova instância do serviço de Gerenciamento de API do Azure. |
| Aplicativo Web estático existente | Se você ainda não tiver um aplicativo Web estático, siga as etapas no guia de introdução para criar um sem estrutura. |
Exemplo
Considere uma instância existente do Gerenciamento de API do Azure que exponha um ponto de extremidade por meio do seguinte local.
https://my-api-management-instance.azure-api.net/api/getProducts
Depois de vinculado, você pode acessar esse mesmo ponto de extremidade por meio do caminho api do seu aplicativo Web estático, conforme mostrado nesta URL de exemplo.
https://red-sea-123.azurestaticapps.net/api/getProducts
Ambas as URLs apontam para o mesmo ponto de extremidade da API. O ponto de extremidade na instância de Gerenciamento de API deve ter o prefixo, já que os Aplicativos Web Estáticos correspondem às solicitações feitas e /api fazem proxy de todo o caminho para o /api recurso vinculado.
Vincular um serviço de Gerenciamento de API do Azure
Vincular a instância de Gerenciamento de API a Aplicativos Web Estáticos
Para vincular um serviço de Gerenciamento de API do Azure como o back-end da API para um aplicativo Web estático, siga estas etapas:
No portal do Azure, navegue até o aplicativo Web estático.
Selecione APIs no menu de navegação.
Localize o ambiente ao qual você deseja vincular o serviço Gerenciamento de API. Selecione Vincular.
No tipo de recurso back-end, selecione Gerenciamento de API.
Na Assinatura, selecione a assinatura que contém o serviço de Gerenciamento de API do Azure que você deseja vincular.
No nome do recurso, selecione o serviço de Gerenciamento de API do Azure.
Selecione Vincular.
Importante
Quando o processo de vinculação for concluído, as solicitações para rotas que começam com /api são enviadas por proxy para o serviço de Gerenciamento de API do Azure. No entanto, nenhuma API é exposta por padrão. Consulte Configurar APIs para receber solicitações para configurar um produto de Gerenciamento de API para permitir as APIs que você deseja usar.
Configurar APIs para receber solicitações
O Gerenciamento de API do Azure tem um recurso de produtos que define como as APIs são exibidas. Como parte do processo de vinculação, seu serviço de Gerenciamento de API é configurado com um produto chamado Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).
Para disponibilizar as APIs ao aplicativo Web estático vinculado, adicione-as ao produto.
Na instância de Gerenciamento de API no portal, selecione a guia Produtos .
Selecione o
Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)produto.Selecione + Adicionar API.
Selecione as APIs que você deseja expor de seus Aplicativos Web Estáticos e selecione o link Selecionar .
O processo de vinculação também aplica automaticamente a seguinte configuração ao serviço de Gerenciamento de API:
- O produto associado ao aplicativo Web estático vinculado está configurado para exigir uma assinatura.
- Uma assinatura de Gerenciamento de API nomeada
Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>é criada e no escopo do produto com o mesmo nome. - Uma política de entrada validate-jwt é adicionada ao produto para permitir apenas solicitações que contêm um token de acesso válido do aplicativo Web estático vinculado.
- O aplicativo Web estático vinculado é configurado para incluir a chave primária da assinatura e um token de acesso válido ao proxy de solicitações para o serviço de Gerenciamento de API.
Importante
Alterar a política validate-jwt ou gerar novamente a chave primária da assinatura impede que seu aplicativo da web estático faça proxy de solicitações para o serviço de gerenciamento de API. Não modifique nem exclua a assinatura ou o produto associado ao aplicativo Web estático enquanto eles estiverem vinculados.
Desvincular um serviço de Gerenciamento de API do Azure
Para desvincular um serviço Gerenciamento de API do Azure de um aplicativo Web estático, siga estas etapas:
No portal do Azure, navegue até o aplicativo Web estático.
Localize o ambiente que você deseja desvincular e selecione o nome do serviço de Gerenciamento de API.
Selecione Desvincular.
Quando o processo de desvinculação for concluído, as solicitações para rotas que começam com /api/ não são mais enviadas por proxy para o serviço de Gerenciamento de API.
Observação
O produto de Gerenciamento de API e a assinatura associados ao aplicativo Web estático vinculado não são excluídos automaticamente. Você pode excluí-los do serviço de Gerenciamento de API.
Solução de problemas
Se as APIs não estiverem associadas ao produto Gerenciamento de API criado para o recurso Aplicativos Web Estáticos, acessar uma /api rota em seu aplicativo Web estático retornará o seguinte erro do gerenciamento de API.
{
"statusCode": 401,
"message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}
Para resolver esse erro, configure as APIs que você deseja expor em seus Aplicativos Web Estáticos para o produto criado para ele, conforme detalhado na seção Configurar APIs para receber solicitações .