[AWS] WAF: Amplify 연동하기

관련 포스트
https://blog.naver.com/sssang97/222921945368
Amplify 애플리케이션에 WAF를 붙이는 방법에 대해서 정리한다.

제한사항

1. WAF는 기본적으로 Cloudfront를 비롯한 몇가지 한정된 서비스에 대해서만 부착이 가능한데, Amplify 자체에 대해서는 장착이 불가능하다.
2. WAF가 내부적으로 생성하는 Cloudfront가 있긴 하지만, 이건 사용자가 통제할 수 없는 블랙박스 영역에 위치한다.
3. 그래서 Amplify 애플리케이션에 WAF를 달려면 Amplify 브랜치에 대해서 앞단에 Cloudfront를 추가로 붙이고, 거기에 WAF를 장착하는 식의 특수한 구성을 해줘야 한다.
4. 이건 AWS console에서는 수행할 수 없다. aws sdk나 cdk를 사용해서 처리해야 한다.

아키텍쳐는 이렇다.

사전 조건

aws-sdk가 깔려있어야 하고, python3가 깔려있어야 한다.

cdk도 없으면 설치한다.

npm install -g aws-cdk # cloudshell이면 없어도 됨

근데 그냥 aws cloudshell에서 실행하면 더 편하다.

CDK로 구성하기

아래 커맨드를 순서대로 실행한다.

git clone https://github.com/aws-samples/aws-cdk-amplify-with-waf.git
cd aws-cdk-amplify-with-waf
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

그리고 cdk cli로 부트스트래핑을 해준다. (cloudformation 스택을 만드는 것이다.)

cdk bootstrap aws://ACCOUNT-NUMBER/REGION-1 aws://ACCOUNT-NUMBER/REGION-2

첫번째 파라미터가 WAF가 있는 리전이고, 두번째 파라미터가 Amplify가 있는 리전이다.

그리고 다운받은 cdk 샘플 소스에서, 저 파일을 수정해준다.

webacl ARN과 amplify 앱 ID, 브랜치명을 넣어준다.

근데 여기 코드에 지금 버그가 있다. 브랜치명에 슬래시가 들어가면 깨진다.
내가 PR을 올려놓긴 했는데, 머지가 될지는 모르겠다.
이렇게 되어있는 부분을

이렇게 바꿔준다.

그리고 cdk-cli로 실행하면 된다.

cdk deploy CustomAmplifyDistributionStack

좀 오래걸린다.

그리고 기다리면

amplify 앞단에 달린 cloudfront 배포가 생길 것이고

WebACL에도 달릴 것이다.
이건 필요에 따라 언제든 콘솔에서 뗐다 붙여도 된다.

참조
https://docs.aws.amazon.com/ko_kr/prescriptive-guidance/latest/patterns/enable-aws-waf-for-web-applications-hosted-by-aws-amplify.html
https://github.com/aws-samples/aws-cdk-amplify-with-waf