Tutorial: Adicionar a CDN do Azure a uma aplicação Web do Serviço de Aplicações do AzureTutorial: Add Azure CDN to an Azure App Service web app

Este tutorial mostra como adicionar a Rede de Entrega de Conteúdo (CDN) do Azure a uma aplicação Web no Serviço de Aplicações do Azure.This tutorial shows how to add Azure Content Delivery Network (CDN) to a web app in Azure App Service. As Aplicações Web são um serviço para o alojamento de aplicações Web, APIs REST e back-ends móveis.Web apps is a service for hosting web applications, REST APIs, and mobile back ends.

Segue a home page do site HTML estático de exemplo com que irá trabalhar:Here's the home page of the sample static HTML site that you'll work with:

Home page da aplicação de exemplo

O que irá aprender:What you'll learn:

  • Criar um ponto final da CDN.Create a CDN endpoint.
  • Atualizar ativos em cache.Refresh cached assets.
  • Utilize cadeias de consulta para controlar versões em cache.Use query strings to control cached versions.

Pré-requisitosPrerequisites

Para concluir este tutorial:To complete this tutorial:

Se não tiver uma subscrição do Azure, crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Criar a aplicação WebCreate the web app

Para criar a aplicação Web com que irá trabalhar, siga o início rápido HTML estático, através do passo Navegar para a aplicação.To create the web app that you'll work with, follow the static HTML quickstart through the Browse to the app step.

Iniciar sessão no portal do AzureLog in to the Azure portal

Abra um browser e navegue para o portal do Azure.Open a browser and navigate to the Azure portal.

Otimização de aceleração de site dinâmicoDynamic site acceleration optimization

Se quiser otimizar o seu ponto final de CDN para a aceleração de site dinâmica (DSA), deve utilizar o portal da CDN para criar o seu perfil e o ponto final.If you want to optimize your CDN endpoint for dynamic site acceleration (DSA), you should use the CDN portal to create your profile and endpoint. Com otimização DSA, o desempenho das páginas web com o conteúdos dinâmicos foi consideravelmente melhorado.With DSA optimization, the performance of web pages with dynamic content is measurably improved. Para obter instruções sobre como otimizar um ponto final de CDN para DSA a partir do portal de CDN, veja Configuração do ponto final de CDN para acelerar a entrega de ficheiros dinâmicos.For instructions about how to optimize a CDN endpoint for DSA from the CDN portal, see CDN endpoint configuration to accelerate delivery of dynamic files. 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.Otherwise, if you don't want to optimize your new endpoint, you can use the web app portal to create it by following the steps in the next section. Note que para os perfis de CDN do Azure da Verizon, não pode alterar a otimização de um ponto final de CDN após ter sido criado.Note that for Azure CDN from Verizon profiles, you cannot change the optimization of a CDN endpoint after it has been created.

Criar um perfil da CDN e ponto finalCreate a CDN profile and endpoint

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.In the left navigation, select App Services, and then select the app that you created in the static HTML quickstart.

Selecione a aplicação de Serviço de Aplicações no portal

Na página Serviço de Aplicações, na secção Definições, selecione Redes > Configurar a CDN do Azure para a sua aplicação.In the App Service page, in the Settings section, select Networking > Configure Azure CDN for your app.

Selecione a CDN no portal

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.In the Azure Content Delivery Network page, provide the New endpoint settings as specified in the table.

Criar perfil e ponto final no portal

DefiniçãoSetting Valor sugeridoSuggested value DescriçãoDescription
Perfil da CDNCDN profile myCDNProfilemyCDNProfile Um perfil da CDN é uma coleção de pontos finais da CDN com o mesmo escalão de preços.A CDN profile is a collection of CDN endpoints with the same pricing tier.
Nível de preçosPricing tier Standard da AkamaiStandard Akamai O escalão de preço especifica o fornecedor e as funcionalidades disponíveis.The pricing tier specifies the provider and available features. Este tutorial utiliza o Standard da Akamai.This tutorial uses Standard Akamai.
Nome do ponto final da CDNCDN endpoint name Qualquer nome que é exclusivo no domínio azureedge.netAny name that is unique in the azureedge.net domain Acede aos seus recursos em cache no * <nome>final*de domínio .azureedge.net.You access your cached resources at the domain <endpointname>.azureedge.net.

Selecione Criar para criar um perfil de CDN.Select Create to create a CDN profile.

O Azure cria o perfil e o ponto final.Azure creates the profile and endpoint. O novo ponto final é apresentado na lista Pontos finais e, quando está aprovisionado, o estado é A executar.The new endpoint appears in the Endpoints list, and when it's provisioned, the status is Running.

Novo ponto final na lista

Testar o ponto final da CDNTest the CDN endpoint

Dado que a propagação do registo demora algum tempo, o ponto final não está imediatamente disponível para utilização:Because it takes time for the registration to propagate, the endpoint isn't immediately available for use:

  • Para os perfis CDN do Azure Standard da Microsoft, a propagação normalmente fica concluída em 10 minutos.For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.
  • Para os perfis CDN do Azure Standard da Akamai, a propagação normalmente fica concluída num minuto.For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
  • Para os perfis CDN do Azure Standard da Verizon e CDN do Azure Premium da Verizon, a propagação normalmente fica concluída no prazo de 90 minutos.For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles, propagation usually completes within 90 minutes.

A aplicação de exemplo tem um ficheiro index.html e pastas css, img e js que contêm outros elementos estáticos.The sample app has an index.html file and css, img, and js folders that contain other static assets. Os caminhos de conteúdo para todos estes ficheiros são os mesmos no ponto final da CDN.The content paths for all of these files are the same at the CDN endpoint. Por exemplo, ambos os seguintes URLs acedem ao ficheiro bootstrap.css na pasta css:For example, both of the following URLs access the bootstrap.css file in the css folder:

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

Navegue até um browser para o seguinte URL:Navigate a browser to the following URL:

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

Home page da aplicação de exemplo servida a partir de CDN

Será apresentada a mesma página que executou anteriormente numa aplicação Web do Azure.You see the same page that you ran earlier in an Azure web app. A CDN do Azure obteve os ativos da aplicação Web de origem e está a servi-los a partir do ponto final da CDNAzure CDN has retrieved the origin web app's assets and is serving them from the CDN endpoint

Para se certificar de que esta página está colocada em cache no CDN, atualize-a.To ensure that this page is cached in the CDN, refresh the page. Por vezes são necessários dois pedidos para o mesmo recurso, para o CDN colocar em cache os conteúdos solicitados.Two requests for the same asset are sometimes required for the CDN to cache the requested content.

Para obter mais informações sobre a criação de perfis de CDN do Azure e os pontos finais, consulte Introdução ao Azure CDN.For more information about creating Azure CDN profiles and endpoints, see Getting started with Azure CDN.

Remover a CDNPurge the CDN

A CDN atualiza periodicamente os respetivos recursos da aplicação Web de origem consoante a configuração de tempo de duração (TTL).The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL) configuration. O TTL predefinido é de sete dias.The default TTL is seven days.

Por vezes, poderá precisar de atualizar a CDN antes de expirar o TTL; por exemplo, ao implementar conteúdo atualizado na aplicação Web.At times you might need to refresh the CDN before the TTL expiration; for example, when you deploy updated content to the web app. Para acionar uma atualização, remova manualmente os recursos da CDN.To trigger a refresh, manually purge the CDN resources.

Nesta secção do tutorial, implemente uma alteração na aplicação Web e remova o CDN para acionar o CDN para atualizar a respetiva cache.In this section of the tutorial, you deploy a change to the web app and purge the CDN to trigger the CDN to refresh its cache.

Implementar uma alteração na aplicação WebDeploy a change to the web app

Abra o ficheiro index.html e adicione -V2 ao cabeçalho H1, conforme mostrado no seguinte exemplo:Open the index.html file and add - V2 to the H1 heading, as shown in the following example:

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

Consolide as alterações e implemente-as na aplicação Web.Commit your change and deploy it to the web app.

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

Depois de concluída a implementação, navegue para o URL da aplicação Web para ver a alteração.Once deployment has completed, browse to the web app URL to see the change.

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

V2 no título na aplicação Web

Se navegar para o URL de ponto final da CDN da home page, não verá a alteração porque a versão em cache na CDN ainda não expirou.If you browse to the CDN endpoint URL for the home page, you won't see the change because the cached version in the CDN hasn't expired yet.

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

Nenhum V2 no título na CDN

Remova a CDN no portalPurge the CDN in the portal

Para acionar a CDN para atualizar a versão em cache, remova a CDN.To trigger the CDN to update its cached version, purge the CDN.

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).In the portal left navigation, select Resource groups, and then select the resource group that you created for your web app (myResourceGroup).

Selecionar grupo de recursos

Na lista de recursos, selecione o ponto final de CDN.In the list of resources, select your CDN endpoint.

Selecione o ponto final

Na parte superior da página Ponto final, selecione Remover.At the top of the Endpoint page, select Purge.

Selecione Remover

Introduza os caminhos do conteúdo que quer remover.Enter the content paths you want to purge. 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.You can pass a complete file path to purge an individual file, or a path segment to purge and refresh all content in a folder. Como alterou o index.html, certifique-se de que está num dos caminhos.Because you changed index.html, ensure that is in one of the paths.

Na parte inferior da página, selecione Remover.At the bottom of the page, select Purge.

Remover página

Certifique-se de que a CDN é atualizadaVerify that the CDN is updated

Aguarde até que o pedido de remoção conclua o processamento, que demora normalmente alguns minutos.Wait until the purge request finishes processing, which is typically a couple of minutes. Para ver o estado atual, selecione o ícone da campainha na parte superior da página.To see the current status, select the bell icon at the top of the page.

Remover notificação

Ao navegar para o URL de ponto final da CDN para index.html, verá o V2 que adicionou ao título na home page, que indica que a cache da CDN foi atualizada.When you browse to the CDN endpoint URL for index.html, you'll see the V2 that you added to the title on the home page, which indicates that the CDN cache has been refreshed.

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

V2 no título na CDN

Para obter mais informações, consulte Remover um ponto final do Azure CDN.For more information, see Purge an Azure CDN endpoint.

Utilizar cadeias de consulta para o conteúdo da versãoUse query strings to version content

A CDN do Azure oferece as seguintes opções de comportamento de colocação em cache:Azure CDN offers the following caching behavior options:

  • Ignorar cadeias de consultaIgnore query strings
  • Ignorar a colocação em cache de cadeias de consultaBypass caching for query strings
  • Colocar em cache todos os URL exclusivosCache every unique URL

A primeira opção é a predefinida, o que significa que existe apenas uma versão em cache de um ativo, independentemente da cadeia de consulta no URL.The first option is the default, which means there is only one cached version of an asset regardless of the query string in the URL.

Nesta secção do tutorial, pode alterar o comportamento de colocação em cache para colocar em cache todos os URL exclusivos.In this section of the tutorial, you change the caching behavior to cache every unique URL.

Alterar o comportamento de cacheChange the cache behavior

Na página Ponto Final CDN do portal do Azure, selecione Cache.In the Azure portal CDN Endpoint page, select Cache.

Selecione Colocar em cache todos os URL exclusivos relativo ao comportamento de colocação em cache da Cadeia de consulta na lista pendente.Select Cache every unique URL from the Query string caching behavior drop-down list.

Selecione Guardar.Select Save.

Selecione o comportamento de colocação em cache de cadeia de consulta

Certifique-se de que os URL exclusivos são colocados em cache em separadoVerify that unique URLs are cached separately

Num browser, navegue para a home page no ponto final da CDN e inclua uma cadeia de consulta:In a browser, navigate to the home page at the CDN endpoint, and include a query string:

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

A CDN do Azure devolve o conteúdo da aplicação Web atual, que inclui V2 no cabeçalho.Azure CDN returns the current web app content, which includes V2 in the heading.

Para se certificar de que esta página está colocada em cache no CDN, atualize-a.To ensure that this page is cached in the CDN, refresh the page.

Abra index.html, altere V2 para V3 e, em seguida, implemente a alteração.Open index.html, change V2 to V3, then deploy the change.

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

Num browser, aceda ao URL de ponto final da CDN com uma nova cadeia de consulta, como q=2.In a browser, go to the CDN endpoint URL with a new query string, such as q=2. A CDN do Azure obtém o ficheiro index.html atual e apresenta V3.Azure CDN gets the current index.html file and displays V3. No entanto, se navegar para o ponto final da CDN com a cadeia de consulta q=1, verá V2.However, if you navigate to the CDN endpoint with the q=1 query string, you see V2.

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

V3 no título na CDN, cadeia de consulta 2

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

V2 no título na CDN, cadeia de consulta 1

Este resultado mostra que cada cadeia de consulta é tratada de forma diferente:This output shows that each query string is treated differently:

  • q=1 foi utilizado antes, pelo que os conteúdos armazenados em cache são devolvidos (V2).q=1 was used before, so cached contents are returned (V2).
  • q=2 é novo, pelo que os conteúdos mais recentes da aplicação Web são obtidos e devolvidos (V3).q=2 is new, so the latest web app contents are retrieved and returned (V3).

Para obter mais informações, consulte Control Azure CDN caching behavior with query strings(Controlar o comportamento de colocação em cache do Azure CDN com cadeias de consulta).For more information, see Control Azure CDN caching behavior with query strings.

Limpar recursosClean up resources

Nos passos anteriores, criou os recursos do Azure num grupo de recursos.In the preceding steps, you created Azure resources in a resource group. Se achar que não vai precisar destes recursos no futuro, execute o seguinte comando no Cloud Shell para eliminar o grupo de recursos:If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

Este comando pode demorar alguns minutos a ser executado.This command may take a minute to run.

Passos seguintesNext steps

O que aprendeu:What you learned:

  • Criar um ponto final da CDN.Create a CDN endpoint.
  • Atualizar ativos em cache.Refresh cached assets.
  • Utilize cadeias de consulta para controlar versões em cache.Use query strings to control cached versions.

Saiba como otimizar o desempenho da CDN nos seguintes artigos:Learn how to optimize CDN performance in the following articles: