Tutorial: adicionar uma Rede de Distribuição de Conteúdo do Microsoft Azure a um aplicativo web do Serviço de Aplicativo do Azure
Importante
A CDN do Azure Standard (clássica) será desativada em 30 de setembro de 2027. Para evitar qualquer interrupção de serviço, é importante migrar seus perfis da CDN do Azure Standard (clássica) para a camada Azure Front Door Standard ou Premium até 30 de setembro de 2027. Para obter mais informações, confira CDN do Azure Standard (clássica).
O CDN do Azure da Edgio será desativado em 4 de novembro de 2025. Você deve migrar sua carga de trabalho para o Azure Front Door antes desta data para evitar interrupção do serviço.. Para obter mais informações, veja Perguntas frequentes sobre a aposentadoria do CDN do Azure da Edgeo.
Este tutorial mostra como adicionar a Rede de Distribuição de Conteúdo do Microsoft Azure a um aplicativo web no Serviço de Aplicativo do Azure. Aplicativos Web são serviços para hospedagem de aplicativos Web, APIs REST e back-ends móveis.
Segue a página inicial do site de exemplo estático em HTML com o qual você trabalha:
O que você aprende:
- Criar um ponto de extremidade de rede de distribuição de conteúdo.
- Atualizar ativos em cache.
- Usar cadeias de caracteres de consulta para controlar versões armazenadas em cache.
Pré-requisitos
Para concluir este tutorial:
Caso você não tenha uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.
Criar o aplicativo Web
Para criar o aplicativo Web com o qual você trabalha, execute o Início rápido do HTML estático na etapa Navegar até o aplicativo.
Entre no Portal do Azure
Abra um navegador e entre no portal do Azure.
Otimização de aceleração de site dinâmico
Se você quiser otimizar seu ponto de extremidade da rede de distribuição de conteúdo para aceleração de site dinâmico (DSA), use o portal da rede de distribuição de conteúdo para criar seu perfil e ponto de extremidade. Com a otimização de DSA da CDN do Azure, o desempenho de páginas da Web com conteúdo dinâmico é melhorado de maneira significativa. Para obter instruções sobre como otimizar um ponto de extremidade da rede de distribuição de conteúdo para DSA no portal da rede de distribuição de conteúdo, consulte Configuração do ponto de extremidade da rede de distribuição de conteúdo para acelerar a entrega de arquivos dinâmicos. Caso contrário, se você não quiser otimizar seu novo ponto de extremidade, use o portal da Web do aplicativo para criá-lo usando as etapas da próxima seção. Para perfis da CDN do Azure da Edgio, não é possível alterar a otimização de um ponto de extremidade da rede de distribuição de conteúdo depois que ele foi criado.
Criar um ponto de extremidade e um perfil de rede de distribuição de conteúdo
No painel de navegação esquerdo, selecione Serviços de aplicativos e, em seguida, selecione o aplicativo que você criou no Início rápido do HTML estático.
Na página Serviço de aplicativo, na seção Configurações, selecione Rede > da CDN do Azure.
Na página da Rede de distribuição de conteúdo do Azure, forneça as configurações do ponto de extremidade novo conforme especificado na tabela.
| Configuração | Valor sugerido | Descrição |
|---|---|---|
| perfil de rede de distribuição de conteúdo | myCDNProfile | Um perfil de rede de distribuição de conteúdo é uma coleção de pontos de extremidade da rede de distribuição de conteúdo com o mesmo tipo de preço. |
| Tipo de preços | Rede de distribuição de conteúdo da Microsoft (clássica) | O tipo de preços especifica o provedor e os recursos disponíveis. |
| nome do ponto de extremidade da rede de distribuição de conteúdo | Qualquer nome que seja exclusivo no domínio azureedge.net | Acesse os recursos armazenados em cache no domínio <endpointname> .azureedge.net. |
Selecione Criar para criar um perfil de rede de distribuição de conteúdo.
O Azure cria o perfil e o ponto de extremidade. O novo ponto de extremidade aparece na lista de pontos de extremidade e, quando ele for provisionado, o status será Executando.
Testar o ponto de extremidade da rede de distribuição de conteúdo
Como o registro demora um pouco para se propagar, o ponto de extremidade não fica imediatamente disponível para uso:
- Para perfis da CDN Standard do Azure da Microsoft (clássica), a propagação geralmente é concluída em dez minutos.
- Para perfis da CDN do Azure Standard da Edgio e CDN do Azure Premium da Edgio, a propagação geralmente termina em 90 minutos.
O aplicativo de exemplo possui um arquivo index.html e as pastas css, img e js que contêm outros ativos estáticos. Os caminhos de conteúdo para todos esses arquivos são os mesmos no ponto de extremidade da rede de distribuição de conteúdo. Por exemplo, as duas URLs a seguir acessam o arquivo bootstrap.css na pasta css:
http://<appname>.azurewebsites.net/css/bootstrap.css
http://<endpointname>.azureedge.net/css/bootstrap.css
Navegue em um navegador até a URL abaixo:
http://<endpointname>.azureedge.net/index.html
Consulte a mesma página que você executou anteriormente em um aplicativo Web do Azure. A Rede de Distribuição de Conteúdo do Microsoft Azure recuperou os ativos do aplicativo web de origem e está fornecendo-os do ponto de extremidade da rede de distribuição de conteúdo
Para garantir que essa página está armazenada em cache na rede de distribuição de conteúdo, atualize a página. Às vezes, duas solicitações para o mesmo ativo são necessárias para que a rede de distribuição de conteúdo armazene em cache o conteúdo solicitado.
Para obter mais informações sobre como criar perfis e pontos de extremidade da Rede de Distribuição de Conteúdo do Microsoft Azure, consulte Introdução à Rede de Distribuição de Conteúdo do Microsoft Azure.
Limpar a rede de distribuição de conteúdo
A rede de distribuição de conteúdo atualiza periodicamente seus recursos do aplicativo web de origem com base na configuração de tempo de vida (TTL). A TTL padrão é de sete dias.
Às vezes, será necessário atualizar a rede de distribuição de conteúdo antes da expiração do TTL. Por exemplo, quando você implanta o conteúdo atualizado no aplicativo web. Para disparar uma atualização, limpe manualmente os recursos da rede de distribuição de conteúdo.
Nesta seção do tutorial, você implanta uma alteração no aplicativo web e limpa a rede de distribuição de conteúdo para dispará-la para atualizar seu cache.
Implantar uma alteração no aplicativo web
Abra o arquivo index.html e adicione - V2 para o título H1, conforme mostrado no exemplo a seguir:
<h1>Azure App Service - Sample Static HTML Site - V2</h1>
Confirme as alterações para implantá-las no aplicativo web.
git commit -am "version 2"
git push azure main
Depois de concluir a implantação, navegue até a URL do aplicativo web e confira a alteração.
http://<appname>.azurewebsites.net/index.html
Caso navegue até a URL do ponto de extremidade da rede de distribuição de conteúdo para a página inicial, você não verá as alterações porque a versão armazenada em cache na rede de distribuição de conteúdo ainda não expirou.
http://<endpointname>.azureedge.net/index.html
Limpar a rede de distribuição de conteúdo no portal
Para disparar a rede de distribuição de conteúdo para atualizar sua versão armazenada em cache, limpe a rede de distribuição de conteúdo.
Na navegação à esquerda do portal, selecione Grupos de recursos e, em seguida, selecione o grupo de recursos que você criou para seu aplicativo web (myResourceGroup).
Na lista de recursos, selecione o ponto de extremidade da rede de distribuição de conteúdo.
Na parte superior da página Ponto de extremidade, selecione Limpar.
Digite os caminhos de conteúdo que você deseja limpar. Você pode passar um caminho de arquivo completo para limpar um arquivo específico ou um segmento de caminho para limpar e atualizar o conteúdo de uma pasta. Como você alterou index.html, certifique-se de que está em um dos caminhos.
Na parte inferior da página, selecione Limpar.
Verifique se a rede de distribuição de conteúdo está atualizada
Aguarde até que a solicitação de limpeza conclua o processamento, que normalmente é de alguns minutos. Para conferir o status atual, selecione o ícone de sino na parte superior da página.
Ao navegar para a URL do ponto de extremidade da rede de distribuição de conteúdo para index.html, você verá o V2 adicionado ao título na página inicial, que indica que o cache da rede de distribuição de conteúdo foi atualizado.
http://<endpointname>.azureedge.net/index.html
Para obter mais informações, confira Limpar um ponto de extremidade da Rede de Distribuição de Conteúdo do Microsoft Azure.
Use cadeias de caracteres de consulta para o conteúdo da versão
A Rede de Distribuição de Conteúdo do Microsoft Azure oferece as seguintes opções de comportamento de cache:
- Ignorar as cadeias de caracteres de consulta
- Ignorar o cache para cadeias de caracteres de consulta
- Armazenar em cache todas as URLs exclusivas
A primeira opção é a padrão, o que significa que há apenas uma versão em cache de um ativo, independentemente da cadeia de caracteres de consulta no URL.
Nesta seção do tutorial, você deve alterar o comportamento do armazenamento em cache para armazenar em cache todas as URLs exclusivas.
Alterar o comportamento do armazenamento em cache
Na página do ponto de extremidade do CDN do portal do Azure, selecione Cache.
Selecione Armazenar em cache todas as URLs exclusivas na lista suspensa Comportamento do armazenamento de cache da cadeia de caracteres de consulta.
Selecione Salvar.
Verifique se as URLs exclusivas são armazenadas em cache separadamente
Em um navegador, acesse a página inicial no ponto de extremidade da rede de distribuição de conteúdo e inclua uma cadeia de caracteres de consulta:
http://<endpointname>.azureedge.net/index.html?q=1
A Rede de Distribuição de Conteúdo do Microsoft Azure retorna o conteúdo do aplicativo web atual, que inclui V2 no título.
Para garantir que essa página está armazenada em cache na rede de distribuição de conteúdo, atualize a página.
Abra index.html, altere V2 para V3, em seguida, implante a alteração.
git commit -am "version 3"
git push azure main
Em um navegador, acesse a URL do ponto de extremidade da rede de distribuição de conteúdo com uma nova cadeia de caracteres de consulta, como q=2. A Rede de Distribuição de Conteúdo do Microsoft Azure obtém o arquivo index.html atual e exibe V3. Contudo, se você navegar até o ponto de extremidade da rede de distribuição de conteúdo com a cadeia de caracteres de consulta q=1, você verá V2.
http://<endpointname>.azureedge.net/index.html?q=2
http://<endpointname>.azureedge.net/index.html?q=1
A saída mostra que cada cadeia de caracteres de consulta é tratada de maneira diferente:
- p = 1 foi usada antes e, portanto, o conteúdo em cache é retornado (V2).
- p = 2 é novo e, portanto, o conteúdo do aplicativo Web mais recente é recuperado e retornado (V3).
Para obter mais informações, consulte Controlar o comportamento de cache da Rede de Distribuição de Conteúdo do Azure com cadeias de caracteres de consulta.
Limpar os recursos
Nas etapas anteriores, você criou os recursos do Azure em um grupo de recursos. Se você acha que não precisará desses recursos no futuro, exclua o grupo de recursos executando o seguinte comando no Cloud Shell:
az group delete --name myResourceGroup
Esse comando pode demorar um pouco para ser executado.
Próximas etapas
O que você aprendeu:
- Criar um ponto de extremidade de rede de distribuição de conteúdo.
- Atualizar ativos em cache.
- Usar cadeias de caracteres de consulta para controlar versões armazenadas em cache.
Aprenda a otimizar o desempenho da rede de distribuição de conteúdo nos seguintes artigos: