AWS CF Function 과 정책을 활용한 접속 국가별 Redirect 처리

 

1. 환경

- React 앱을 AWS s3+cf로 배포

- 사용자의 실제 접속 국가에 따른 루트 경로에서의 URL 리다이렉트 처리가 필요한 상황

ex) 한국에서 접속한 사용자는 /domain/kr, 독일에서 접속한 사용자는 /domain/eu 형태로 리다이렉트 되어야 함

 

 

2. 방법 

1. AWS 정책 추가

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/adding-cloudfront-headers.html

CloudFront 요청 헤더 추가 - Amazon CloudFront

사용자의 접속 국가를 알기 위해서는 해당 정보를 받을 수 있게 정책 추가가 필요하다.

국가 정보를 넘겨주는 헤더는 "CloudFront-Viewer-Country" 다

• CloudFront-Viewer-Country – 최종 사용자 국가의 두 자로 된 국가 코드가 들어 있습니다. 국가 코드 목록은 ISO 3166-1 alpha-2 단원을 참조하세요.

++ 해당 헤더 말고도 region 이나 위도/경도, 디바이스 유형 정보를 받을 수 있는 헤더가 존재한다.

 

1) CloundFront > 정책 > 캐시 

 

 

2) 캐시 정책 생성

이름과 설명은 자유롭게 적어주면 되고, 캐시 키 설정 > 헤더 > 다음 헤더 포함 으로 "CloudFront-Viewer-Country" 를 추가해준다.

 

참고)

정책에는 3가지 종류가 있는데 (캐시, 원본 요청, 응답 헤더)

• 캐시 정책
  • 캐시 정책은 CloudFront 엣지 로케이션에 저장되는 객체의 캐시 키를 정의 함
  • 사용자의 요청의 캐시 키가 엣지 로케이션이 저장된 캐시 키라면 캐시된 값을 응답 함
• 원본 요청 정책
  • CloudFront가 오리진 서버(원본)에 요청을 보낼 때 어떤 데이터를 포함할 지 제어
  • 캐시 정책에서 지정한 값은 자동으로 오리진 요청에 포함됨 !
  • 따라서 캐시 키에는 포함되지 않고 오로지 오리진 요청에 꼭 포함되는 값일 때만 원본 요청 정책을 사용
• 응답 헤더
  • CloundFront가 최종 사용자에게 응답을 보낼 때 Http 응답 헤더를 추가하거나 제어 하는 역할
  • 보통 Cors처리나 보안 처리를 위해 헤더 세팅을 할 때 해당 부분에 정책을 추가함

>>> 캐시 키 정책에 추가한 이유는 사용자의 IP에 따라 국가 정보를 캐시 키로 추가 함으로서 오리진 서버 부하를 줄이기 위함

 

2. CF function 추가

* 필자는 Cf function을 이용해서 리다이렉트 처리를 구현 하였는데, 국가 정보를 응답헤더에서 추가한 후 코드 레벨에서 처리 하는 것도 가능 하다.

 

1) CloundFront > 함수 > 함수 생성

이름은 자유롭게 지정

 

2) 함수 선언

AWS에 친절한 예시가 있다.

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/example_cloudfront_functions_redirect_based_on_country_section.html

CloudFront Functions 뷰어 요청 이벤트에서 새 URL로 리디렉션 - Amazon CloudFront

ES6 문법을 쓰지 않은건 살짝 아쉽지만 그대로 함수 코드로 복붙

 

해당 코드를 설명하면, country가 DE(독일)인 경우에 대해 /de/index.html 로 리다이렉트 되도록 처리된 부분이다.

테스트를 위해서 country는 KR로 바꿔두고 저장.

 

3) 배포 > 동작에서 추가한 정책과 Cf function을 연결

필자는 Root Path에서의 국가별 리다이렉트 처리가 필요해 /index.html 경로에 대해 새 동작을 추가했다. 

 

캐시 키 및 원본 요청에서 아까 추가한 캐시 정책을 연결해주고,

 

 

함수 연결에서 만들어 둔 Cf function을 뷰어 요청에 추가 한다. 

 

* 뷰어 요청, 뷰어 응답, 원본 요청, 원본 응답에 대한 차이는 아래 참고.

종류	트리거 시점	캐시	주 용도
뷰어 요청	뷰어가 CloudFront에 요청 보낼 때	캐시와 무관	인증, 리다이렉트, 캐시 키 변경
뷰어 응답	CloudFront가 뷰어에게 응답 보내기 직전	항상	보안 헤더, 쿠키, 최종 응답 가공
원본 요청	캐시 미스 시, 오리진으로 요청 전달 전	캐시 미스 시만	오리진 선택, 요청 가공
원본 응답	오리진에서 응답 받았을 때, 캐시에 저장 전	캐시 미스 시만	응답 가공, 헤더 추가/변경

 

 

3. 테스트

위 과정을 거친 후 배포된 페이지에서 Cf function로 동작하는지 테스트 해보면 된다.

아마 잘 될 것! ㅎ.ㅎ

 

 

 

++ 추가

필자는 정책을 추가했음에도 Cf function 에서 해당 헤더를 받지 못하는 이슈가 있었는데

Cf 배포의 기본 루트 객체를 index.html로 설정을 해두고, 동작에서 "/" 에 대해서만 캐시 정책과 cf function을 추가 했었던 상황

 

요렇게 되면 "/"에 대한 요청은 "/index.html"로 사용자에게 응답하게 되는데, 해당 요청을 더 우선 시 하기 때문에 "/" 경로에 추가한 캐시정책과 Cf function이 동작하지 않는 것 처럼 보였음

 

따라서 동작을 "/" 경로가 아닌 "/index.html" 에 대해 추가하도록 해서 해결함

관련 글

https://repost.aws/questions/QUYGawRXotQhWZ184QJDOBqA/root-path-pattern

Root Path Pattern