Tutorial: Configurar uma CDN para Aplicativos Web Estáticos do Azure

Pré-requisitos

• Microsoft.Cdn registrado.
• Domínio personalizado configurado para seu aplicativo Web estático com um tempo de vida (TTL) definido para menos de 48 horas.
• Uma aplicação implantada com Azure Static Web Apps que utiliza o plano de alojamento Padrão.

Habilite a computação de ponta de nível empresarial no recurso de Aplicações Web Estáticas

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 subscrição ativa. Crie uma conta gratuitamente
• Um site de Aplicativos Web Estáticos do Azure. Crie seu primeiro aplicativo Web estático
• Planos Azure Static Web Apps Standard e Azure Front Door Standard / Premium. Para obter mais informações, consulte Preços de aplicativos Web estáticos
• Considere o uso de borda de nível empresarial para carregamentos de página mais rápidos, segurança aprimorada e confiabilidade otimizada para aplicativos globais.

Criar uma porta de entrada do Azure

1. Inicie sessão no portal do Azure.

2. Na home page ou no menu do Azure, selecione + Criar um recurso. Pesquise por Front Door e perfis CDN, e em seguida, selecione Criar>Front Door e perfis CDN.

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

4. Na página Criar um perfil de Front Door, insira ou selecione as seguintes definições.

   Definição	Valor
   Subscrição	Selecione a subscrição do Azure.
   Grupo de recursos	Introduza um nome de grupo de recursos. Esse nome geralmente é o mesmo nome de grupo usado pelo seu aplicativo Web estático.
   Localização do grupo de recursos	Se você criar um novo grupo de recursos, insira o local mais próximo de você.
   Nome	Digite my-static-web-app-front-door.
   Escalão de serviço	selecione Standard.
   Nome do ponto final	Introduza um nome exclusivo para o anfitrião do serviço Front Door.
   Tipo de origem	Selecione Aplicativo Web estático.
   Nome do anfitrião de origem	Selecione o nome do host da sua aplicação Web estática na lista suspensa.
   Colocação em cache	Marque a caixa de seleção Ativar cache.
   Comportamento de cache de cadeias de consulta	Selecione Usar cadeia de caracteres de consulta
   Compressão	Selecione Ativar compactação
   Política de WAF	Selecione Criar nova ou selecione uma política existente do Web Application Firewall na lista suspensa se quiser habilitar esse recurso.

   Nota

   Ao criar um perfil do Azure Front Door, você deve selecionar uma origem da mesma assinatura na qual o Front Door foi criado.

5. Selecione Rever + criar e, em seguida, selecione Criar. O processo de criação pode levar alguns minutos para ser concluído.

6. Após a conclusão da implementação, selecione Ir para recurso.

7. Adicione uma condição.

Desativar cache para fluxo de trabalho de autenticação

Adicione as seguintes configurações para evitar que as políticas de cache do Front Door tentem armazenar em cache páginas relacionadas à autenticação e autorização.

Adicionar uma condição

1. A partir da sua Porta de Entrada, em Configurações, selecione Conjunto de regras.

2. Selecione Adicionar.

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

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

5. Selecione Adicionar uma condição.

6. Selecione Caminho da solicitação.

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

8. Selecione a ligação Editar acima da caixa de texto 'Valor'.

9. Introduza /.auth na caixa de texto e, em seguida, selecione Atualizar.

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

Adicionar uma ação

1. Selecione o menu suspenso Adicionar uma ação.

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

3. Selecione Desativado na lista suspensa Cache .

4. Selecione Guardar.

Associar regra a um ponto de extremidade

Agora que a regra foi criada, aplique-a a um endpoint da Front Door.

1. Da sua Porta de Entrada, 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 ID da porta da frente

Siga as etapas seguintes para copiar o identificador exclusivo da instância do Front Door.

1. Na sua 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 estática do aplicativo Web

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:

• Restrinja o tráfego para o seu site apenas através da Front Door
• Restrinja o tráfego para o seu site apenas a partir da instância do Front Door
• Definir quais domínios podem acessar seu site
• Desativar a cache para rotas seguras

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

1. Restrinja o tráfego para usar apenas 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 seu site, adicione a forwardingGateway seção .

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

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

   Em seguida, adicione o hostname do Azure Front Door (não o hostname das Aplicações Web Estáticas do Azure) à matriz allowedForwardedHosts. Se você tiver domínios personalizados configurados em sua instância do Front Door, também os inclua nesta lista.

   Neste exemplo, substitua my-sitename.azurefd.net pelo nome de host da Porta da Frente do Azure para seu site.

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

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

Com essa configuração, seu site não está mais disponível por meio do nome de host gerado *.azurestaticapps.net , mas exclusivamente por meio dos nomes de host configurados em sua 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 do Azure Static Web Apps. O Azure Front Door tem um processo separado para adicionar um domínio personalizado. Consulte 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 allowedForwardedHosts lista.

• Estatísticas de tráfego: por padrão, o Azure Front Door configura testes de integridade que podem afetar suas estatísticas de tráfego. Pode querer editar os valores padrão para as sondas de saúde.

• Servindo versões antigas: quando você implanta atualizações em arquivos existentes em seu aplicativo Web estático, o Azure Front Door pode continuar a fornecer versões mais antigas de seus arquivos até que seu tempo de vida expire. Purgar o cache da Azure Front Door nos percursos afetados para garantir que os ficheiros mais recentes sejam servidos.