Návod: Konfigurace CDN pro Azure Static Web Apps

Přidáním služby Azure Front Door jako CDN pro statickou webovou aplikaci získáte výhodu zabezpečeného vstupního bodu pro rychlé doručování webových aplikací.

Se statickými webovými aplikacemi máte dvě možnosti integrace se službou Azure Front Door. Azure Front Door můžete do statické webové aplikace přidat tím, že povolíte hranici sítě na podnikové úrovni, což je spravovaná integrace Azure Front Door se statickými webovými aplikacemi. Případně můžete prostředek služby Azure Front Door ručně nakonfigurovat v přední části vaší statické webové aplikace.

Zvažte níže uvedené výhody a určete, která možnost nejlépe vyhovuje vašim potřebám.

Podnikové řešení pro edge nabízí:

• Nulové změny konfigurace
• Bez výpadků
• Automatické spravované certifikace SSL a vlastní domény

Ruční nastavení služby Azure Front Door poskytuje úplnou kontrolu nad konfigurací CDN, včetně možnosti:

• Omezení provozu podle jeho původu
• Přidání firewallu webových aplikací (WAF)
• Směrování napříč více aplikacemi
• Použití pokročilejších funkcí služby Azure Front Door

V tomto kurzu se naučíte přidat Azure Front Door do statické webové aplikace.

Požadavky

• Registrovaný Microsoft.Cdnposkytovatel prostředků.
• Vlastní doména nakonfigurovaná pro statickou webovou aplikaci s časem naživo (TTL) nastavenou na méně než 48 hodin.
• Aplikace nasazená se službou Azure Static Web Apps , která používá plán hostování úrovně Standard.

Povolení funkcí pro edge computing na podnikové úrovni u prostředku Static Web Apps

Azure Portal

1. Na webu Azure Portal přejděte do své statické webové aplikace.

2. V levém menu vyberte enterprise-grade edge.

3. Zaškrtněte políčko Povolit edge řešení na podnikové úrovni.

4. Vyberte Uložit.

5. Kliknutím na TLAČÍTKO OK potvrďte uložení.

   Povolením této funkce se účtují další náklady.

Azure CLI

az extension add -n enterprise-edge

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

Požadavky

• Účet Azure s aktivním předplatným. Vytvoření účtu zdarma
• Stránka Azure Static Web Apps. Vytvoření první statické webové aplikace
• Plány Azure Static Web Apps Standard a Azure Front Door Standard / Premium Další informace najdete v tématu Static Web Apps – ceny
• Zvažte použití hraničních zařízení na podnikové úrovni pro rychlejší načítání stránek, lepší zabezpečení a optimalizovanou spolehlivost pro globální aplikace.

Vytvoření služby Azure Front Door

1. Přihlaste se do Azure Portalu.

2. Na domovské stránce nebo v nabídce Azure vyberte + Vytvořit prostředek. Vyhledejte profily služby Front Door a CDN a pak vyberte Vytvořit>profily služby Front Door a CDN.

3. Na stránce Porovnat nabídky vyberte Rychlé vytvoření a pak vyberte Pokračovat a vytvořte Front Door.

4. Na stránce Vytvořit profil služby Front Door zadejte nebo vyberte následující nastavení.

   Nastavení	Hodnota
   Předplatné	Vyberte své předplatné Azure.
   Skupina zdrojů	Zadejte název skupiny prostředků. Tento název je často stejný název skupiny, který používá vaše statická webová aplikace.
   Umístění skupiny prostředků	Pokud vytvoříte novou skupinu prostředků, zadejte nejbližší umístění.
   Název	Zadejte my-static-web-app-front-door.
   Úroveň	Vyberte Standardní.
   Název koncového bodu	Zadejte jedinečný název hostitele služby Front Door.
   Typ původu	Vyberte statickou webovou aplikaci.
   Název hostitele původu	V rozevíracím seznamu vyberte název hostitele vaší statické webové aplikace.
   Cacheování	Zaškrtněte políčko Povolit ukládání do mezipaměti .
   Chování při ukládání řetězců dotazů do mezipaměti	Vyberte Použít řetězec dotazu
   Komprese	Vyberte Povolit kompresi
   Zásady WAF	Pokud chcete tuto funkci povolit, vyberte v rozevíracím seznamu Možnost Vytvořit novou nebo vyberte existující zásadu firewallu webových aplikací.

   Poznámka:

   Když vytvoříte profil služby Azure Front Door, musíte vybrat původ ze stejného předplatného, ve které je služba Front Door vytvořená.

5. Vyberte možnost Zkontrolovat a vytvořita poté vyberte možnost Vytvořit. Dokončení procesu vytváření může trvat několik minut.

6. Po dokončení nasazení vyberte Přejít k prostředku.

7. Přidejte podmínku.

Zakázání mezipaměti pro pracovní postup ověřování

Poznámka:

Vypršení platnosti mezipaměti, řetězec dotazu klíče mezipaměti a akce přepsání skupiny původu jsou zastaralé. Tyto akce můžou fungovat normálně, ale vaše sada pravidel se nemůže změnit. Před změnou vaší sady pravidel nahraďte tato přepsání novými akcemi přepsání konfigurace trasy.

Přidejte následující nastavení pro zakázání zásad ukládání do mezipaměti služby Front Door, která se pokoušejí ukládat ověřování a stránky související s autorizací do mezipaměti.

Přidat podmínku

1. Ve službě Front Door v části Nastavení vyberte Sadu pravidel.

2. Vyberte Přidat.

3. Do textového pole pro název sady pravidel zadejte Zabezpečení.

4. Do textového pole Název pravidla zadejte NoCacheAuthRequests.

5. Vyberte Přidat podmínku.

6. Vyberte cestu k žádosti.

7. Vyberte rozevírací seznam Operátor a potom Začíná na.

8. Vyberte odkaz Upravit nad textovým polem Hodnota .

9. Zadejte /.auth do textového pole a pak vyberte Aktualizovat.

10. Z rozevíracího seznamu Transformace řetězců nevybírejte žádné možnosti.

Přidat akci

1. Vyberte rozevírací seznam Přidat akci .

2. Vyberte přepsání konfigurace trasy.

3. V rozevíracím seznamu Ukládání do mezipaměti vyberte Zakázáno.

4. Vyberte Uložit.

Přiřadit pravidlo ke koncovému bodu

Teď, když je pravidlo vytvořené, použijte pravidlo na koncový bod služby Front Door.

1. Ve službě Front Door vyberte sadu pravidel a pak odkaz Nepřidruženo .

   

2. Vyberte název koncového bodu, na který chcete použít pravidlo ukládání do mezipaměti, a pak vyberte Další.

3. Vyberte Přidružit.

   

Kopírování ID služby Front Door

Pomocí následujícího postupu zkopírujte jedinečný identifikátor instance služby Front Door.

1. Ve službě Front Door vyberte v levém navigačním panelu odkaz Přehled .

2. Zkopírujte hodnotu s názvem Front Door ID a vložte ji do souboru pro pozdější použití.

   

Aktualizace konfigurace statické webové aplikace

Pokud chcete dokončit integraci se službou Front Door, musíte aktualizovat konfigurační soubor aplikace, aby fungoval následující funkce:

• Omezte přístup na svůj web pouze pomocí Front Door
• Omezení provozu na web pouze z instance služby Front Door
• Definování domén, které mají přístup k vašemu webu
• Zakázání ukládání do mezipaměti pro zabezpečené trasy

Otevřete soubor staticwebapp.config.json pro váš web a proveďte následující změny.

1. Omezte provoz tak, aby používal pouze službu Front Door, a to přidáním následující části do konfiguračního souboru:

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

2. Pokud chcete definovat, které instance a domény služby Azure Front Door mají přístup k vašemu webu, přidejte tento forwardingGateway oddíl.

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

   Nejprve nakonfigurujte aplikaci tak, aby umožňovala provoz jenom z vaší instance služby Front Door. V každém back-endovém požadavku služba Front Door automaticky přidá hlavičku X-Azure-FDID , která obsahuje ID instance služby Front Door. Konfigurací statické webové aplikace tak, aby vyžadovala tuto hlavičku, omezuje provoz výhradně na instanci služby Front Door. V části forwardingGateway vašeho konfiguračního souboru přidejte sekci requiredHeaders a definujte hlavičku X-Azure-FDID. Nahraďte <YOUR-FRONT-DOOR-ID>ID služby Front Door, které jste si uložili dříve.

   Dále do pole přidejte název hostitele služby Azure Front Door (nikoli název allowedForwardedHosts hostitele Azure Static Web Apps). Pokud máte ve své instanci služby Front Door nakonfigurované vlastní domény, zahrňte je také do tohoto seznamu.

   V tomto příkladu nahraďte my-sitename.azurefd.net názvem hostitele služby Azure Front Door pro váš web.

3. U všech zabezpečených tras ve vaší aplikaci zakažte ukládání do mezipaměti azure Front Door přidáním "Cache-Control": "no-store" do definice hlavičky trasy.

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

Díky této konfiguraci už váš web není dostupný prostřednictvím vygenerovaného *.azurestaticapps.net názvu hostitele, ale výhradně prostřednictvím názvů hostitelů nakonfigurovaných v instanci služby Front Door.

Úvahy

• Vlastní domény: Teď, když služba Front Door spravuje váš web, už nepoužíváte funkci vlastní domény Azure Static Web Apps. Azure Front Door má samostatný proces pro přidání vlastní domény. Informace o přidání vlastní domény do služby Front Door Když do služby Front Door přidáte vlastní doménu, budete muset aktualizovat konfigurační soubor statické webové aplikace, aby ho zahrnul do allowedForwardedHosts seznamu.

• Statistika provozu: Azure Front Door ve výchozím nastavení konfiguruje sondy stavu , které můžou ovlivnit vaše statistiky provozu. Možná budete chtít upravit výchozí hodnoty sond stavu.

• Obsluha starých verzí: Když nasadíte aktualizace do existujících souborů ve statické webové aplikaci, azure Front Door může dál obsluhovat starší verze souborů, dokud nevyprší jejich platnost. Vyprázdněte mezipaměť služby Azure Front Door pro dotčené cesty, aby se obsluhovaly nejnovější soubory.

Vyčistěte zdroje

Pokud už nechcete používat prostředky vytvořené v tomto kurzu, odstraňte instance Azure Static Web Apps a Azure Front Door.

Další kroky

Přidání rozhraní API