Partilhar via

Traga as suas próprias funções para as Aplicações Web Estáticas do Azure

  • Artigo

Os Aplicativos Web Estáticos do Azure fornecem integração de API para permitir que você crie aplicativos Web front-end que dependem de APIs de back-end para dados e serviços. As duas opções de integração de API são: funções gerenciadas e traga seus próprios backends. Para obter mais informações sobre as diferenças entre essas opções, consulte a visão geral.

Este artigo demonstra como vincular um aplicativo existente do Azure Functions a um recurso do Azure Static Web Apps.

Nota

A integração com o Azure Functions 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 um aplicativo de função ao seu aplicativo Web estático, você precisa ter um recurso existente do Azure Functions e um aplicativo Web estático.

Recurso Descrição
Funções do Azure Se ainda não tiver um, siga os passos no guia Introdução ao Azure Functions .
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 um aplicativo existente do Azure Functions que exponha um ponto de extremidade por meio do seguinte local.

https://my-functions-app.azurewebsites.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 de ponto de extremidade apontam para a mesma função. O ponto de extremidade no aplicativo de função 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.

Remover funções gerenciadas do recurso Static Web Apps (se houver)

Antes de associar um aplicativo Functions existente, primeiro você precisa ajustar a configuração do seu aplicativo Web estático para remover funções gerenciadas, se tiver alguma.

  1. Defina api_location o valor como uma cadeia de caracteres vazia ("") no arquivo de configuração do fluxo de trabalho.

  1. Abra sua instância de Aplicativos Web estáticos no portal do Azure.

  2. No menu Configurações, selecione APIs.

  3. Na linha Produção, selecione Link para abrir a janela Vincular novo back-end.

    Introduza as seguintes definições.

    Definição Valor
    Tipo de recurso de back-end Selecione Aplicativo de função.
    Subscrição Selecione o nome da sua assinatura do Azure.
    Nome do recurso Selecione o nome do aplicativo Azure Functions.
    Ranhura de back-end Selecione o nome do slot para a Função do Azure.

  4. Selecionar Ligação.

O aplicativo Azure Functions agora está mapeado para a /api rota do seu aplicativo Web estático.

Importante

Certifique-se de definir o api_location valor como uma cadeia de caracteres vazia ("") no arquivo de configuração do fluxo de trabalho antes de vincular um aplicativo Functions existente. Além disso, as chamadas pressupõem que o aplicativo de função externa mantém o prefixo de rota padrão api . Muitas aplicações removem este prefixo no host.json. Verifique se o prefixo está no lugar na configuração, caso contrário, a chamada falhará.

Implementação

Você é responsável por configurar um fluxo de trabalho de implantação para seu aplicativo Azure Functions.

Para desvincular um aplicativo de função de 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 que você deseja desvincular e selecione o nome do aplicativo da função.

  4. 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 seu aplicativo Azure Functions.

Nota

Para evitar a exposição acidental do seu aplicativo de função ao tráfego anônimo, o provedor de identidade criado pelo processo de vinculação não é excluído automaticamente. Você pode excluir o provedor de identidade chamado Aplicativos Web Estáticos do Azure (Vinculado) das configurações de autenticação do aplicativo de função.

Remover autenticação do recurso Azure Functions

Para permitir que seu aplicativo Azure Functions receba tráfego anônimo, siga estas etapas para remover o provedor de identidade:

  1. No portal do Azure, navegue até o recurso Azure Functions.

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

  3. Na lista de provedores de identidade, exclua o provedor de identidade relacionado ao recurso Static Web Apps.

  4. Selecione Remover autenticação para remover a autenticação e permitir tráfego anônimo para seu recurso do Azure Functions.

Seu aplicativo de função agora pode receber tráfego anônimo.

Restrições de segurança

  • Autenticação e autorização: se as políticas de autenticação e autorização ainda não estiverem configuradas no seu aplicativo Functions existente, o aplicativo Web estático terá acesso exclusivo à API. Para tornar seu aplicativo Functions acessível a outros aplicativos, adicione outro provedor de identidade ou altere as configurações de segurança para permitir acesso não autenticado.

    Nota

    Se você habilitar a autenticação e a autorização em seu aplicativo Functions vinculado, ele deverá usar o provedor de autorização e Autenticação do Serviço de Aplicativo do Azure versão 2.

  • Acessibilidade pública necessária: um aplicativo Functions existente não precisa aplicar as seguintes configurações de segurança.

    • Restringir o endereço IP da aplicação Funções.
    • Restringir o tráfego através de links privados ou pontos de extremidade de serviço.

  • Teclas de acesso à função: Se a sua função requer uma chave de acesso, então você deve fornecer a chave com chamadas do aplicativo estático para a API.

Restrições

  • Apenas um aplicativo do Azure Functions está disponível para um único aplicativo Web estático.
  • O api_location valor na configuração do fluxo de trabalho deve ser definido como uma cadeia de caracteres vazia.
  • Não há suporte em ambientes de solicitação pull de aplicativos Web estáticos.
  • Embora seu aplicativo Azure Functions possa responder a vários gatilhos, o aplicativo Web estático só pode acessar funções por meio de pontos de extremidade Http.

Próximos passos

Adicionar uma API