Suporte à API em Aplicativos Web Estáticos do Azure com Gerenciamento de API do Azure
O Gerenciamento de API do Azure é um serviço que permite criar um gateway de API moderno para serviços back-end existentes.
Quando você vincula 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 intermediadas por proxy para a mesma rota no serviço de Gerenciamento de API do Azure.
Um serviço de 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.
Todas as camadas de preços do Azure API Management estão disponíveis para uso com os Aplicativos Web Estáticos do Azure.
As opções de API para Aplicativos Web Estáticos incluem os seguintes serviços do Azure:
- Funções do Azure
- Gestão de API do Azure
- Serviço de Aplicações do Azure
- Aplicativos de contêiner do Azure
Consulte a visão geral das APIs para obter mais informações.
Nota
A integração com o Gerenciamento de API do Azure requer o plano Static Web Apps Standard.
A integração de back-end não é suportada 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 |
|---|---|
| Gestão de API do Azure | Se você ainda não tiver uma, siga as etapas no guia Criar uma nova instância de serviço de Gerenciamento de API do Azure. |
| Aplicação Web estática existente | Se você ainda não tiver um, siga as etapas no guia de introdução para criar um aplicativo Web estático No Framework . |
Exemplo
Considere uma instância de Gerenciamento de API do Azure existente que exponha um ponto de extremidade por meio do seguinte local.
https://my-api-management-instance.azure-api.net/api/getProducts
Uma vez vinculado, você pode acessar esse mesmo ponto de extremidade através do caminho do api seu aplicativo Web estático, conforme mostrado neste URL de exemplo.
https://red-sea-123.azurestaticapps.net/api/getProducts
Ambos os 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 Static Web Apps corresponde às solicitações feitas e /api faz 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 back-end de API para um aplicativo Web estático, siga estas etapas:
No portal do Azure, vá para o aplicativo Web estático.
Selecione APIs no menu de navegação.
Localize o ambiente ao qual você deseja vincular o serviço de Gerenciamento de API. Selecionar Ligação.
Em Tipo de recurso de back-end, selecione Gerenciamento de API.
Em Assinatura, selecione a assinatura que contém o serviço de Gerenciamento de API do Azure que você deseja vincular.
Em Nome do recurso, selecione o serviço Gerenciamento de API do Azure.
Selecionar Ligação.
Importante
Quando o processo de vinculação estiver concluído, as solicitações para rotas que começam com /api serão intermediadas por proxy para seu 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 APIs para seu 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 deseja expor de seus Aplicativos Web estáticos e, em seguida, selecione o link Selecionar .
O processo de vinculação também aplica automaticamente a seguinte configuração ao seu 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 definida como escopo para o produto com o mesmo nome. - Uma política validate-jwt de entrada é adicionada ao produto para permitir somente solicitações que contenham 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 fazer proxy de solicitações para o serviço de Gerenciamento de API.
Importante
Alterar a política validate-jwt ou regenerar a chave primária da assinatura impede que seu aplicativo 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 seu aplicativo Web estático enquanto eles estiverem vinculados.
Desvincular um serviço de Gerenciamento de API do Azure
Para desvincular um serviço de Gerenciamento de API do Azure de um aplicativo Web estático, siga estas etapas:
No portal do Azure, vá para 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 estiver concluído, as solicitações para rotas que começam com /api/ não serão mais intermediadas por proxy para o serviço de Gerenciamento de API.
Nota
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.
Resolução de problemas
Se as APIs não estiverem associadas ao produto de 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 .