다음을 통해 공유

Azure API Management를 사용하여 Azure Static Web Apps에서 API 지원

  • 아티클

Azure API Management는 기존 백 엔드 서비스에 대한 최신 API 게이트웨이를 만들 수 있는 서비스입니다.

Azure API Management 서비스를 정적 웹앱에 연결하면 /api로 시작하는 경로가 있는 정적 웹앱에 대한 모든 요청이 Azure API Management 서비스의 동일한 경로에 프록시됩니다.

Azure API Management 서비스는 동시에 여러 정적 웹앱에 연결할 수 있습니다. 연결된 각 정적 웹앱에 대해 API Management 제품이 만들어집니다. 제품에 추가된 모든 API는 연결된 정적 웹앱에서 사용할 수 있습니다.

모든 Azure API Management 가격 책정 계층을 Azure Static Web Apps에 사용할 수 있습니다.

Static Web Apps 대한 API 옵션에는 다음 Azure 서비스가 포함됩니다.

자세한 내용은 API 개요를 참조하세요.

참고 항목

Azure API Management와 통합하려면 Static Web Apps 표준 플랜이 필요합니다.

Static Web Apps 끌어오기 요청 환경에서는 백 엔드 통합이 지원되지 않습니다.

필수 조건

API Management 인스턴스를 정적 웹앱에 연결하려면 기존 Azure API Management 리소스와 정적 웹앱이 있어야 합니다.

리소스 설명
Azure API Management 아직 없는 경우 새 Azure API Management 서비스 인스턴스 만들기 가이드의 단계를 따릅니다.
기존 정적 웹앱 아직 없는 경우 시작 가이드의 단계에 따라 프레임워크 없음 정적 웹앱을 만듭니다.

예시

다음 위치를 통해 엔드포인트를 노출하는 기존 Azure API Management 인스턴스를 고려해 보세요.

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

연결되면 이 예제 URL에 표시된 것처럼 정적 웹앱에서 api 경로를 통해 동일한 엔드포인트에 액세스할 수 있습니다.

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

두 URL 모두 동일한 API 엔드포인트를 가리킵니다. API Management 인스턴스의 엔드포인트에는 /api 접두사가 있어야 합니다. 왜냐하면 Static Web Apps는 /api에 대한 요청을 일치시키고 연결된 리소스에 대한 전체 경로를 프록시하기 때문입니다.

Azure API Management 서비스를 정적 웹앱의 API 백 엔드로 연결하려면 다음 단계를 수행합니다.

  1. Azure Portal에서 정적 웹앱으로 이동합니다.

  2. 탐색 메뉴에서 API를 선택합니다.

  3. API Management 서비스를 연결할 환경을 찾습니다. 링크를 선택합니다.

  4. 백 엔드 리소스 종류에서 API Management를 선택합니다.

  5. 구독에서 연결하려는 Azure API Management 서비스가 포함된 구독을 선택합니다.

  6. 리소스 이름에서 Azure API Management 서비스를 선택합니다.

  7. 링크를 선택합니다.

Important

연결 프로세스가 완료되면 /api로 시작하는 경로에 대한 요청이 Azure API Management 서비스에 프록시됩니다. 그러나 API는 기본적으로 노출되지 않습니다. 사용하려는 API를 허용하도록 API Management 제품을 구성하려면 요청을 수신하도록 API 구성을 참조하세요.

요청을 수신하도록 API 구성

Azure API Management에는 API가 표시되는 방식을 정의하는 제품 기능이 있습니다. 연결 프로세스의 일부로 API Management 서비스는 Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)라는 제품으로 구성됩니다.

연결된 정적 웹앱에서 API를 사용할 수 있도록 하려면 제품에 추가합니다.

  1. 포털의 API Management 인스턴스 내에서 제품 탭을 선택합니다.

  2. Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) 제품을 선택합니다.

  3. + API 추가를 선택합니다.

  4. Static Web Apps에서 노출하려는 API를 선택한 다음 선택 링크를 선택합니다.

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.

또한 연결 프로세스는 API Management 서비스에 다음 구성을 자동으로 적용합니다.

  • 연결된 정적 웹앱과 관련된 제품은 구독을 요구하도록 구성됩니다.
  • Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>이라는 API Management 구독이 만들어지고 이름이 같은 제품으로 범위가 지정됩니다.
  • 연결된 정적 웹앱의 유효한 액세스 토큰을 포함하는 요청만 허용하도록 인바운드 validate-jwt 정책이 제품에 추가됩니다.
  • 연결된 정적 웹앱은 API Management 서비스에 대한 요청을 프록시할 때 구독의 기본 키와 유효한 액세스 토큰을 포함하도록 구성됩니다.

Important

validate-jwt 정책을 변경하거나 구독의 기본 키를 다시 생성하면 정적 웹앱이 요청을 API Management 서비스로 프록시할 수 없습니다. 연결된 동안에는 정적 웹앱과 관련된 구독 또는 제품을 수정하거나 삭제하지 마세요.

정적 웹앱에서 Azure API Management 서비스의 연결을 해제하려면 다음 단계를 수행합니다.

  1. Azure Portal에서 정적 웹앱으로 이동합니다.

  2. 연결 해제할 환경을 찾고 API Management 서비스 이름을 선택합니다.

  3. 연결 해제를 선택합니다.

연결 해제 프로세스가 완료되면 /api/로 시작하는 경로에 대한 요청이 더 이상 API Management 서비스에 프록시되지 않습니다.

참고 항목

연결된 정적 웹앱과 관련된 API Management 제품 및 구독은 자동으로 삭제되지 않습니다. API Management 서비스에서 삭제할 수 있습니다.

문제 해결

API가 Static Web Apps 리소스용으로 만들어진 API Management 제품에 연결되어 있지 않은 경우 Static Web Apps의 /api 경로에 액세스하면 API Management에서 다음 오류가 반환됩니다.

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

이 오류를 해결하려면 요청을 수신하도록 API 구성 섹션에 설명된 대로 Static Web Apps 내에서 이를 위해 만들어진 제품에 노출하려는 API를 구성합니다.

다음 단계

API 개요