Amplify를 통해 생성된 CloudFront에 WAF 적용

안녕하세요 물콩입니다 !

오늘은 Amplify를 통해 생성된 CloudFront에 WAF를 적용하는 방법에 대해서 알아보겠습니다 ~

 

결론부터 말하자면 Amplify를 통해 생성된 도메인과, CloudFront는 AWS의 Managed Service이기 때문에 바로 WAF 적용을 할 수 없습니다.

 

그렇기 떄문에 직접 관리형 CloudFront를 생성하고 해당 CloudFront에 Amplify의 도메인을 등록한 뒤,

비로소야 WAF를 적용 할 수 있습니다.

 

Amplify 도메인에 WAF 적용하려면 ?

( 1 ) Amplify 도메인이 등록된 Amplify의 CloudFront -> WAF 적용 X 

( 2 ) Amplify 도메인이 등록된 직접 관리형 CloudFront -> WAF 적용 O

 

Architecture

해당 아키텍처는 AWS에서 제공한 WAF 적용 예시 아키텍처이며[1] , 아키텍처에 대한 간단한 설명을 하단에 요약해 두었으니 참고 하시면 좋을 것 같습니다 !!
===

사용자가 amplify 웹 애플리케이션에 접속하면, AWS WAF는 네트워크 액세스를 제어하고 제한한 뒤,  허용된 요청만을 새로운 CloudFront 배포판에 요청합니다.

허용된 요청은 새로운 CloudFront를 통해 amplify 웹 애플리케이션에 전달되는데, 이때 사용자 인증 정보 또한 요청에 포함되어 전달됩니다.

이후 amplify 애플리케이션에 주기적으로 정보를 업데이트 하기 위해 Lambda와 EventBridge를 통해 CloudFront 캐시 무효화 요청을 생성 할 수 있습니다.
===

 

Amplify CloudFront-> WAF 적용 테스트

1.  Amplify를 통한 App 배포

먼저 Amplify를 통해 간단한 App 하나를 배포해줍니다 !

저는 html을 통해 아~주 간단한 페이지 하나를 띄웠습니다 !

Amplify로 App을 배포 할 때에는 zip 파일로 업로드 해야하니 참고해주세요.

App 배포 이후, 생성된 도메인을 통해 접속 되는 모습을 확인 할 수 있습니다.

 

2. 직접 생성한 CloudFront에 Amplify 도메인 등록 후 배포

다음은 직접 관리할 수 있는 새로운 CloudFront 하나를 생성해줍니다.

CloudFront 배포가 끝나고 나면, 원본 도메인에 Aplify의 도메인을 직접 등록해줍니다.

 

도메인 배포가 끝나고 다면 원본 유형이 Custom Origin으로 설정되어 있는 모습을 확인 할 수 있습니다.

 

3. 새로 생성한 CloudFront로 접속 확인

새로 생성된 CloudFront로 접속하면, 따란 ~ Amplify로 배포했었던 App이 나옵니다 !

 

4. WAF 확인

WAF 설정시 새로 생성된 CloudFront를 선택 하는 것 또한 가능합니다.!!

 

오늘은 준비한 내용은 여기까지입니다 !다들 도움 되셨길 바라요 !

 

[참고문헌]

[1] https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/enable-aws-waf-for-web-applications-hosted-by-aws-amplify.html