Oktatóanyag: Az Azure Front Door konfigurálása az Azure Static Web Appshez

Ha az Azure Front Doort cdN-ként adja hozzá a statikus webalkalmazáshoz, biztonságos belépési pont áll a webalkalmazások gyors kézbesítéséhez.

A Static Web Apps használatával két lehetőség közül választhat az Azure Front Door integrálásához. Az Azure Front Doort a statikus webalkalmazáshoz úgy adhatja hozzá, hogy engedélyezi a nagyvállalati szintű peremhálózatot, amely az Azure Front Door és a Static Web Apps felügyelt integrációja. Másik lehetőségként manuálisan is konfigurálhat egy Azure Front Door-erőforrást a statikus webalkalmazás előtt.

Vegye figyelembe az alábbi előnyöket annak meghatározásához, hogy melyik lehetőség felel meg a legjobban az Igényeinek.

A nagyvállalati szintű peremhálózat a következő lehetőségeket biztosítja:

• Nulla konfigurációs módosítás
• Nincs állásidő
• Automatikusan felügyelt SSL-tanúsítványok és egyéni tartományok

Az Azure Front Door manuális beállítása teljes körű vezérlést biztosít a CDN-konfiguráció felett, beleértve a következőket:

• Forgalom eredetének korlátozása forrás szerint
• Webalkalmazási tűzfal (WAF) hozzáadása
• Útvonal több alkalmazás között
• Az Azure Front Door fejlettebb funkcióinak használata

Ebben az oktatóanyagban megismerkedhet az Azure Front Door statikus webalkalmazáshoz való hozzáadásával.

Előfeltételek

• A statikus webalkalmazáshoz konfigurált egyéni tartomány élettartammal (TTL) 48 óránál kevesebbre van állítva.
• Az Azure Static Web Appsben üzembe helyezett alkalmazás, amely a Standard üzemeltetési csomagot használja.

Vállalati szintű peremhálózat engedélyezése a Static Web Apps-erőforráson

Azure Portal

1. Nyissa meg a statikus webalkalmazást az Azure Portalon.

2. A bal oldali menüben válassza a Nagyvállalati szintű él lehetőséget.

3. Jelölje be a nagyvállalati szintű él engedélyezése jelölőnégyzetet.

4. Válassza a Mentés parancsot.

5. A mentés megerősítéséhez kattintson az OK gombra .

   A funkció engedélyezése további költségekkel jár.

Azure CLI

az extension add -n enterprise-edge

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

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. Fiók létrehozása ingyenesen
• Azure Static Web Apps-webhely. Az első statikus webalkalmazás létrehozása
• Azure Static Web Apps Standard és Azure Front Door Standard/ Premium csomagok. További információ: Static Web Apps díjszabása
• Fontolja meg a nagyvállalati szintű él használatát a gyorsabb oldalbetöltéshez, a fokozott biztonsághoz és a globális alkalmazásokhoz való optimalizált megbízhatósághoz.

Azure Front Door létrehozása

1. Jelentkezzen be az Azure Portalra.

2. A kezdőlapon vagy az Azure-menüben válassza az + Erőforrás létrehozása lehetőséget. Keressen Front Door- és CDN-profilokat, majd válassza a Front Door- és CDN-profilok létrehozása lehetőséget>.

3. Az Ajánlatok összehasonlítása lapon válassza a Gyors létrehozás, majd a Folytatás lehetőséget a Front Door létrehozásához.

4. A Front Door profil létrehozása lapon adja meg vagy válassza ki a következő beállításokat.

   Beállítás	Value
   Subscription	Válassza ki az Azure-előfizetését.
   Erőforráscsoport	Adja meg az erőforráscsoport nevét. Ez a név gyakran ugyanaz a csoportnév, amelyet a statikus webalkalmazás használ.
   Erőforráscsoport helye	Ha új erőforráscsoportot hoz létre, adja meg a legközelebbi helyet.
   Name	Írja be a my-static-web-app-front-door parancsot.
   Szint	Válassza a Standard lehetőséget.
   Végpont neve	Adjon meg egy egyedi nevet a Front Door-gazdagépnek.
   Forrás típusa	Válassza a Statikus webalkalmazás lehetőséget.
   Eredeti állomás neve	Válassza ki a statikus webalkalmazás gazdagépnevét a legördülő listában.
   Gyorsítótárazás	Jelölje be a Gyorsítótárazás engedélyezése jelölőnégyzetet.
   Lekérdezési sztringek gyorsítótárazásának működése	Válassza a Lekérdezési sztring használata lehetőséget
   Compression	Válassza a Tömörítés engedélyezése lehetőséget
   WAF-szabályzat	Ha engedélyezni szeretné ezt a funkciót, válassza az Új létrehozása lehetőséget, vagy válasszon ki egy meglévő webalkalmazási tűzfalszabályzatot a legördülő listából.

   Megjegyzés:

   Azure Front Door-profil létrehozásakor ki kell választania egy forrást abból az előfizetésből, amelyben a Front Door létrejön.

5. Válassza az Áttekintés + létrehozás, majd a Létrehozás lehetőséget. A létrehozási folyamat eltarthat néhány percig.

6. Amikor az üzembe helyezés befejeződik, válassza az Erőforrás megnyitása lehetőséget.

7. Adjon hozzá egy feltételt.

Gyorsítótár letiltása hitelesítési munkafolyamathoz

Megjegyzés:

A gyorsítótár lejárata, a gyorsítótárkulcs lekérdezési sztringje és a forráscsoport felülbírálási műveletei elavultak. Ezek a műveletek továbbra is normálisan működnek, de a szabálykészlet nem módosítható. A szabálykészlet módosítása előtt cserélje le ezeket a felülbírálásokat új útvonalkonfigurációs felülbírálási műveletekre.

Adja hozzá az alábbi beállításokat, hogy letiltsa a Front Door gyorsítótárazási szabályzatait a hitelesítéssel és az engedélyezéssel kapcsolatos lapok gyorsítótárazásához.

Feltétel hozzáadása

1. A Front Doorban a Gépház alatt válassza a Szabálykészlet lehetőséget.

2. Select Add.

3. A Szabálykészlet neve szövegmezőbe írja be a Biztonság kifejezést.

4. A Szabálynév szövegmezőbe írja be a NoCacheAuthRequests nevet.

5. Válassza a Feltétel hozzáadása lehetőséget.

6. Válassza a Kérelem elérési útját.

7. Válassza az Operátor legördülő menüt, majd kezdje a következővel:

8. Válassza a Szerkesztés hivatkozást az Érték szövegmező felett.

9. Írja be /.auth a szövegmezőbe, majd válassza a Frissítés lehetőséget.

10. A Sztringátalakítás legördülő listából nem választhatja ki a kívánt beállításokat.

Művelet hozzáadása

1. Válassza a Művelet hozzáadása legördülő menüt.

2. Válassza az Útvonalkonfiguráció felülbírálása lehetőséget.

3. A Gyorsítótárazás legördülő listában válassza a Letiltva lehetőséget.

4. Válassza a Mentés parancsot.

Szabály társítása végponthoz

A szabály létrehozása után alkalmazza a szabályt egy Front Door-végpontra.

1. A Front Doorban válassza a Szabálykészlet, majd a Társítás nélküli hivatkozás lehetőséget.

   

2. Válassza ki azt a végpontnevet, amelyre alkalmazni szeretné a gyorsítótárazási szabályt, majd válassza a Tovább gombot.

3. Válassza a Társítás lehetőséget.

   

A front door azonosító másolása

Az alábbi lépésekkel másolja ki a Front Door-példány egyedi azonosítóját.

1. A Front Doorban válassza az Áttekintés hivatkozást a bal oldali navigációs sávon.

2. Másolja ki a Front Door id címkével ellátott értéket, és illessze be egy fájlba későbbi használatra.

   

Statikus webalkalmazás konfigurációjának frissítése

A Front Door integrációjának befejezéséhez frissítenie kell az alkalmazáskonfigurációs fájlt a következő funkciók végrehajtásához:

• A webhelyre irányuló forgalom korlátozása csak a Front Dooron keresztül
• A webhelyre irányuló forgalom korlátozása csak a Front Door-példányból
• Határozza meg, hogy mely tartományok férhetnek hozzá a webhelyhez
• Biztonságos útvonalak gyorsítótárazásának letiltása

Nyissa meg a webhely staticwebapp.config.json fájlját, és végezze el a következő módosításokat.

1. Korlátozza a forgalmat, hogy csak a Front Doort használja, ha hozzáadja a következő szakaszt a konfigurációs fájlhoz:

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

2. Ha meg szeretné határozni, hogy mely Azure Front Door-példányok és tartományok férhetnek hozzá a webhelyhez, adja hozzá a szakaszt forwardingGateway .

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

   Először konfigurálja az alkalmazást úgy, hogy csak a Front Door-példányból érkező forgalmat engedélyezze. Minden háttérkérelemben a Front Door automatikusan hozzáad egy X-Azure-FDID fejlécet, amely tartalmazza a Front Door-példány azonosítóját. Ha úgy konfigurálja a statikus webalkalmazást, hogy megkövetelje ezt a fejlécet, azzal kizárólag a Front Door-példányra korlátozza a forgalmat. forwardingGateway A konfigurációs fájl szakaszában adja hozzá a szakasztrequiredHeaders, és határozza meg a fejlécetX-Azure-FDID. Cserélje le <YOUR-FRONT-DOOR-ID> a korábban félretett Front Door-azonosítóra .

   Ezután adja hozzá az Azure Front Door gazdagépnevét (nem az Azure Static Web Apps gazdagépnevét) a allowedForwardedHosts tömbhöz. Ha egyéni tartományokat konfigurált a Front Door-példányban, vegye fel őket ebbe a listába.

   Ebben a példában cserélje le my-sitename.azurefd.net a webhely Azure Front Door-állomásnevét.

3. Az alkalmazás összes biztonságos útvonalához tiltsa le az Azure Front Door gyorsítótárazását az útvonalfejléc definíciójának hozzáadásával "Cache-Control": "no-store" .

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

Ezzel a konfigurációval a webhely már nem a létrehozott *.azurestaticapps.net gazdagépnéven keresztül érhető el, hanem kizárólag a Front Door-példányban konfigurált gazdagépneveken keresztül.

Considerations

• Egyéni tartományok: Most, hogy a Front Door felügyeli a webhelyet, már nem használja az Azure Static Web Apps egyéni tartományfunkcióját. Az Azure Front Door külön eljárással rendelkezik egy egyéni tartomány hozzáadásához. Tekintse meg az Egyéni tartomány hozzáadása a Front Doorhoz című témakört. Amikor egyéni tartományt ad hozzá a Front Doorhoz, frissítenie kell a statikus webalkalmazás konfigurációs fájlját, hogy az szerepeljen a allowedForwardedHosts listában.

• Forgalmi statisztikák: Az Azure Front Door alapértelmezés szerint olyan állapotmintákat konfigurál, amelyek hatással lehetnek a forgalmi statisztikákra. Érdemes lehet szerkeszteni az állapotminták alapértelmezett értékeit.

• Régi verziók kiszolgálása: Ha frissítéseket helyez üzembe a statikus webalkalmazásban meglévő fájlokra, az Azure Front Door továbbra is kiszolgálhatja a fájlok régebbi verzióit, amíg az élettartamuk el nem jár. Törölje az Azure Front Door gyorsítótárát az érintett útvonalakhoz, hogy a legújabb fájlok legyenek kézbesítve.

Clean up resources

Ha már nem szeretné használni az oktatóanyagban létrehozott erőforrásokat, törölje az Azure Static Web Apps és az Azure Front Door-példányokat.

Következő lépések

API hozzáadása