Tutorial: Adicionar a Rede de Entrega de Conteúdo do Azure a um aplicativo Web do Serviço de Aplicativo do Azure

Importante

O Azure CDN Standard da Microsoft (clássico) será desativado em 30 de setembro de 2027. Para evitar qualquer interrupção do serviço, é importante migrar seus perfis CDN Standard do Azure da Microsoft (clássicos) para a camada Azure Front Door Standard ou Premium até 30 de setembro de 2027. Para obter mais informações, consulte o fim de suporte do Azure CDN Standard (clássico) da Microsoft.

A CDN do Azure de Edgio foi descontinuada em 15 de janeiro de 2025. Para obter mais informações, consulte as Perguntas frequentes sobre a aposentadoria do Azure CDN da Edgio.

Este tutorial mostra como adicionar a Rede de Entrega de Conteúdo do Azure a um aplicativo Web no Serviço de Aplicativo do Azure. Aplicativos Web são serviços para hospedar aplicativos Web, APIs REST e back-ends móveis.

Aqui está a home page do exemplo de site HTML estático com o qual você trabalha:

O que você aprende:

• Crie um endpoint de rede de distribuição de conteúdo.
• Atualizar ativos em cache.
• Utilize cadeias de consulta para controlar versões em cache.

Pré-requisitos

Para concluir este tutorial:

• Instale o Git.
• Instalar a CLI do Azure

Se não tiver uma conta do Azure, crie uma conta gratuita antes de começar.

Criar a aplicação Web

Para criar a aplicação web com a qual trabalha, siga o início rápido de HTML estático até ao passo Navegar até à aplicação.

Inicie sessão no portal do Azure

Abra um navegador e entre no portal do Azure.

Otimização da aceleração de sites dinâmicos

Se pretender otimizar o endpoint da rede de entrega de conteúdo para aceleração dinâmica de sites (DSA), deverá usar o portal da rede de entrega de conteúdo para criar o seu perfil e endpoint. Com otimização DSA, o desempenho das páginas web com conteúdo dinâmico é consideravelmente melhorado. Para obter instruções sobre como otimizar um ponto de extremidade de rede de entrega de conteúdo para DSA a partir do portal de rede de entrega de conteúdo, consulte Configuração de ponto de extremidade de rede de entrega de conteúdo para acelerar a entrega de arquivos dinâmicos. Caso contrário, se não quiser otimizar o seu novo ponto final, pode utilizar o portal da aplicação Web para criá-lo ao seguir os passos da próxima secção.

Crie um perfil de rede de distribuição de conteúdos e um ponto de extremidade

1. No painel de navegação esquerdo, selecione Serviço de Aplicações e, em seguida, selecione a aplicação que criou no início rápido HTML estático.

2. Na página Serviço de Aplicativo, na seção Configurações, selecione Networking > Azure CDN.

   

3. Na página Azure Content Delivery Network(Rede de Entrega de Conteúdos do Azure), indique as definições Novo ponto final conforme especificado na tabela.

   Configuração	Valor sugerido	Descrição
   perfil da rede de distribuição de conteúdo	MeuPerfilCDN	Um perfil de rede de distribuição de conteúdo é um conjunto de pontos de extremidade de rede de distribuição de conteúdo com a mesma camada de preços.
   Escalão de preço	Rede de distribuição de conteúdo da Microsoft (clássica)	O escalão de preço especifica o fornecedor e as funcionalidades disponíveis.
   Nome do ponto de extremidade da rede de entrega de conteúdo	Qualquer nome que é exclusivo no domínio azureedge.net	Aceda aos seus recursos em cache no domínio <endpointname>.azureedge.net.

4. Selecione Criar para criar um perfil de rede de distribuição de conteúdo. O Azure cria o perfil e o ponto final. O novo ponto final é apresentado na lista Pontos finais e, quando está aprovisionado, o estado é A executar.

   

Testar o endpoint da rede de entrega de conteúdo

Dado que a propagação do registo demora algum tempo, o ponto final não está imediatamente disponível para utilização. Para perfis do Azure CDN Standard da Microsoft (clássico), a propagação geralmente é concluída em 10 minutos.

A aplicação de exemplo tem um ficheiro index.html e pastas css, img e js que contêm outros elementos estáticos. Os caminhos de conteúdo para todos esses arquivos são os mesmos no ponto de extremidade da rede de entrega de conteúdo. Por exemplo, ambos os seguintes URLs acedem ao ficheiro bootstrap.css na pasta css:

http://<appname>.azurewebsites.net/css/bootstrap.css

http://<endpointname>.azureedge.net/css/bootstrap.css

Abra um navegador e aceda ao seguinte URL:

http://<endpointname>.azureedge.net/index.html

Vê a mesma página que executou anteriormente numa aplicação web do Azure. A Rede de Entrega de Conteúdo do Azure recuperou os ativos do aplicativo Web de origem e está servindo-os do ponto de extremidade da rede de entrega de conteúdo

Para garantir que essa página seja 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 Entrega de Conteúdo do Azure, consulte Introdução à Rede de Entrega de Conteúdo do Azure.

Limpar a rede de distribuição de conteúdo

A rede de entrega de conteúdo atualiza periodicamente seus recursos do aplicativo Web de origem com base na configuração de tempo de vida (TTL). O TTL predefinido é de sete dias.

Às vezes, talvez seja necessário atualizar a rede de entrega de conteúdo antes da expiração do TTL; Por exemplo, quando você implanta conteúdo atualizado no aplicativo Web. Para acionar 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 entrega de conteúdo para acionar a rede de entrega de conteúdo para atualizar seu cache.

Implementar uma alteração na aplicação Web

Abra o ficheiro index.html e adicione -V2 ao cabeçalho H1, conforme mostrado no seguinte exemplo:

<h1>Azure App Service - Sample Static HTML Site - V2</h1>

Consolide as alterações e implemente-as na aplicação Web.

git commit -am "version 2"
git push azure main

Depois de concluída a implementação, navegue para o URL da aplicação Web para ver a alteração.

http://<appname>.azurewebsites.net/index.html

Se você navegar até a URL do ponto de extremidade da rede de entrega de conteúdo da página inicial, não verá as alterações porque a versão armazenada em cache na rede de entrega 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 acionar a rede de distribuição de conteúdo para atualizar sua versão em cache, limpe a rede de entrega de conteúdo.

1. Na navegação à esquerda do portal, selecione Grupos de recursos e, em seguida, selecione o grupo de recursos que criou a sua aplicação Web (myResourceGroup).

2. Na lista de recursos, selecione o ponto de extremidade da rede de distribuição de conteúdo.

3. Na parte superior da página Ponto final, selecione Remover.

   

4. Introduza os caminhos do conteúdo que quer remover. Pode transmitir um caminho de ficheiro completo para remover um ficheiro individual ou um segmento de caminho para remover e atualizar todo o conteúdo numa pasta. Como alterou o index.html, certifique-se de que está num dos caminhos. Na parte inferior da página, selecione Remover.

   

Verifique se a rede de distribuição de conteúdo está atualizada

Aguarde até que o pedido de remoção conclua o processamento, que demora normalmente alguns minutos. Para ver o estado atual, selecione o ícone da campainha na parte superior da página.

Quando você navega para a URL do ponto de extremidade da rede de entrega de conteúdo para index.html, você vê a V2 que você adicionou ao título na página inicial, o que indica que o cache da rede de entrega de conteúdo foi atualizado.

http://<endpointname>.azureedge.net/index.html

Para obter mais informações, consulte como Eliminar um ponto de extremidade da Rede de Entrega de Conteúdo do Azure.

Utilizar cadeias de consulta para versionar o conteúdo

A Rede de Entrega de Conteúdo do Azure oferece as seguintes opções de comportamento de cache:

• Ignorar cadeias de caracteres de consulta
• Ignorar o cache de cadeias de consulta
• Colocar em cache todos os URLs exclusivos

A primeira opção é o padrão, o que significa que há apenas uma versão em cache de um ativo, independentemente da cadeia de caracteres de consulta na URL.

Nesta secção do tutorial, pode alterar o comportamento de colocação em cache para colocar em cache todos os URL exclusivos.

Alterar o comportamento de cache

1. Na página Ponto Final CDN do portal do Azure, selecione Cache.

2. Selecione Armazenar em cache cada URL exclusivo na lista suspensa Comportamento de armazenamento em cache de cadeia de consulta.

3. Selecione Guardar.

   

Certifique-se de que os URL exclusivos são colocados em cache em separado

Em um navegador, navegue até a página inicial no ponto de extremidade da rede de entrega de conteúdo e inclua uma cadeia de caracteres de consulta:

http://<endpointname>.azureedge.net/index.html?q=1

A Rede de Entrega de Conteúdo do Azure retorna o conteúdo atual do aplicativo Web, que inclui V2 no cabeçalho.

Para garantir que essa página seja armazenada em cache na rede de distribuição de conteúdo, atualize a página.

Abra index.html, altere V2 para V3 e, em seguida, implemente a alteração.

git commit -am "version 3"
git push azure main

Em um navegador, vá para a URL do ponto de extremidade da rede de entrega de conteúdo com uma nova cadeia de caracteres de consulta, como q=2. A Rede de Entrega de Conteúdo do Azure obtém o arquivo atual index.html e exibe V3. No entanto, se navegar para o endpoint da rede de entrega de conteúdo com a string de consulta q=1, verá V2.

http://<endpointname>.azureedge.net/index.html?q=2

http://<endpointname>.azureedge.net/index.html?q=1

Este resultado mostra que cada cadeia de consulta é tratada de forma diferente:

• q=1 foi utilizado antes, pelo que os conteúdos armazenados em cache são devolvidos (V2).
• q=2 é novo, pelo que os conteúdos mais recentes da aplicação Web são obtidos e devolvidos (V3).

Para obter mais informações, consulte Controlar o comportamento de cache da Rede de Entrega de Conteúdo do Azure com cadeias de consulta.

Limpar recursos

Nos passos anteriores, criou os recursos do Azure num grupo de recursos. Se achar que não vai precisar destes recursos no futuro, execute o seguinte comando no Cloud Shell para eliminar o grupo de recursos:

az group delete --name myResourceGroup

Este comando pode demorar alguns minutos a ser executado.

Próximos passos

O que aprendeu:

• Crie um endpoint de rede de distribuição de conteúdo.
• Atualizar ativos em cache.
• Utilize cadeias de consulta para controlar versões em cache.

Saiba como otimizar o desempenho da rede de distribuição de conteúdo nos seguintes artigos:

Tutorial: Otimizar a Rede de Entrega de Conteúdo do Azure para o tipo de entrega de conteúdo.