Öğretici: Azure App Service web uygulamasına Azure CDN ekleme

Bu öğretici, Azure Content Delivery (CDN) hizmetinin Azure App Service’teki bir web uygulamasına nasıl ekleneceğini gösterir. Web apps; web uygulamaları, REST API'leri ve mobil arka uçlar barındırmaya yönelik bir hizmettir.

Kullanacağınız örnek statik HTML sitesinin ana sayfası:

Öğrenecekleriniz:

Önkoşullar

Bu öğreticiyi tamamlamak için:

• Git'i yükleyin
• Azure CLI'yi yükleme

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Web uygulaması oluşturma

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.

Azure portalında oturum açma

Bir tarayıcıyı açın ve Azure portalına gidin.

Dinamik site hızlandırma iyileştirmesi

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. DSA iyileştirme sayesinde, dinamik içeriğe sahip web sayfalarının performansı ölçülebilir şekilde iyileştirilir. 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ı. 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. Verizon’dan Azure CDN profilleri için, bir CDN uç noktası oluşturulduktan sonra uç nokta iyileştirmesini değiştiremediğinizi unutmayın.

CDN profili ve uç noktası oluşturma

Sol gezinti bölmesinde Uygulama Hizmetleri’ni ve sonra statik HTML hızlı başlangıç içinde oluşturduğunuz uygulamayı 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.

Azure Content Delivery Network sayfasında, Yeni uç nokta ayarlarını tabloda belirtildiği gibi girin.

CDN profili oluşturmak için Oluştur’u seçin.

Azure, profili ve uç noktayı oluşturur. Yeni uç nokta, Uç noktalar listesinde gösterilir ve sağlandığında Çalışıyor durumunda olur.

CDN uç noktasını sınama

Kaydın yayılması zaman alacağından, uç nokta hemen kullanılabilir olmaz:

• Microsoft’tan Azure CDN Standart profilleri için yayma işlemi genellikle 10 dakikada tamamlanır.
• Akamai’den Azure CDN Standart profilleri için yayma işlemi genellikle bir dakika içinde tamamlanır.
• Verizon’dan Azure CDN Standart ve Verizon’dan Azure CDN Premium profilleri için yayma işlemi genellikle 90 dakika içinde tamamlanır.

Örnek uygulamanın, index.html dosyası ve diğer statik varlıkları içeren css, img ve js klasörleri vardır. Bu dosyaların tümünün içerik yolları, CDN uç noktasında aynıdır. Örneğin, aşağıdaki URL'ler css klasöründeki bootstrap.css dosyasına erişir:

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

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

Bir tarayıcıdan aşağıdaki URL’ye gidin:

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

Azure web uygulamasında daha önce çalıştırdığınız aynı sayfayı görürsünüz. Azure CDN, kaynak web uygulamasının varlıklarını almıştır ve CDN uç noktasından bunları sunmaktadır

Bu sayfanın CDN'de önbelleğe alınmasını sağlamak için sayfayı yenileyin. CDN'nin istenen içeriği önbelleğe alması için bazen aynı varlığa ilişkin iki istekte bulunulması gerekir.

Azure CDN profilleri ve uç noktaları oluşturma hakkında daha fazla bilgi için bkz. Azure CDN kullanmaya başlama.

CDN’yi temizleme

CDN, yaşam süresi (TTL) yapılandırmasına bağlı olarak kaynak web uygulamasındaki kaynaklarını düzenli aralıklarla yeniler. Varsayılan TTL yedi gündür.

TTL’nin süresi dolmadan önce CDN'yi yenilemeniz gerekebilir (örn. güncelleştirilmiş içeriği web uygulamasına dağıtırken). Yenileme tetiklemek için, CDN kaynaklarını el ile temizleyin.

Öğ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.

Web uygulamasına değişiklik dağıtma

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

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

Değişikliğinizi uygulayın ve web uygulamasına dağıtın.

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

Dağıtım tamamlandıktan sonra, değişikliği görmek için web uygulaması URL'sine bakın.

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

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.

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

Portalda CDN'i temizleme

Önbelleğe alınmış sürümünü güncelleştirmek üzere CDN'i tetiklemek için, CDN'i temizleyin.

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.

Kaynak listesinden CDN uç noktanızı seçin.

Uç nokta sayfasının üst kısmında, Temizle'yi seçin.

Temizlemek istediğiniz içerik yollarını girin. 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. index.html dosyasını değiştirdiğiniz için, bunun yollardan birinde yer aldığından emin olun.

Sayfanın alt kısmındaki Temizle'yi seçin.

CDN'in güncelleştirildiğini doğrulayın

Temizleme isteğinin işlenmesi tamamlanana kadar bekleyin. Bu işlem genellikle birkaç dakika sürer. Geçerli durumu görmek için, sayfanın üst kısmındaki zil simgesini seçin.

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.

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

Daha fazla bilgi için bkz. Azure CDN uç noktasını temizleme.

Sürüm içeriğini belirlemek için sorgu dizelerini kullanın

Azure CDN, aşağıdaki önbelleğe alma davranışı seçeneklerini sunar:

• Sorgu dizelerini yoksay
• Sorgu dizeleri için önbelleğe almayı atla
• Her benzersiz URL'yi önbelleğe al

İ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.

Öğ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.

Önbellek davranışını değiştirme

Azure portalında bulunan CDN Uç Noktası sayfasında Önbellek’i seçin.

Sorgu dizesi önbellek davranışı açılan listesinden, Her benzersiz URL’yi önbelleğe al’ı seçin.

Kaydet’i seçin.

Benzersiz URL'lerin ayrı olarak önbelleğe alındığını doğrulayın

Bir tarayıcıda, CDN uç noktasındaki ana sayfaya gidin ve bir sorgu dizesi ekleyin:

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.

Bu sayfanın CDN'de önbelleğe alınmasını sağlamak için sayfayı yenileyin.

index.html dosyasını açın, V2'yi V3 olarak değiştirin ve değişikliği dağıtın.

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

Tarayıcıda, yeni sorgu dizesiyle (örneğin, q=2) CDN uç nokta URL'sine gidin. Azure CDN geçerli index.html dosyasını alır ve V3 olarak görüntüler. Öte yandan CDN uç noktasına q=1 sorgu dizesiyle giderseniz, V2'yi görürsünüz.

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

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

Bu çıktı, her sorgu dizesinin farklı şekilde değerlendirildiğini gösterir:

• q = 1 daha önce kullanılmıştır, bu nedenle önbelleğe alınan içerikler döndürülür (V2).
• q = 2 yenidir, bu nedenle en son web uygulaması içerikleri alınır ve döndürülür (V3).

Daha fazla bilgi için bkz. Sorgu dizeleri içeren Azure CDN önbelleğe alma davranışını kontrol etme.

Kaynakları temizleme

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz. Bu kaynakların gelecekte gerekli olacağını düşünmüyorsanız, Cloud Shell’de aşağıdaki komutu çalıştırarak kaynak grubunu silin:

az group delete --name myResourceGroup

Bu komutun çalıştırılması bir dakika sürebilir.

Sonraki adımlar

Öğrendikleriniz:

CDN performansını nasıl iyileştirebileceğinizi öğrenmek için aşağıdaki makalelere göz atın: