Tutorial: Configurar o Azure Front Door para Aplicativos Web Estáticos do Azure

Ao adicionar o Azure Front Door como a CDN para seu aplicativo Web estático, você se beneficia de um ponto de entrada seguro para entrega rápida de seus aplicativos Web.

Com os Aplicativos Web Estáticos, você tem duas opções para integrar ao Azure Front Door. Você pode adicionar o Azure Front Door ao seu aplicativo Web estático habilitando a borda de nível empresarial, uma integração gerenciada do Azure Front Door com Aplicativos Web Estáticos. Como alternativa, você pode configurar um recurso do Azure Front Door manualmente na frente do seu aplicativo Web estático.

Considere as vantagens abaixo para determinar qual opção melhor se adapta às suas necessidades.

A borda de nível empresarial oferece:

• Nenhuma alteração de configuração
• Nenhum tempo de inatividade
• Gerenciamento automático de certificações SSL e domínios personalizados

Uma configuração manual do Azure Front Door oferece controle total sobre a configuração da CDN, incluindo a chance de:

• Limitar a origem do tráfego por origem
• Adicionar um firewall de aplicativo Web (WAF)
• Rotear entre vários aplicativos
• Usar recursos mais avançados do Azure Front Door

Neste tutorial, você aprenderá a adicionar o Azure Front Door ao seu aplicativo Web estático.

Pré-requisitos

• Domínio personalizado configurado para seu aplicativo Web estático com um TTL (tempo de vida) definido como menos de 48 horas.
• Um aplicativo implantado com Aplicativos Web Estáticos do Azure que usa o plano de hospedagem Standard.

Habilitar borda de nível empresarial no recurso Aplicativos Web Estáticos

Portal do Azure

1. Vá para o seu aplicativo Web estático no portal do Azure.

2. No menu esquerdo, selecione Borda de nível empresarial.

3. Marque a caixa rotulada Habilitar borda de nível empresarial.

4. Selecione Salvar.

5. Selecione OK para confirmar o salvamento.

   A habilitação desse recurso incorre em custos extras.

CLI do Azure

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Crie uma conta gratuitamente
• Um site de Aplicativos Web Estáticos do Azure. Crie seu primeiro aplicativo Web estático
• Aplicativos Web Estáticos do Azure Planos Standard e Azure Front Door Standard / Premium. Para obter mais informações, consulte Preços de aplicativos Web estáticos
• Considere usar a borda de nível corporativo para obter carregamentos de página mais rápidos, segurança aprimorada e confiabilidade otimizada em aplicativos globais.

Criar um Azure Front Door

1. Entre no portal do Azure.

2. Na home page ou no menu do Azure, selecione+ Criar um recurso. Procure perfis de porta frontal e CDN e, em seguida, selecione Criar>perfis de porta frontal e CDN.

3. Na página Comparar ofertas, selecione Criação rápida e, em seguida, selecione Continuar para criar uma porta de entrada.

4. Na página Criar um perfil de porta de entrada, insira ou selecione as configurações a seguir.

   Configuração	Valor
   Subscription	Selecione sua assinatura do Azure.
   Resource group	Insira um nome de grupo de recursos. Esse nome geralmente é o mesmo nome de grupo usado pelo aplicativo Web estático.
   Localização do grupo de recursos	Se você criar um grupo de recursos, insira a localização mais próxima de você.
   Nome	Insira my-static-web-app-front-door.
   Camada	Selecione Padrão.
   Nome do ponto de extremidade	Insira um nome exclusivo para o host do Front Door.
   Tipo de origem	Selecione Aplicativo Web Estático.
   Nome do host de origem	Selecionar o nome do host do aplicativo Web estático na lista suspensa.
   Cache	Marque a caixa de seleção Habilitar Cache.
   Comportamento de cache da cadeia de caracteres de consulta	Selecionar Usar Cadeia de Consulta
   Compactação	Selecionar Habilitar compactação
   Política do WAF	Selecione Criar novo ou selecione uma política do Firewall de Aplicativo Web existente no menu suspenso se quiser habilitar esse recurso.

   Observação

   Ao criar um perfil do Azure Front Door, você deve selecionar uma origem da mesma assinatura em que o Front Door é criado.

5. Selecione Examinar + Criar e, em seguida, selecione Criar. A conclusão do processo de criação pode levar alguns minutos.

6. Quando a implantação for concluída, selecione Ir para o recurso.

7. Adicione uma condição.

Desabilitar cache para o fluxo de trabalho de autenticação

Observação

A expiração do cache, a cadeia de caracteres de consulta de chave de cache e as ações de substituição do grupo de origem são preteridas. Essas ações ainda podem funcionar normalmente, mas o conjunto de regras não pode ser alterado. Substitua por novas ações de substituição de configuração de rota antes de alterar o conjunto de regras.

Adicione as seguintes configurações para desabilitar as políticas de cache do front door, da tentativa de armazenar em cache as páginas relacionadas à autenticação e autorização.

Adicionar uma condição

1. Na porta da frente, em Configurações, selecione Conjunto de regras.

2. Selecione Adicionar.

3. Na caixa de texto Nome do conjunto de regras, digite Segurança.

4. Na caixa de texto Nome da regra, insira NoCacheAuthRequests.

5. Selecione Adicionar uma condição.

6. Selecione Solicitar caminho.

7. Selecione a lista suspensa Operador e, em seguida , Começa com.

8. Selecione o link Editar acima do Valor caixa de texto.

9. Digite /.auth na caixa de texto e selecione Atualizar.

10. Não selecione nenhuma opção na lista suspensa Transformação de cadeia de caracteres.

Adicionar uma ação

1. Selecione a lista suspensa Adicionar uma ação.

2. Selecione Substituição de configuração de rota.

3. Selecione Desabilitado na lista suspensa do Cache.

4. Selecione Salvar.

Associar regra a um ponto de extremidade

Agora que a regra foi criada, aplique-a a um ponto de extremidade do Front Door.

1. Na porta da frente, selecione Conjunto de regras e, em seguida, o link Não associado .

   

2. Selecione o nome do ponto de extremidade ao qual você deseja aplicar a regra de cache e selecione Avançar.

3. Selecione Associar.

   

Copiar a ID do Front Door

Use as etapas a seguir para copiar o identificador exclusivo da instância de porta frontal.

1. Na porta da frente, selecione o link Visão geral na navegação à esquerda.

2. Copie o valor rotulado Front Door ID e cole-o em um arquivo para uso posterior.

   

Atualizar a configuração do aplicativo Web estático

Para concluir a integração com o Front Door, você precisa atualizar o arquivo de configuração do aplicativo para executar as seguintes funções:

• Restringir o tráfego ao site somente por meio do Front Door
• Restringir o tráfego ao site somente da instância do Front Door
• Definir quais domínios podem acessar o site
• Desabilitar o cache para rotas seguras

Abra o arquivo staticwebapp.config.json do site e faça as alterações a seguir.

1. Restrinja o tráfego para usar o Front Door adicionando a seguinte seção ao arquivo de configuração:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Para definir quais instâncias e domínios do Azure Front Door podem acessar o site, adicione a seção forwardingGateway.

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   Primeiro, configure o aplicativo para permitir apenas o tráfego da instância do Front Door. Em cada solicitação de back-end, o Front Door adiciona automaticamente um cabeçalho X-Azure-FDID que contém a ID da instância do Front Door. Ao configurar o aplicativo Web estático para exigir esse cabeçalho, ele restringe o tráfego exclusivamente à instância do Front Door. Na seção forwardingGateway no arquivo de configuração, adicione a seção requiredHeaders e defina o cabeçalho X-Azure-FDID. Substitua <YOUR-FRONT-DOOR-ID> pela ID do Front Door que já foi copiada.

   Depois, adicione o nome do host do Azure Front Door (não o nome do host dos Aplicativos Web Estáticos do Azure) à matriz allowedForwardedHosts. Se você tiver domínios personalizados configurados na instância do Front Door, inclua-os também nessa lista.

   Neste exemplo, substitua my-sitename.azurefd.net pelo nome do host do Azure Front Door do site.

3. Para todas as rotas seguras em seu aplicativo, desabilite o cache do Azure Front Door adicionando "Cache-Control": "no-store" à definição do cabeçalho de rota.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

Com essa configuração, o site não está mais disponível por meio do nome do host *.azurestaticapps.net gerado, mas exclusivamente por meio dos nomes de host configurados na instância do Front Door.

Considerações

• Domínios personalizados: agora que o Front Door está gerenciando seu site, você não usa mais o recurso de domínio personalizado dos Aplicativos Web Estáticos do Azure. O Azure Front Door tem um processo separado para adicionar um domínio personalizado. Confira Adicionar um domínio personalizado ao Front Door. Ao adicionar um domínio personalizado ao Front Door, você precisará atualizar o arquivo de configuração do aplicativo Web estático para incluí-lo na lista allowedForwardedHosts.

• Estatísticas de tráfego: por padrão, o Azure Front Door configura Investigações de integridade que podem afetar as estatísticas de tráfego. É possível editar os valores padrão das Investigações de integridade.

• Servindo versões anteriores : quando você implanta atualizações em arquivos existentes no aplicativo Web estático, o Azure Front Door pode continuar a atender a versões mais antigas dos arquivos até que a vida útil delas expire. Limpe o cache do Azure Front Door dos caminhos afetados para garantir que os arquivos mais recentes sejam atendidos.

Limpar os recursos

Se você não quiser mais usar os recursos criados neste tutorial, exclua os Aplicativos Web Estáticos do Azure e as instâncias do Azure Front Door.

Próximas etapas

Adicionar uma API