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.

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.

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:

1. No portal do Azure, vá para o aplicativo Web estático.

2. Selecione APIs no menu de navegação.

3. Localize o ambiente ao qual você deseja vincular o serviço de Gerenciamento de API. Selecionar Ligação.

4. Em Tipo de recurso de back-end, selecione Gerenciamento de API.

5. Em Assinatura, selecione a assinatura que contém o serviço de Gerenciamento de API do Azure que você deseja vincular.

6. Em Nome do recurso, selecione o serviço Gerenciamento de API do Azure.

7. Selecionar Ligação.

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.

1. Na instância de Gerenciamento de API no portal, selecione a guia Produtos .

2. Selecione o Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) produto.

3. Selecione + Adicionar API.

4. 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.

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:

1. No portal do Azure, vá para o aplicativo Web estático.

2. Localize o ambiente que você deseja desvincular e selecione o nome do serviço de Gerenciamento de API.

3. 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.

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 .

Próximos passos