Tutorial: adicionar uma Rede de Distribuição de Conteúdo do Microsoft Azure a um aplicativo web do Serviço de Aplicativo do Azure

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:

Pré-requisitos

Para concluir este tutorial:

• Instalar o Git
• Instalar a CLI do Azure

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.

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:

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