Öğretici: Azure Static Web Apps için CDN yapılandırma

Önkoşullar

• Statik web uygulamanız için, yaşam süresi (TTL) 48 saatten kısa olacak şekilde yapılandırılmış özel etki alanı .
• Standart barındırma planını kullanan Azure Static Web Apps ile dağıtılan bir uygulama.

Statik Web Apps kaynağında kurumsal düzeyde edge'i etkinleştirme

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı. Ücretsiz hesap oluşturma
• Azure Static Web Apps sitesi. İlk statik web uygulamanızı oluşturma
• Azure Static Web Apps Standard ve Azure Front Door Standard / Premium planları. Daha fazla bilgi için bkz. Static Web Apps fiyatlandırması
• Daha hızlı sayfa yüklemeleri, gelişmiş güvenlik ve küresel uygulamalar için iyileştirilmiş güvenilirlik için kurumsal düzeyde uç kullanmayı göz önünde bulundurun.

Azure Front Door oluşturma

1. Azure Portal’ında oturum açın.

2. Giriş sayfasından veya Azure menüsünden + Kaynak oluştur'u seçin. Front Door ve CDN profillerini arayın ve ardından Front Door ve CDN profilleri oluştur'u>seçin.

3. Teklifleri karşılaştır sayfasında Hızlı oluştur'u ve ardından Front Door oluşturmak için Devam'ı seçin.

4. Front Door profili oluştur sayfasında aşağıdaki ayarları girin veya seçin.

   Ayar	Value
   Abonelik	Azure aboneliği seçin.
   Kaynak grubu	Kaynak grubu adı girin. Bu ad genellikle statik web uygulamanız tarafından kullanılan grup adıyla aynıdır.
   Kaynak grubu konumu	Yeni bir kaynak grubu oluşturursanız, size en yakın konumu girin.
   Veri Akışı Adı	my-static-web-app-front-door girin.
   Katman	Standart'ı seçin.
   Uç nokta adı	Front Door konağınız için benzersiz bir ad girin.
   Kaynak türü	Statik Web Uygulaması'ı seçin.
   Kaynak ana bilgisayar adı	Açılan listeden statik web uygulamanızın ana bilgisayar adını seçin.
   Önbelleğe Alma	Önbelleğe almayı etkinleştir onay kutusunu işaretleyin.
   Sorgu dizesini önbelleğe alma davranışı	Sorgu Dizesini Kullan'ı seçin
   Sıkıştırma	Sıkıştırmayı etkinleştir'i seçin
   WAF ilkesi	Bu özelliği etkinleştirmek istiyorsanız Yeni oluştur'u seçin veya açılan listeden mevcut bir Web Uygulaması Güvenlik Duvarı ilkesi seçin.

   Not

   Bir Azure Front Door profili oluşturduğunuzda, Front Door'un oluşturulduğu abonelikten bir çıkış noktası seçmeniz gerekir.

5. Gözden geçir ve oluştur'u seçin ve ardından Oluştur seçeneğini belirleyin. Oluşturma işleminin tamamlanması birkaç dakika sürebilir.

6. Dağıtım tamamlandıktan sonar Kaynağa git’i seçin.

7. Koşul ekleyin.

Kimlik doğrulaması iş akışı için önbelleği devre dışı bırakma

Front Door'un önbelleğe alma ilkelerinin kimlik doğrulaması ve yetkilendirmeyle ilgili sayfaları önbelleğe almaya çalışmasını devre dışı bırakmak için aşağıdaki ayarları ekleyin.

Koşul ekle

1. Front Door'unuzda Ayarlar'ın altında Kural kümesi'ne tıklayın.

2. Ekle'yi seçin.

3. Kural kümesi adı metin kutusuna Güvenlik yazın.

4. Kural adı metin kutusuna NoCacheAuthRequests girin.

5. Koşul ekle'yi seçin.

6. İstek yolu'nu seçin.

7. İşleç açılan listesini ve ardından Şununla Başlar'ı seçin.

8. Değer metin kutusunun üstündeki Düzenle bağlantısını seçin.

9. Metin kutusuna girin /.auth ve Güncelleştir'i seçin.

10. Dize dönüştürme açılan listesinden seçenek yok seçeneğini belirleyin.

Eylem ekleme

1. Eylem ekle açılan listesini seçin.

2. Yönlendirme yapılandırması geçersiz kılma'ya tıklayın.

3. Önbelleğe Alma açılan listesinde Devre Dışı'nı seçin.

4. Kaydet'i seçin.

Kuralı bir uç noktayla ilişkilendirme

Kural oluşturulduğuna göre, kuralı bir Front Door uç noktasına uygulayın.

1. Front Door'unuzdan Kural kümesi'ni ve ardından İlişkilendirilmemiş bağlantısını seçin.

   

2. Önbelleğe alma kuralını uygulamak istediğiniz uç nokta adını seçin ve ardından İleri'yi seçin.

3. İlişkili'yi seçin.

   

Front Door Kimliğini Kopyala

Front Door örneğinin benzersiz tanımlayıcısını kopyalamak için aşağıdaki adımları kullanın.

1. Front Door'unuzdan sol gezinti bölmesinden Genel Bakış bağlantısını seçin.

2. Front Door Id etiketli değeri kopyalayın ve daha sonra kullanmak üzere bir dosyaya yapıştırın.

   

Statik web uygulaması yapılandırmasını güncelleştirme

Front Door ile tümleştirmeyi tamamlamak için uygulama yapılandırma dosyasını aşağıdaki işlevleri yapacak şekilde güncelleştirmeniz gerekir:

• Yalnızca Front Door aracılığıyla sitenize gelen trafiği kısıtlama
• Yalnızca Front Door örneğinizden sitenize gelen trafiği kısıtlama
• Sitenize erişebilecek etki alanlarını tanımlama
• Güvenli yollar için önbelleğe almayı devre dışı bırakma

Sitenizin staticwebapp.config.json dosyasını açın ve aşağıdaki değişiklikleri yapın.

1. Yapılandırma dosyasına aşağıdaki bölümü ekleyerek trafiği yalnızca Front Door kullanacak şekilde kısıtlayın:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Hangi Azure Front Door örneklerinin ve etki alanlarının forwardingGateway sitenize erişebileceğini tanımlamak için bölümünü ekleyin.

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   İlk olarak uygulamanızı yalnızca Front Door örneğinizden gelen trafiğe izin verecek şekilde yapılandırın. Her arka uç isteğinde, Front Door otomatik olarak Front Door örnek kimliğinizi içeren bir X-Azure-FDID üst bilgi ekler. Statik web uygulamanızı bu üst bilgiyi gerektirecek şekilde yapılandırarak trafiği yalnızca Front Door örneğiniz ile kısıtlar. forwardingGateway Yapılandırma dosyanızdaki bölümde bölümünü ekleyin requiredHeaders ve üst bilgiyi tanımlayınX-Azure-FDID. değerini daha önce ayırdığınız Front Door Kimliği ile değiştirin<YOUR-FRONT-DOOR-ID>.

   Ardından, diziye Azure Front Door ana bilgisayar adını (Azure Static Web Apps konak adı değil) allowedForwardedHosts ekleyin. Front Door örneğinizde yapılandırılmış özel etki alanlarınız varsa, bunları da bu listeye ekleyin.

   Bu örnekte değerini sitenizin Azure Front Door ana bilgisayar adıyla değiştirin my-sitename.azurefd.net .

3. Uygulamanızdaki tüm güvenli yollar için yol üst bilgisi tanımına ekleyerek "Cache-Control": "no-store" Azure Front Door önbelleğini devre dışı bırakın.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

Bu yapılandırmayla, siteniz artık oluşturulan *.azurestaticapps.net ana bilgisayar adıyla değil, yalnızca Front Door örneğinizde yapılandırılan konak adları aracılığıyla kullanılabilir.

Dikkat edilmesi gereken noktalar

• Özel etki alanları: Front Door sitenizi yönettiğine göre artık Azure Static Web Apps özel etki alanı özelliğini kullanamayacaksınız. Azure Front Door'un özel etki alanı eklemeye yönelik ayrı bir işlemi vardır. Front Door'unuza özel etki alanı ekleme bölümüne bakın. Front Door'a özel bir etki alanı eklediğinizde, statik web uygulaması yapılandırma dosyanızı listeye eklemek allowedForwardedHosts için güncelleştirmeniz gerekir.

• Trafik istatistikleri: Azure Front Door varsayılan olarak trafik istatistiklerinizi etkileyebilecek sistem durumu yoklamalarını yapılandırabilir. Sistem durumu yoklamaları için varsayılan değerleri düzenlemek isteyebilirsiniz.

• Eski sürümleri sunma: Statik web uygulamanızdaki mevcut dosyalara güncelleştirme dağıttığınızda, Azure Front Door yaşam süresi dolana kadar dosyalarınızın eski sürümlerine hizmet etmeye devam edebilir. En son dosyaların sunulduğundan emin olmak için etkilenen yollar için Azure Front Door önbelleğini temizleyin.