AWS CloudFront에서 사용자 기반 정보 사용하는 방법 (feat. CloudFront-Viewer)

AWS CloudFront에서 사용자 위치 기반 정보 사용하는 방법

AWS CloudFront 새로운 캐시 정책에서 사용자 위치 정보 헤더가 추가되었습니다. 이제 CloudFront를 구성해서 캐싱 및 원본 요청 정책을 더욱 세밀하게 지정할 수 있는 추가적인 위치 정보 헤더를 추가할 수 있습니다. 새로운 헤더를 사용하면 사용자의 국가 이름, 지역, 도시, 우편번호, 위도, 경도에 대한 원본 액세스와 캐시 동작을 더욱 세밀하게 제어할 수 있으며, 모든 것은 시청자의 IP 주소를 기반으로 합니다.

추가된 위치 정보 헤더와 샘플 값은 아래와 같습니다.

사용자의 디바이스 타입 감지를 위한 헤더

• CloudFront-Is-Android-Viewer - CloudFront에서 사용자가 Android 운영 체제를 사용하는 디바이스라고 판단하면 true로 설정합니다.
• CloudFront-Is-Desktop-Viewer - CloudFront에서 사용자가 데스크톱 디바이스임을 확인하면 true로 설정합니다.
• CloudFront-Is-IOS-Viewer - CloudFront에서 사용자가 Apple 운영 체제를 사용하는 디바이스라고 판단하면 true로 설정합니다.
• CloudFront-Is-Mobile-Viewer - CloudFront에서 사용자가 모바일 디바이스임을 확인하면 true로 설정합니다.
• CloudFront-Is-SmartTV-Viewer - CloudFront에서 사용자가 스마트 TV라고 판단하면 true로 설정합니다.
• CloudFront-Is-Tablet-Viewer - CloudFront에서 사용자가 태블릿이라고 판단하면 true로 설정합니다.

사용자의 지역 정보를 감지하기 위한 헤더

다음 헤더를 통해 사용자의 지역 정보를 확인할 수 있습니다. CloudFront는 최종 사용자의 IP 주소를 기반으로 이러한 헤더의 값을 결정합니다.

• CloudFront-Viewer-City – 사용자의 도시 이름입니다.
• CloudFront-Viewer-Country – 사용자 국가의 두 글자 국가 코드를 포함합니다. 국가 코드 목록은 ISO 3166-1 alpha-2를 참조하십시오.
• CloudFront-Viewer-Country-Name – 사용자의 국가 이름입니다.
• CloudFront-Viewer-Country-Region – 사용자의 지역을 나타내는 코드 (최대 3자)를 포함합니다. 이 지역은 ISO 3166-2 코드의 가장 구체적인 부분입니다. 
• CloudFront-Viewer-Country-Region-Name – 사용자 지역의 이름을 포함합니다. 이 지역은 ISO 3166-2 코드의 가장 구체적인 부분입니다.
• CloudFront-Viewer-Latitude – 사용자의 대략적인 위도가 포함됩니다.
• CloudFront-Viewer-Longitude – 사용자의 대략적인 경도가 포함됩니다.
• CloudFront-Viewer-Metro-Code – 사용자의 대도시 코드를 포함합니다. 사용자가 미국에있을 때만 나타납니다.
• CloudFront-Viewer-Postal-Code – 사용자의 우편번호를 포함합니다.
• CloudFront-Viewer-Time-Zone - 사용자의 시간대를 IANA 시간대 데이터베이스 형식 (예 : America / Los_Angeles)으로 포함합니다.

기타 추가된 헤더

아래 헤더를 통해 사용자 요청의 프로토콜 및 HTTP 버전을 확인할 수 있습니다.

• CloudFront-Forwarded-Proto – 사용자의 요청 프로토콜 (HTTP 또는 HTTPS)을 포함합니다.
• CloudFront-Viewer-Http-Version – 사용자 요청의 HTTP 버전을 포함합니다.

CloudFront Cache Behavior 설정 방법

Cache and origin request settings에 Use a cache policy and origin request policy를 선택하고, Origin Request Policy에서 Create a new policy를 선택합니다.

Create cache policy 상세페이지로 이동 후 기본적인 캐시 정책을 입력합니다. 저는 생성하는 캐시 정책 이름을 project-main-cache-policy로 기입했습니다. 설명이 필요하면 Comment 입력란에 추가적으로 입력해주세요.

Create cache policy 기본정보를 입력하는 예시

저는 프로젝트에서 사용자의 타임존 정보를 사용하기 위해 CloudFront-Viewer-Time-Zone 헤더를 Headers의 Whitelist로 등록하도록 하겠습니다. 여기서 위에서 설명드렸던 추가적인 헤더 중 필요한 헤더값들을 Whitelist에 등록해주세요.

CloudFront-Viewer-Time-Zone 헤더를 Headers의 Whitelist에 추가하는 모습

Origin Request Policy에 생성한 캐시 정책을 추가하는 예시

Origin Request Policy에 우리가 생성한 캐시 정책을 추가하고, 아래 Yes, Edit 버튼을 클릭하면 정상적으로 캐시 정책이 등록되게 됩니다.

실제 사용 예시 (Nuxt.js)

서버사이드에서 타임존 정보를 Vuex 스토어에 저장하기 위한 사용 예시입니다. 아래 방식처럼 사용하고자하는 헤더(모두 소문자)를 req.headers['cloudfront-viewer-*']로 접근해서 사용하시면 됩니다.

// plugins/global.server.js
export default ({ app, store, req, query }) => {
  // 서버사이드에서 클라우드프론트 타임존을 체크한 후 vuex store에 타임존을 세팅한다.
  if (req.headers['cloudfront-viewer-time-zone']) {
    store.dispatch(
      'lang/setTimezone',
      req.headers['cloudfront-viewer-time-zone']
    )
  }
}

마무리

클라우드프론트(Cloudfront)에서 제공하는 cloudfront-viewer-* 헤더와 관련된 정보이므로 React(Next.js), Vue(Nuxt.js) 어떤 프레임워크를 사용하던 상관없이 동일하게 활용가능합니다.