Udostępnij za pośrednictwem


Obsługa interfejsu API w usłudze Azure Static Web Apps za pomocą usługi Azure API Management

Azure API Management to usługa, która umożliwia tworzenie nowoczesnej bramy interfejsu API dla istniejących usług zaplecza.

Po połączeniu usługi Azure API Management ze statyczną aplikacją internetową wszystkie żądania do statycznej aplikacji internetowej z trasą rozpoczynającą się od /api są kierowane do tej samej trasy w usłudze Azure API Management.

Usługa Azure API Management może być jednocześnie połączona z wieloma statycznych aplikacjami internetowymi. Dla każdej połączonej statycznej aplikacji internetowej jest tworzony produkt API Management. Wszystkie interfejsy API dodane do produktu są dostępne dla skojarzonej statycznej aplikacji internetowej.

Wszystkie warstwy cenowe usługi Azure API Management są dostępne do użycia z usługą Azure Static Web Apps.

Opcje interfejsu API dla usługi Static Web Apps obejmują następujące usługi platformy Azure:

Aby uzyskać więcej informacji, zobacz omówienie interfejsów API.

Uwaga

Integracja z usługą Azure API Management wymaga planu Static Web Apps Standard.

Integracja zaplecza nie jest obsługiwana w środowiskach żądań ściągnięcia usługi Static Web Apps.

Wymagania wstępne

Aby połączyć wystąpienie usługi API Management ze statyczną aplikacją internetową, musisz mieć istniejący zasób usługi Azure API Management i statyczną aplikację internetową.

Zasób opis
Azure API Management Jeśli jeszcze go nie masz, wykonaj kroki opisane w przewodniku Tworzenie nowego wystąpienia usługi Azure API Management.
Istniejąca statyczna aplikacja internetowa Jeśli jeszcze go nie masz, wykonaj kroki opisane w przewodniku wprowadzającym , aby utworzyć statyczną aplikację internetową No Framework .

Przykład

Rozważ istniejące wystąpienie usługi Azure API Management, które uwidacznia punkt końcowy za pośrednictwem następującej lokalizacji.

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

Po połączeniu możesz uzyskać dostęp do tego samego punktu końcowego za pośrednictwem api ścieżki ze statycznej aplikacji internetowej, jak pokazano w tym przykładowym adresie URL.

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

Oba adresy URL wskazują ten sam punkt końcowy interfejsu API. Punkt końcowy w wystąpieniu usługi API Management musi mieć /api prefiks, ponieważ usługa Static Web Apps pasuje do żądań wysyłanych do /api i serwerów proxy całej ścieżki do połączonego zasobu.

Aby połączyć usługę Azure API Management jako zaplecze interfejsu API dla statycznej aplikacji internetowej, wykonaj następujące kroki:

  1. W witrynie Azure Portal przejdź do statycznej aplikacji internetowej.

  2. Wybierz pozycję Interfejsy API z menu nawigacji.

  3. Znajdź środowisko, z którym chcesz połączyć usługę API Management. Wybierz Łącze.

  4. W polu Typ zasobu zaplecza wybierz pozycję API Management.

  5. W obszarze Subskrypcja wybierz subskrypcję zawierającą usługę Azure API Management, którą chcesz połączyć.

  6. W polu Nazwa zasobu wybierz usługę Azure API Management.

  7. Wybierz Łącze.

Ważne

Po zakończeniu procesu łączenia żądania do tras rozpoczynających się od /api są kierowane do usługi Azure API Management. Jednak żadne interfejsy API nie są domyślnie widoczne. Zobacz Konfigurowanie interfejsów API do odbierania żądań w celu skonfigurowania produktu API Management w celu zezwolenia na używanie interfejsów API.

Konfigurowanie interfejsów API w celu odbierania żądań

Usługa Azure API Management oferuje funkcję produktów , która definiuje sposób, w jaki interfejsy API są udostępniane. W ramach procesu łączenia usługa API Management jest skonfigurowana przy użyciu produktu o nazwie Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).

Aby udostępnić interfejsy API połączonej statycznej aplikacji internetowej, dodaj je do produktu.

  1. W wystąpieniu usługi API Management w portalu wybierz kartę Produkty .

  2. Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) Wybierz produkt.

  3. Wybierz pozycję + Dodaj interfejs API.

  4. Wybierz interfejsy API, które chcesz uwidocznić w usłudze Static Web Apps, a następnie wybierz link Wybierz .

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.

Proces łączenia automatycznie stosuje również następującą konfigurację do usługi API Management:

  • Produkt skojarzony z połączoną statyczną aplikacją internetową jest skonfigurowany tak, aby wymagał subskrypcji.
  • Zostanie utworzona subskrypcja usługi API Management o nazwie i o określonym Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> zakresie dla produktu o tej samej nazwie.
  • Do produktu są dodawane zasady validate-jwt dla ruchu przychodzącego, aby zezwalać tylko na żądania zawierające prawidłowy token dostępu z połączonej statycznej aplikacji internetowej.
  • Połączona statyczna aplikacja internetowa jest skonfigurowana tak, aby zawierała klucz podstawowy subskrypcji i prawidłowy token dostępu podczas proxy żądań do usługi API Management.

Ważne

Zmiana zasad validate-jwt lub ponowne wygenerowanie klucza podstawowego subskrypcji uniemożliwia statycznej aplikacji internetowej tworzenie serwerów proxy żądań do usługi API Management. Nie należy modyfikować ani usuwać subskrypcji ani produktu skojarzonego ze statyczną aplikacją internetową, gdy są połączone.

Aby odłączyć usługę Azure API Management ze statycznej aplikacji internetowej, wykonaj następujące kroki:

  1. W witrynie Azure Portal przejdź do statycznej aplikacji internetowej.

  2. Znajdź środowisko, które chcesz odłączyć, i wybierz nazwę usługi API Management.

  3. Wybierz pozycję Odłącz.

Po zakończeniu procesu odłączania żądania do tras rozpoczynających się od /api/ nie są już kierowane do usługi API Management.

Uwaga

Produkt i subskrypcja usługi API Management skojarzone z połączoną statyczną aplikacją internetową nie są automatycznie usuwane. Można je usunąć z usługi API Management.

Rozwiązywanie problemów

Jeśli interfejsy API nie są skojarzone z produktem API Management utworzonym dla zasobu usługi Static Web Apps, uzyskiwanie /api dostępu do trasy w statycznej aplikacji internetowej zwraca następujący błąd z usługi API Management.

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

Aby rozwiązać ten problem, skonfiguruj interfejsy API, które chcesz uwidocznić w usłudze Static Web Apps, do utworzonego dla niego produktu, zgodnie z opisem w sekcji Konfigurowanie interfejsów API do odbierania żądań .

Następne kroki