Öğretici: Azure App Service web uygulamasına Azure CDN eklemeTutorial: Add Azure CDN to an Azure App Service web app

Bu öğretici, Azure Content Delivery (CDN) hizmetinin Azure App Service’teki bir web uygulamasına nasıl ekleneceğini gösterir.This tutorial shows how to add Azure Content Delivery Network (CDN) to a web app in Azure App Service. Web apps; web uygulamaları, REST API'leri ve mobil arka uçlar barındırmaya yönelik bir hizmettir.Web apps is a service for hosting web applications, REST APIs, and mobile back ends.

Kullanacağınız örnek statik HTML sitesinin ana sayfası:Here's the home page of the sample static HTML site that you'll work with:

Örnek uygulama ana sayfası

Öğrenecekleriniz:What you'll learn:

  • CDN uç noktası oluşturma.Create a CDN endpoint.
  • Önbelleğe alınan varlıkları yenileme.Refresh cached assets.
  • Önbelleğe alınan sürümleri denetlemek için sorgu dizeleri kullanma.Use query strings to control cached versions.

Ön koşullarPrerequisites

Bu öğreticiyi tamamlamak için:To complete this tutorial:

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.If you don't have an Azure subscription, create a free account before you begin.

Web uygulaması oluşturmaCreate the web app

Kullanacağınız web uygulamasını oluşturmak için, statik HTML hızlı başlangıç ila Uygulamaya göz atma adımlarını izleyin.To create the web app that you'll work with, follow the static HTML quickstart through the Browse to the app step.

Azure portalında oturum açmaLog in to the Azure portal

Bir tarayıcıyı açın ve Azure portalına gidin.Open a browser and navigate to the Azure portal.

Dinamik site hızlandırma iyileştirmesiDynamic site acceleration optimization

CDN uç noktanızı dinamik site hızlandırma (DSA) için iyileştirmek istiyorsanız, profilinizi ve uç noktanızı oluşturmak için CDN portalını kullanmalısınız.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. DSA iyileştirme sayesinde, dinamik içeriğe sahip web sayfalarının performansı ölçülebilir şekilde iyileştirilir.With DSA optimization, the performance of web pages with dynamic content is measurably improved. CDN portalından bir CDN uç noktasını DSA için iyileştirme hakkında yönergeler için bkz. Dinamik dosyaların teslimini hızlandırmak için CDN uç nokta yapılandırması.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. Aksi takdirde, yeni uç noktanızı iyileştirmek istemiyorsanız, sonraki bölümde yer alan adımları izleyerek oluşturmak için web uygulaması portalını kullanabilirsiniz.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. Verizon’dan Azure CDN profilleri için, bir CDN uç noktası oluşturulduktan sonra uç nokta iyileştirmesini değiştiremediğinizi unutmayın.Note that for Azure CDN from Verizon profiles, you cannot change the optimization of a CDN endpoint after it has been created.

CDN profili ve uç noktası oluşturmaCreate a CDN profile and endpoint

Sol gezinti bölmesinde Uygulama Hizmetleri’ni ve sonra statik HTML hızlı başlangıç içinde oluşturduğunuz uygulamayı seçin.In the left navigation, select App Services, and then select the app that you created in the static HTML quickstart.

Portalda, App Service uygulamasını seçin

App Service sayfasındaki Ayarlar bölümünde, Ağ > Uygulamanız için Azure CDN'i yapılandırın seçeneğini belirleyin.In the App Service page, in the Settings section, select Networking > Configure Azure CDN for your app.

Portalda CDN’yi seçin

Azure Content Delivery Network sayfasında, Yeni uç nokta ayarlarını tabloda belirtildiği gibi girin.In the Azure Content Delivery Network page, provide the New endpoint settings as specified in the table.

Portalda profil ve uç nokta oluşturma

AyarSetting Önerilen değerSuggested value AçıklamaDescription
CDN profiliCDN profile myCDNProfilemyCDNProfile CDN profili, aynı fiyatlandırma katmanına sahip bir CDN uç noktaları koleksiyonudur.A CDN profile is a collection of CDN endpoints with the same pricing tier.
Fiyatlandırma katmanıPricing tier Standart AkamaiStandard Akamai Fiyatlandırma katmanı, sağlayıcıyı ve kullanılabilir özellikleri belirtir.The pricing tier specifies the provider and available features. Bu öğreticide Standard Akamai kullanılır.This tutorial uses Standard Akamai.
CDN uç noktası adıCDN endpoint name azureedge.net etki alanında benzersiz olan tüm adlarAny name that is unique in the azureedge.net domain Önbelleğe alınmış kaynaklarınıza etki alanı * <>bitiş noktası adı*.azureedge.net adresinden erişebilirsiniz.You access your cached resources at the domain <endpointname>.azureedge.net.

CDN profili oluşturmak için Oluştur’u seçin.Select Create to create a CDN profile.

Azure, profili ve uç noktayı oluşturur.Azure creates the profile and endpoint. Yeni uç nokta, Uç noktalar listesinde gösterilir ve sağlandığında Çalışıyor durumunda olur.The new endpoint appears in the Endpoints list, and when it's provisioned, the status is Running.

Listede yeni uç nokta

CDN uç noktasını sınamaTest the CDN endpoint

Kaydın yayılması zaman alacağından, uç nokta hemen kullanılabilir olmaz:Because it takes time for the registration to propagate, the endpoint isn't immediately available for use:

  • Microsoft’tan Azure CDN Standart profilleri için yayma işlemi genellikle 10 dakikada tamamlanır.For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.
  • Akamai’den Azure CDN Standart profilleri için yayma işlemi genellikle bir dakika içinde tamamlanır.For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
  • Verizon’dan Azure CDN Standart ve Verizon’dan Azure CDN Premium profilleri için yayma işlemi genellikle 90 dakika içinde tamamlanır.For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles, propagation usually completes within 90 minutes.

Örnek uygulamanın, index.html dosyası ve diğer statik varlıkları içeren css, img ve js klasörleri vardır.The sample app has an index.html file and css, img, and js folders that contain other static assets. Bu dosyaların tümünün içerik yolları, CDN uç noktasında aynıdır.The content paths for all of these files are the same at the CDN endpoint. Örneğin, aşağıdaki URL'ler css klasöründeki bootstrap.css dosyasına erişir: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

Bir tarayıcıdan aşağıdaki URL’ye gidin:Navigate a browser to the following URL:

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

CDN'den sunulan örnek uygulama ana sayfası

Azure web uygulamasında daha önce çalıştırdığınız aynı sayfayı görürsünüz.You see the same page that you ran earlier in an Azure web app. Azure CDN, kaynak web uygulamasının varlıklarını almıştır ve CDN uç noktasından bunları sunmaktadırAzure CDN has retrieved the origin web app's assets and is serving them from the CDN endpoint

Bu sayfanın CDN'de önbelleğe alınmasını sağlamak için sayfayı yenileyin.To ensure that this page is cached in the CDN, refresh the page. CDN'nin istenen içeriği önbelleğe alması için bazen aynı varlığa ilişkin iki istekte bulunulması gerekir.Two requests for the same asset are sometimes required for the CDN to cache the requested content.

Azure CDN profilleri ve uç noktaları oluşturma hakkında daha fazla bilgi için bkz. Azure CDN kullanmaya başlama.For more information about creating Azure CDN profiles and endpoints, see Getting started with Azure CDN.

CDN’yi temizlemePurge the CDN

CDN, yaşam süresi (TTL) yapılandırmasına bağlı olarak kaynak web uygulamasındaki kaynaklarını düzenli aralıklarla yeniler.The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL) configuration. Varsayılan TTL yedi gündür.The default TTL is seven days.

TTL’nin süresi dolmadan önce CDN'yi yenilemeniz gerekebilir (örn. güncelleştirilmiş içeriği web uygulamasına dağıtırken).At times you might need to refresh the CDN before the TTL expiration; for example, when you deploy updated content to the web app. Yenileme tetiklemek için, CDN kaynaklarını el ile temizleyin.To trigger a refresh, manually purge the CDN resources.

Öğreticinin bu bölümünde, web uygulamasına bir değişiklik dağıtabilir ve önbelleğini yenilemek üzere CDN’i tetiklemek için CDN’i temizleyebilirsiniz.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.

Web uygulamasına değişiklik dağıtmaDeploy a change to the web app

Aşağıdaki örnekte gösterildiği gibi, index.html dosyasını açın ve H1 başlığına - V2 ekleyin: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>

Değişikliğinizi uygulayın ve web uygulamasına dağıtın.Commit your change and deploy it to the web app.

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

Dağıtım tamamlandıktan sonra, değişikliği görmek için web uygulaması URL'sine bakın.Once deployment has completed, browse to the web app URL to see the change.

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

Web uygulamasındaki başlıkta V2

Ana sayfa için CDN uç noktası URL'sine bakarsanız, CDN'de önbelleğe alınmış sürümün henüz süresi dolmadığından, değişikliği göremezsiniz.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

CDN'deki başlıkta V2 yok

Portalda CDN'i temizlemePurge the CDN in the portal

Önbelleğe alınmış sürümünü güncelleştirmek üzere CDN'i tetiklemek için, CDN'i temizleyin.To trigger the CDN to update its cached version, purge the CDN.

Portalın sol gezinti bölümünde, Kaynak grupları’nı ve ardından ve web uygulamanız için oluşturduğunuz kaynak grubunu (myResourceGroup) seçin.In the portal left navigation, select Resource groups, and then select the resource group that you created for your web app (myResourceGroup).

Kaynak grubu seçin

Kaynak listesinden CDN uç noktanızı seçin.In the list of resources, select your CDN endpoint.

Uç nokta seçin

Uç nokta sayfasının üst kısmında, Temizle'yi seçin.At the top of the Endpoint page, select Purge.

Temizleme seçin

Temizlemek istediğiniz içerik yollarını girin.Enter the content paths you want to purge. Tek bir dosyayı temizlemek için tam bir dosya yolunu geçirebileceğiniz gibi, bir klasördeki tüm içeriği temizlemek ve yenilemek için bir yol kesimini de geçirebilirsiniz.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. index.html dosyasını değiştirdiğiniz için, bunun yollardan birinde yer aldığından emin olun.Because you changed index.html, ensure that is in one of the paths.

Sayfanın alt kısmındaki Temizle'yi seçin.At the bottom of the page, select Purge.

Sayfayı temizleyin

CDN'in güncelleştirildiğini doğrulayınVerify that the CDN is updated

Temizleme isteğinin işlenmesi tamamlanana kadar bekleyin. Bu işlem genellikle birkaç dakika sürer.Wait until the purge request finishes processing, which is typically a couple of minutes. Geçerli durumu görmek için, sayfanın üst kısmındaki zil simgesini seçin.To see the current status, select the bell icon at the top of the page.

Temizleme bildirimi

index.html için CDN uç nokta URL'sine bakarken, giriş sayfasının başlığına eklediğiniz V2'yi görürsünüz; bu, CDN önbelleğinin yenilendiğini gösterir.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

CDN'deki başlıkta V2

Daha fazla bilgi için bkz. Azure CDN uç noktasını temizleme.For more information, see Purge an Azure CDN endpoint.

Sürüm içeriğini belirlemek için sorgu dizelerini kullanınUse query strings to version content

Azure CDN, aşağıdaki önbelleğe alma davranışı seçeneklerini sunar:Azure CDN offers the following caching behavior options:

  • Sorgu dizelerini yoksayIgnore query strings
  • Sorgu dizeleri için önbelleğe almayı atlaBypass caching for query strings
  • Her benzersiz URL'yi önbelleğe alCache every unique URL

İlk seçenek varsayılan davranıştır ve URL’de kullanılan sorgu dizesine bakılmaksızın, bir varlığın yalnızca önbelleğe alınmış bir sürümü olduğu anlamına gelir.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.

Öğreticinin bu bölümünde, önbelleğe alma davranışını, her benzersiz URL'yi önbelleğe alacak şekilde değiştirme hakkında bilgi edineceksiniz.In this section of the tutorial, you change the caching behavior to cache every unique URL.

Önbellek davranışını değiştirmeChange the cache behavior

Azure portalında bulunan CDN Uç Noktası sayfasında Önbellek’i seçin.In the Azure portal CDN Endpoint page, select Cache.

Sorgu dizesi önbellek davranışı açılan listesinden, Her benzersiz URL’yi önbelleğe al’ı seçin.Select Cache every unique URL from the Query string caching behavior drop-down list.

Kaydet'iseçin.Select Save.

Sorgu dizesini önbelleğe alma davranışı seçin

Benzersiz URL'lerin ayrı olarak önbelleğe alındığını doğrulayınVerify that unique URLs are cached separately

Bir tarayıcıda, CDN uç noktasındaki ana sayfaya gidin ve bir sorgu dizesi ekleyin: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

Azure CDN, başlıkta V2'nin de bulunduğu geçerli web uygulaması içeriğini döndürür.Azure CDN returns the current web app content, which includes V2 in the heading.

Bu sayfanın CDN'de önbelleğe alınmasını sağlamak için sayfayı yenileyin.To ensure that this page is cached in the CDN, refresh the page.

index.html dosyasını açın, V2'yi V3 olarak değiştirin ve değişikliği dağıtın.Open index.html, change V2 to V3, then deploy the change.

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

Tarayıcıda, yeni sorgu dizesiyle (örneğin, q=2) CDN uç nokta URL'sine gidin.In a browser, go to the CDN endpoint URL with a new query string, such as q=2. Azure CDN geçerli index.html dosyasını alır ve V3 olarak görüntüler.Azure CDN gets the current index.html file and displays V3. Öte yandan CDN uç noktasına q=1 sorgu dizesiyle giderseniz, V2'yi görürsünüz.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

CDN'deki başlıkta V3, sorgu dizesi 2

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

CDN'deki başlıkta V2, sorgu dizesi 1

Bu çıktı, her sorgu dizesinin farklı şekilde değerlendirildiğini gösterir:This output shows that each query string is treated differently:

  • q = 1 daha önce kullanılmıştır, bu nedenle önbelleğe alınan içerikler döndürülür (V2).q=1 was used before, so cached contents are returned (V2).
  • q = 2 yenidir, bu nedenle en son web uygulaması içerikleri alınır ve döndürülür (V3).q=2 is new, so the latest web app contents are retrieved and returned (V3).

Daha fazla bilgi için bkz. Sorgu dizeleri içeren Azure CDN önbelleğe alma davranışını kontrol etme.For more information, see Control Azure CDN caching behavior with query strings.

Kaynakları temizlemeClean up resources

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz.In the preceding steps, you created Azure resources in a resource group. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin: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

Bu komutun çalıştırılması bir dakika sürebilir.This command may take a minute to run.

Sonraki adımlarNext steps

Öğrendikleriniz:What you learned:

  • CDN uç noktası oluşturma.Create a CDN endpoint.
  • Önbelleğe alınan varlıkları yenileme.Refresh cached assets.
  • Önbelleğe alınan sürümleri denetlemek için sorgu dizeleri kullanma.Use query strings to control cached versions.

CDN performansını nasıl iyileştirebileceğinizi öğrenmek için aşağıdaki makalelere göz atın:Learn how to optimize CDN performance in the following articles: