자습서: Azure Static Web Apps에 대한 CDN 구성

아티클
10/01/2024

Azure Front Door를 정적 웹앱용 CDN으로 추가하면 웹 애플리케이션을 빠르게 제공하기 위한 보안 진입점의 이점을 활용할 수 있습니다.

Static Web Apps를 사용하면 Azure Front Door와 통합할 수 있는 두 가지 옵션이 있습니다. Azure Front Door와 Static Web Apps의 관리 통합인 엔터프라이즈급 에지를 사용하여 Static Web Apps에 Azure Front Door를 추가할 수 있습니다. 또는 정적 웹앱 앞에서 Azure Front Door 리소스를 수동으로 구성할 수 있습니다.

사용자의 요구 사항에 가장 적합한 옵션을 결정하려면 아래 장점을 고려합니다.

엔터프라이즈급 에지는 다음을 제공합니다.

구성 변경이 없음
가동 중지 시간이 없음
자동으로 관리되는 SSL 인증 및 사용자 지정 도메인

수동 Azure Front Door 설정을 통해 다음과 같은 기능을 포함하여 CDN 구성을 완전히 제어할 수 있습니다.

원본별 트래픽 원본 제한
WAF(웹 애플리케이션 방화벽) 추가
여러 애플리케이션에 걸쳐 라우팅
Azure Front Door의 고급 기능 사용

이 자습서에서는 정적 웹앱에 Azure Front Door를 추가하는 방법을 알아봅니다.

필수 조건

TTL(Time to Live)이 48시간 미만으로 설정된 정적 웹앱에 대해 구성된 사용자 지정 도메인입니다.
표준 호스팅 계획을 사용하는 Azure Static Web Apps로 배포된 애플리케이션

Static Web Apps 리소스에서 엔터프라이즈급 에지를 사용하도록 설정합니다.

Azure Portal
Azure CLI

Azure Portal에서 정적 웹앱으로 이동합니다.
왼쪽 메뉴에서 엔터프라이즈급 에지를 선택합니다.
엔터프라이즈급 에지 사용 확인란을 선택합니다.
저장을 선택합니다.
확인을 선택하여 저장을 확인합니다.

이 기능을 사용하도록 설정하면 추가 비용이 발생합니다.


az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

필수 조건

활성 구독이 있는 Azure 계정. 무료로 계정 만들기
Azure Static Web Apps 사이트 첫 번째 정적 웹앱 빌드
Azure Static Web Apps 표준 및 Azure Front Door 표준/프리미엄 플랜 자세한 내용은 정적 Web Apps 가격 책정을 참조하세요.
더 빠른 페이지 로드, 강화된 보안 및 글로벌 애플리케이션의 최적화된 안정성을 위해 엔터프라이즈급 에지 사용을 고려합니다.

Azure Front Door 만들기

Azure Portal에 로그인합니다.
홈 페이지 또는 Azure 메뉴에서 + 리소스 만들기를 선택합니다. Front Door 및 CDN 프로필을 검색한 다음, 만들기>Front Door 및 CDN 프로필을 선택합니다.
제품 비교 페이지에서 빨리 만들기를 선택한 다음, Front Door 만들기 계속을 선택합니다.

Front Door 프로필 만들기 페이지에서 다음 설정을 입력하거나 선택합니다.

설정	값
Subscription	Azure 구독을 선택합니다.
Resource group	리소스 그룹 이름을 입력합니다. 이 이름은 종종 정적 웹앱에서 사용하는 것과 동일한 그룹 이름입니다.
리소스 그룹 위치	새 리소스 그룹을 만드는 경우 가장 가까운 위치를 입력합니다.
이름	my-static-web-app-front-door를 입력합니다.
계층	표준을 선택합니다.
엔드포인트 이름	Front Door 호스트의 고유한 이름을 입력합니다.
기원 타입	Static Web App을 선택합니다.
원본 호스트 이름	드롭다운에서 정적 웹앱의 호스트 이름을 선택합니다.
캐싱	캐싱 사용 확인란을 선택합니다.
쿼리 문자열 캐시 동작	쿼리 문자열 사용을 선택합니다.
압축	압축 사용을 선택합니다.
WAF 정책	이 기능을 사용하려면 새로 만들기를 선택하거나 드롭다운에서 기존 Web Application Firewall 정책을 선택합니다.

참고 항목

Azure Front Door 프로필을 만들 때 Front Door가 만들어진 동일한 구독에서 원본을 선택해야 합니다.

검토 및 생성를 선택한 후 생성를 선택합니다. 작성 프로세스를 완료하는 데 몇 분 정도 걸릴 수 있습니다.
배포가 완료되면 리소스로 이동을 선택합니다.
조건 추가

인증 워크플로에 대한 캐시 사용 안 함

참고 항목

캐시 만료, 캐시 키 쿼리 문자열 및 원본 그룹 재정의 작업은 더 이상 사용되지 않습니다. 이러한 작업은 여전히 정상적으로 작동할 수 있지만 규칙 집합은 변경할 수 없습니다. 규칙 집합을 변경하기 전에 이러한 재정의를 새 경로 구성 재정의 작업으로 바꿉니다.

Front Door의 캐싱 정책이 인증 및 권한 부여 관련 페이지를 캐시하지 않도록 하려면 다음 설정을 추가합니다.

조건 추가

Front Door의 설정에서 규칙 집합을 선택합니다.
추가를 선택합니다.
규칙 집합 이름 텍스트 상자에 Security를 입력합니다.
규칙 이름 텍스트 상자에 NoCacheAuthRequests를 입력합니다.
조건 추가를 선택합니다.
요청 경로를 선택합니다.
연산자 드롭다운을 선택한 다음, 다음으로 시작을 선택합니다.
값 텍스트 상자 위에 있는 편집 링크를 선택합니다.
텍스트 상자에 /.auth를 입력한 다음, 업데이트를 선택합니다.
문자열 변환 드롭다운에서 옵션을 선택하지 않습니다.

작업 추가

작업 추가 드롭다운을 선택합니다.
경로 구성 재정의를 선택합니다.
캐싱 드롭다운에서 사용 안 함을 선택합니다.
저장을 선택합니다.

엔드포인트에 규칙 연결

이제 규칙이 만들어졌으므로 Front Door 엔드포인트에 규칙을 적용합니다.

Front Door에서 규칙 집합을 선택한 다음, 연결 안 됨 링크를 선택합니다.
캐싱 규칙을 적용할 엔드포인트 이름을 선택한 후, 다음을 선택합니다.
연결을 선택합니다.

Front Door ID 복사

다음 단계에서 Front Door 인스턴스의 고유 식별자를 복사합니다.

Front Door의 왼쪽 탐색 메뉴에서 개요 링크를 선택합니다.
Front Door ID라는 값을 복사하여 나중에 사용할 수 있도록 파일에 붙여넣습니다.

정적 웹앱 구성 업데이트

Front Door와의 통합을 완료하려면 애플리케이션 구성 파일을 다음으로 업데이트하여 다음 기능을 수행해야 합니다.

Front Door를 통해서만 사이트에 대한 트래픽 제한
Front Door 인스턴스에서만 사이트로 트래픽 제한
사이트에 액세스할 수 있는 도메인 정의
보안 경로에 대한 캐싱 사용 안 함

사이트의 staticwebapp.config.json 파일을 열고 다음과 같이 변경합니다.

구성 파일에 다음 섹션을 추가하여 Front Door만 사용하도록 트래픽을 제한합니다.
```
"networking": {
  "allowedIpRanges": ["AzureFrontDoor.Backend"]
}
```
사이트에 액세스할 수 있는 Azure Front Door 인스턴스 및 도메인을 정의하려면 forwardingGateway 섹션을 추가합니다.
```
"forwardingGateway": {
  "requiredHeaders": {
    "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
  },
  "allowedForwardedHosts": [
    "my-sitename.azurefd.net"
  ]
}
```
먼저 Front Door 인스턴스의 트래픽만 허용하도록 앱을 구성합니다. 모든 백 엔드 요청에서 Front Door는 Front Door 인스턴스 ID가 포함된 X-Azure-FDID 헤더를 자동으로 추가합니다. 이 헤더를 요구하도록 정적 웹앱을 구성하면 트래픽이 Front Door 인스턴스로만 제한됩니다. 구성 파일의 forwardingGateway 섹션에서 requiredHeaders 섹션을 추가하고 X-Azure-FDID 헤더를 정의합니다. <YOUR-FRONT-DOOR-ID>를 이전에 별도로 설정한 Front Door ID로 바꿉니다.

다음으로 Azure Front Door 호스트 이름(Azure Static Web Apps 호스트 이름 아님)을 allowedForwardedHosts 배열에 추가합니다. Front Door 인스턴스에 구성된 사용자 지정 도메인이 있는 경우 이 목록에도 포함합니다.

이 예에서는 my-sitename.azurefd.net를 사이트의 Azure Front Door 호스트 이름으로 바꿉니다.

앱의 모든 보안 경로에 대해 경로 헤더 정의에 "Cache-Control": "no-store"를 추가하여 Azure Front Door 캐싱을 사용하지 않도록 설정합니다.

{
    ...
    "routes": [
        {
            "route": "/members",
            "allowedRoles": ["authenticated", "members"],
            "headers": {
                "Cache-Control": "no-store"
            }
        }
    ]
    ...
}

이 구성을 사용하면 생성된 *.azurestaticapps.net 호스트 이름을 통해 사이트를 더 이상 사용할 수 없지만 Front Door 인스턴스에 구성된 호스트 이름을 통해서만 사이트를 사용할 수 있습니다.

고려 사항

사용자 지정 도메인: 이제 Front Door가 사이트를 관리하므로 더 이상 Azure Static Web Apps 사용자 지정 도메인 기능을 사용하지 않습니다. Azure Front Door에는 사용자 지정 도메인을 추가하는 별도의 프로세스가 있습니다. Front Door에 사용자 지정 도메인 추가를 참조하세요. Front Door에 사용자 지정 도메인을 추가할 때 정적 웹앱 구성 파일을 업데이트하여 allowedForwardedHosts 목록에 포함해야 합니다.
트래픽 통계: 기본적으로 Azure Front Door는 트래픽 통계에 영향을 미칠 수 있는 상태 프로브를 구성합니다. 상태 프로브의 기본값을 편집할 수 있습니다.
이전 버전 제공: 정적 웹앱의 기존 파일에 대한 업데이트를 배포할 때 Azure Front Door는 파일의 수명이 만료될 때까지 파일의 이전 버전을 계속 제공할 수 있습니다. 영향을 받는 경로의 Azure Front Door 캐시를 제거하여 최신 파일이 제공되도록 합니다.

리소스 정리

이 자습서에서 만든 리소스를 더 이상 사용하지 않으려면 Azure Static Web Apps 및 Azure Front Door 인스턴스를 삭제합니다.

다음 단계

API 추가

다음을 통해 공유

자습서: Azure Static Web Apps에 대한 CDN 구성

필수 조건

Static Web Apps 리소스에서 엔터프라이즈급 에지를 사용하도록 설정합니다.

필수 조건

Azure Front Door 만들기

인증 워크플로에 대한 캐시 사용 안 함

조건 추가

작업 추가

엔드포인트에 규칙 연결

Front Door ID 복사

정적 웹앱 구성 업데이트

고려 사항

리소스 정리

다음 단계

피드백

추가 리소스