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 o Azure CDN Standard dos perfis Microsoft (clássicos) para o Azure Front Door Standard ou Premium até 30 de setembro de 2027. Para obter mais informações, consulte Azure CDN Standard da aposentadoria (clássica) da Microsoft.
A CDN do Azure de Edgio será desativada em 4 de novembro de 2025. Você deve migrar sua carga de trabalho para o Azure Front Door antes dessa data para evitar a interrupção do serviço. Para obter mais informações, consulte CDN do Azure das Perguntas frequentes sobre aposentadoria do 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 ponto de extremidade 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:
Se não tiver uma subscrição do Azure, crie uma conta gratuita do Azure antes de começar.
Criar a aplicação Web
Para criar o aplicativo Web com o qual você trabalha, siga o início rápido em HTML estático na etapa Procurar até o aplicativo .
Inicie sessão no portal do Azure
Abra um navegador e entre no portal do Azure.
Otimização de aceleração de site dinâmico
Se quiser otimizar seu ponto de extremidade da rede de entrega de conteúdo para aceleração dinâmica de site (DSA), use o portal da rede de entrega de conteúdo para criar seu perfil e ponto de extremidade. Com otimização DSA, o desempenho das páginas web com o conteúdos dinâmicos foi 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. Para a CDN do Azure a partir de perfis Edgio , não é possível alterar a otimização de um ponto de extremidade de rede de entrega de conteúdo depois que ele for criado.
Criar um perfil de rede de entrega de conteúdo e um ponto de extremidade
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.
Na página Serviço de Aplicativo, na seção Configurações, selecione CDN do Azure de Rede>.
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.
| Definição | Valor sugerido | Description |
|---|---|---|
| perfil da 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 de rede de entrega de conteúdo com o mesmo nível de preço. |
| 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. |
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 ponto de extremidade 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 o Azure CDN Standard a partir de perfis Microsoft (clássicos), a propagação geralmente é concluída em 10 minutos.
- Para os perfis CDN Standard do Azure do Edgio e CDN Premium do Azure do Edgio , a propagação geralmente é concluída em 90 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
Navegue até um browser para o seguinte URL:
http://<endpointname>.azureedge.net/index.html
Será apresentada 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.
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).
Na lista de recursos, selecione o ponto de extremidade da rede de distribuição de conteúdo.
Na parte superior da página Ponto final, selecione Remover.
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 Limpar um ponto de extremidade da Rede de Entrega de Conteúdo do Azure.
Utilizar cadeias de consulta para o conteúdo da versão
A Rede de Entrega de Conteúdo do Azure oferece as seguintes opções de comportamento de cache:
- Ignorar cadeias de consulta
- Ignorar a colocação em 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
Na página Ponto Final CDN do portal do Azure, selecione Cache.
Selecione Armazenar em cache cada URL exclusivo na lista suspensa Comportamento de cache de cadeia de caracteres de consulta.
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 index.html atual e exibe a V3. No entanto, se você navegar até o ponto de extremidade da rede de entrega de conteúdo com a cadeia de caracteres de q=1 consulta, 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 caracteres de consulta.
Clean up resources (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 ponto de extremidade 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: