Azure Static Web Apps에 고유한 기능 가져 오기

  • 아티클

Azure Static Web Apps는 데이터 및 서비스용 백 엔드 API에 의존하는 프런트 엔드 웹 애플리케이션을 빌드할 수 있도록 API 통합을 제공합니다. 두 가지 API 통합 옵션은 관리 함수와 Bring Your Own 백 엔드입니다. 이러한 옵션 간의 차이점에 대한 자세한 내용은 개요를 참조하세요.

이 문서에서는 Azure Static Web Apps 리소스에 기존 Azure Functions 앱을 연결하는 방법을 보여 줍니다.

참고 항목

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

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

필수 조건

함수 앱을 정적 웹앱에 연결하려면 기존 Azure Functions 리소스와 정적 웹앱이 있어야 합니다.

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

예시

다음 위치를 통해 엔드포인트를 노출하는 기존 Azure Functions 앱을 고려합니다.

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

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

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

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

Static Web Apps 리소스에서 관리 함수 제거(있는 경우)

기존 Functions 앱을 연결하기 전에 먼저 정적 웹앱의 구성을 조정하여 관리되는 함수가 있는 경우 이를 제거해야 합니다.

  1. 워크플로 구성 파일에서 api_location 값을 빈 문자열("")로 설정합니다.

  1. Azure Portal에서 Static Web Apps 인스턴스를 엽니다.

  2. 설정 메뉴에서 API를 선택합니다.

  3. 프로덕션 행에서 링크를 선택하여 새 백 엔드 연결 창을 엽니다.

    다음 설정을 입력합니다.

    설정 값
    백 엔드 리소스 종류 함수 앱을 선택합니다.
    구독 Azure 구독 이름을 선택합니다.
    리소스 이름 Azure Functions 앱 이름을 선택합니다.
    백 엔드 슬롯 Azure Function의 슬롯 이름을 선택합니다.

  4. 링크를 선택합니다.

이제 Azure Functions 앱이 정적 웹앱의 /api 경로에 매핑됩니다.

Important

기존 함수 애플리케이션을 연결하기 전에 워크플로 구성 파일에서 api_location 값을 빈 문자열("")로 설정해야 합니다. 또한 호출은 외부 함수 앱이 기본 api 경로 접두사를 유지한다고 가정합니다. 많은 앱이 host.json에서 이 접두사를 제거합니다. 접두사가 구성에 있는지 확인합니다. 그렇지 않으면 호출이 실패합니다.

배포

Azure Functions 앱에 대한 배포 워크플로를 설정해야 합니다.

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

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

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

  3. 연결을 해제하려는 환경을 찾고 함수 앱 이름을 선택합니다.

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

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

참고 항목

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

Azure Functions 리소스에서 인증 제거

Azure Functions 앱이 익명 트래픽을 수신할 수 있도록 하려면 다음 단계에 따라 ID 공급자를 제거합니다.

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

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

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

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

이제 함수 앱이 익명 트래픽을 수신할 수 있습니다.

보안 제약 조건

  • 인증 및 권한 부여: 기존 함수 앱에 인증 및 권한 부여 정책이 아직 설정되지 않은 경우 정적 웹앱은 API에 단독으로 액세스할 수 있습니다. 다른 애플리케이션에서 함수 앱에 액세스할 수 있도록 하려면 다른 ID 공급자를 추가하거나 인증되지 않은 액세스를 허용하도록 보안 설정을 변경합니다.

    참고 항목

    연결된 함수 앱에서 인증 및 권한 부여를 사용하도록 설정하는 경우 Azure App Service 인증 및 권한 부여 공급자 버전 2를 사용해야 합니다.

  • 필요한 퍼블릭 액세스 가능성: 기존 함수 앱은 다음 보안 구성을 적용할 필요가 없습니다.

    • 함수 앱의 IP 주소 제한
    • 프라이빗 링크 또는 서비스 엔드포인트를 통해 트래픽 제한

  • 함수 액세스 키: 함수에 액세스 키가 필요한 경우 정적 앱에서 API로의 호출에 해당 키를 제공해야 합니다.

제한 사항

  • 단일 정적 웹앱에서는 하나의 Azure Functions 앱만 사용할 수 있습니다.
  • 워크플로 구성의 api_location 값을 빈 문자열로 설정해야 합니다.
  • Static Web Apps 끌어오기 요청 환경에서는 지원되지 않습니다.
  • Azure Functions 앱은 다양한 트리거에 응답할 수 있지만 정적 웹앱은 Http 엔드포인트를 통해서만 함수에 액세스할 수 있습니다.

다음 단계

API 추가