Kurz: 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 tak, že povolíte hraniční zařízení na podnikové úrovni, spravovanou integraci služby Azure Front Door se statickými webovými aplikacemi. Případně můžete prostředek Služby Azure Front Door nakonfigurovat ručně před statickou webovou aplikací.

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

Edge na podnikové úrovni poskytuje:

• 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í původu provozu podle 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

• 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í hraničních zařízení 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é nabídce vyberte okraj na podnikové úrovni.

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

4. Zvolte 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
• Web 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 k portálu Azure.

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 položku 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.
   Ukládání do mezipaměti	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	Výběr možnosti Použít řetězec dotazu
   Komprese	Výběr možnosti 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 položku Zkontrolovat + vytvořit a potom vyberte Vytvořit. Dokončení procesu vytváření může trvat několik minut.

6. Po dokončení nasazení vyberte Přejít na prostředek.

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 sady pravidel nahraďte tyto přepsání novými akcemi přepsání konfigurace trasy.

Přidejte následující nastavení, která zakáže zásady ukládání do mezipaměti služby Front Door, aby se pokusily ukládat do mezipaměti ověřování a stránky související s autorizací.

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. V rozevíracím seznamu Transformace řetězců vyberte žá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. Zvolte Uložit.

Přidružení pravidla 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:

• Omezení provozu na web pouze prostřednictvím služby 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 webu 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. Do oddílu v konfiguračním forwardingGateway souboru přidejte requiredHeaders oddíl a definujte hlavičku X-Azure-FDID . Nahraďte <YOUR-FRONT-DOOR-ID> ID služby Front Door, které jste si vyhradili 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.

Důležité informace

• 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 ovlivněné cesty, abyste zajistili, že se budou obsluhovat nejnovější soubory.

Vyčištění prostředků

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