다음을 통해 공유

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

  • 아티클

Azure App Service는 서버에서 코드를 실행하는 웹 애플리케이션을 호스팅하기 위한 관리되는 플랫폼입니다. Azure App Service는 Node.js, ASP.NET Core, PHP, Java 및 Python을 비롯한 많은 런타임 및 프레임워크를 지원합니다.

Azure App Service 웹앱을 정적 웹앱에 연결하면 /api로 시작하는 경로가 있는 정적 웹앱에 대한 요청이 Azure App Service 앱의 동일한 경로에 프록시됩니다.

기본적으로 App Service 앱이 정적 웹앱에 연결된 경우 App Service 앱은 연결된 정적 웹앱을 통해 프록시된 요청만 수락합니다. Azure App Service 앱은 한 번에 단일 정적 웹앱에만 연결할 수 있습니다.

모든 Azure App Service 호스팅 플랜은 Azure Static Web Apps로 사용할 수 있습니다.

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

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

참고 항목

Azure App Service와 통합하려면 Static Web Apps 표준 계획이 필요합니다.

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

필수 조건

App Service를 정적 웹앱에 연결하려면 기존 App Service 리소스와 정적 웹앱이 있어야 합니다.

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

예시

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

https://my-web-app.azurewebsites.net/api/getProducts

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

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

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

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

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

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

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

  4. 백 엔드 리소스 종류에서 웹앱을 선택합니다.

  5. 구독에서 연결할 Azure App Service 앱이 포함된 구독을 선택합니다.

  6. 리소스 이름에서 Azure App Service 앱을 선택합니다.

  7. 링크를 선택합니다.

연결 프로세스가 완료되면 /api로 시작하는 경로에 대한 요청이 연결된 App Service 앱에 프록시됩니다.

Azure App Service에 대한 액세스 관리

App Service 앱은 정적 웹앱을 통해 프록시되는 트래픽만 허용하는 Azure Static Web Apps (Linked)라는 ID 공급자로 구성됩니다. 다른 애플리케이션에서 App Service 앱에 액세스할 수 있도록 하려면 인증 구성을 업데이트하여 다른 ID 공급자를 추가하거나 인증되지 않은 액세스를 허용하도록 보안 설정을 변경합니다.

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

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

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

  3. 연결을 해제할 환경을 찾고 웹앱 이름을 선택합니다.

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

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

참고 항목

App Service 앱이 익명 트래픽에 실수로 노출되지 않도록 연결 프로세스에서 만든 ID 공급자는 자동으로 삭제되지 않습니다. App Service 앱의 인증 설정에서 Azure Static Web Apps(연결됨)라는 ID 공급자를 삭제할 수 있습니다.

App Service 리소스에서 인증 제거

App Service 리소스가 익명 트래픽을 수신할 수 있도록 하려면 다음 단계에 따라 ID 공급자를 제거합니다.

  1. Azure Portal에서 App Service 리소스로 이동합니다.

  2. 탐색 메뉴에서 인증을 선택합니다.

  3. ID 공급자 목록에서 Static Web Apps 리소스와 관련된 ID 공급자를 삭제합니다.

  4. 인증을 제거하고 App Service 리소스에 대한 익명 트래픽을 허용하려면 인증 제거를 선택합니다.

이제 App Service 리소스가 익명 트래픽을 수신할 수 있습니다.

다음 단계

API 개요