Megosztás a következőn keresztül:


API-támogatás az Azure Static Web Appsben az Azure API Management használatával

Az Azure API Management egy olyan szolgáltatás, amely lehetővé teszi egy modern API-átjáró létrehozását a meglévő háttérszolgáltatásokhoz.

Amikor összekapcsolja az Azure API Management szolgáltatást a statikus webalkalmazással, a statikus webalkalmazáshoz érkező kérések egy olyan útvonallal /api kezdődnek, amely az Azure API Management szolgáltatásban ugyanahhoz az útvonalhoz kapcsolódik.

Az Azure API Management szolgáltatás egyszerre több statikus webalkalmazáshoz is csatolható. Minden csatolt statikus webalkalmazáshoz létrejön egy API Management-termék. A termékhez hozzáadott API-k elérhetők a társított statikus webalkalmazás számára.

Az Azure API Management összes tarifacsomagja elérhető az Azure Static Web Appshez.

A Static Web Apps API-beállításai a következő Azure-szolgáltatásokat tartalmazzák:

További információkért tekintse meg az API-k áttekintését .

Megjegyzés:

Az Azure API Managementtel való integrációhoz a Static Web Apps Standard csomag szükséges.

A háttérintegráció nem támogatott a Static Web Apps lekéréses kérelmek környezetében.

Előfeltételek

Ahhoz, hogy egy API management-példányt a statikus webalkalmazáshoz csatoljon, rendelkeznie kell egy meglévő Azure API Management-erőforrással és egy statikus webalkalmazással.

Resource Leírás
Azure API Management Ha még nem rendelkezik ilyen szolgáltatással, kövesse az Új Azure API Management szolgáltatáspéldány létrehozása című útmutató lépéseit.
Meglévő statikus webalkalmazás Ha még nem rendelkezik ilyen webalkalmazással, kövesse az első lépések útmutatójának lépéseit a No Framework statikus webalkalmazás létrehozásához.

Example

Fontolja meg egy meglévő Azure API Management-példányt, amely az alábbi helyen teszi elérhetővé a végpontot.

https://my-api-management-instance.azure-api.net/api/getProducts

A csatolás után ugyanazt a végpontot a api statikus webalkalmazás elérési útján érheti el, ahogyan az ebben a példában látható URL-címen látható.

https://red-sea-123.azurestaticapps.net/api/getProducts

Mindkét URL ugyanarra az API-végpontra mutat. Az API Management-példány végpontjának rendelkeznie kell az /api előtaggal, mivel a Static Web Apps megfelel a csatolt erőforrás teljes elérési útjának, és a statikus webalkalmazások megegyeznek a kérésekkel /api , és ki vannak állítva.

Ha statikus webalkalmazás API-háttérrendszereként szeretne összekapcsolni egy Azure API Management szolgáltatást, kövesse az alábbi lépéseket:

  1. Az Azure Portalon nyissa meg a statikus webalkalmazást.

  2. Válassza ki az API-kat a navigációs menüből.

  3. Keresse meg azt a környezetet, amelyhez az API Management szolgáltatást hozzá szeretné kapcsolni. Válassza a Hivatkozás lehetőséget.

  4. A háttérbeli erőforrástípusban válassza az API Management lehetőséget.

  5. Az Előfizetésben válassza ki a csatolni kívánt Azure API Management szolgáltatást tartalmazó előfizetést.

  6. Az erőforrás nevében válassza ki az Azure API Management szolgáltatást.

  7. Válassza a Hivatkozás lehetőséget.

Fontos

Ha a csatolási folyamat befejeződött, a rendszer a kezdeti /api útvonalakra irányuló kérelmeket az Azure API Management szolgáltatáshoz irányítja. Alapértelmezés szerint azonban nem érhetők el API-k. Lásd: API-k konfigurálása az API Management-termék konfigurálására vonatkozó kérések fogadásához a használni kívánt API-k engedélyezéséhez.

API-k konfigurálása kérések fogadására

Az Azure API Management egy termékfunkcióval rendelkezik, amely meghatározza az API-k felületének módját. A csatolási folyamat részeként az API Management szolgáltatás egy nevű termékkel Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)van konfigurálva.

Ha elérhetővé szeretné tenni az API-kat a csatolt statikus webalkalmazás számára, vegye fel őket a termékbe.

  1. A portál API Management-példányán belül válassza a Termékek lapot.

  2. Válassza ki a Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) terméket.

  3. Válassza az + API hozzáadása lehetőséget.

  4. Válassza ki a statikus webalkalmazásokból elérhetővé tenni kívánt API-kat, majd válassza a Kiválasztás hivatkozást.

Screenshot of the API Management Products API blade in the Azure portal, showing how to add an API to the product created for the Static Web Apps resource.

A csatolási folyamat a következő konfigurációt is automatikusan alkalmazza az API Management szolgáltatásra:

  • A csatolt statikus webalkalmazáshoz társított termék úgy van konfigurálva, hogy előfizetést igényeljen.
  • Létrejön egy API Management-előfizetés, Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> amely azonos nevű termékre terjed ki.
  • A rendszer egy bejövő validate-jwt szabályzatot ad hozzá a termékhez, amely csak a csatolt statikus webalkalmazás érvényes hozzáférési jogkivonatát tartalmazó kérelmeket engedélyezi.
  • A csatolt statikus webalkalmazás úgy van konfigurálva, hogy tartalmazza az előfizetés elsődleges kulcsát és egy érvényes hozzáférési jogkivonatot az API Management szolgáltatáshoz irányuló kérelmek proxyzásakor.

Fontos

A validate-jwt szabályzat módosítása vagy az előfizetés elsődleges kulcsának újragenerálása megakadályozza, hogy a statikus webalkalmazás proxy-kérelmeket küldjön az API Management szolgáltatásnak. Ne módosítsa vagy törölje a statikus webalkalmazáshoz társított előfizetést vagy terméket a csatolásuk során.

Az Azure API Management szolgáltatás statikus webalkalmazásból való leválasztásához kövesse az alábbi lépéseket:

  1. Az Azure Portalon nyissa meg a statikus webalkalmazást.

  2. Keresse meg a leválasztani kívánt környezetet, és válassza ki az API Management szolgáltatás nevét.

  3. Válassza a Kapcsolat megszüntetése lehetőséget.

Ha a leválasztási folyamat befejeződött, a rendszer a következővel kezdődő /api/ útvonalakra irányuló kéréseket már nem irányítja át az API Management szolgáltatásba.

Megjegyzés:

A csatolt statikus webalkalmazáshoz társított API Management-termék és -előfizetés nem törlődik automatikusan. Törölheti őket az API Management szolgáltatásból.

Hibaelhárítás

Ha az API-k nincsenek társítva a Static Web Apps-erőforráshoz létrehozott API Management-termékhez, a statikus webalkalmazás útvonalának elérése /api az alábbi hibaüzenetet adja vissza az API managementtől.

{
  "statusCode": 401,
  "message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}

A hiba megoldásához konfigurálja a statikus webalkalmazásokon belül elérhetővé tenni kívánt API-kat a számára létrehozott termék számára, a kérelmek fogadásához az API-k konfigurálása szakaszban leírtak szerint.

Következő lépések