[AWS] Cloudfront: Function

#AWS

Cloudfront Function은 Cloudfront에서 요청이나 응답을 가로채서 조작할 수 있는 엣지 수준 부가기능이다.

Lambda Edge와도 비슷한 느낌으로 동작하나, 조금 다르다.

**Lambda Edge **

Lambda Edge는 이미지 최적화 같은 상당히 무거운 연산을 포함한 기능을 구현할때 적합하다.
응답이나 요청 등 다양한 시점에 트리거가 가능하고, 확장성이 뛰어나다.
그대신 무겁고 비싼 편이다.

Cloudfront Function

Function은 간단한 HTTP 응답 헤더 조작이나 리디렉션 같은 매우 가벼운 조작에 적합하다.
매우 작은 코드만 올릴 수 있고, 제한적인 대신에 빠르고, 훨씬 많은 엣지에 배포되어 물리적으로도 빠르다. 1밀리초 미만의 실행시간을 보장한다.
비용이 저렴하다.

아래는 차이점을 비교한 도표다.

https://aws.amazon.com/ko/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/

비용

https://aws.amazon.com/ko/cloudfront/pricing/

비용은 저렴한 편이다. 단순히 횟수로만 비용을 부과한다.
100만건당 0.1 달러를 뜯는다.

예제: 다국어 처리하기

Cloudfront 헤더와 Function 기반의 리디렉션을 응용해서 다국어 라우팅을 하는 방법을 보이겠다.
여기서는 뷰어 요청 트리거만을 응용해서 구현이 가능하다. 굳이 오리진 데이터를 받아오기 전에도 URI나 국가 정보는 다 알 수 있기 때문이다.
오리진에서 반환된 응답 헤더같은걸 조작할 일이 없다면 뷰어 요청 트리거만으로 충분하다.

1. 함수 만들기

먼저 Cloudfront 콘솔로 이동해서

Function 탭에 진입

생성창으로 들어간다.

이름 적당히 짓고 만들면 된다.

이렇게 뜨면 된 것이다.

2. 함수 코드 작성하기

Function 콘솔에 들어가면 AWS Lambda 처럼 자체적인 에디터를 바로 제공한다. 그리 편하진 않지만

개발, 라이브 2개의 스테이지를 기본으로 제공한다.

먼저 개발 코드에다가 아래 코드를 집어넣자.

function handler(event) {
  const request = event.request;

  const supported_countries = ["de", "it", "fr", "kr"];

  if (request.uri.substr(3, 1) != "/") {
    const headers = request.headers;

    let newUri;

    const country = headers["cloudfront-viewer-country"];

    if (country) {
      const countryCode = country.value.toLowerCase();
      if (supported_countries.includes(countryCode)) {
        newUri = "/" + countryCode + request.uri;
      }
    }
    if (newUri === undefined) {
      const defaultCountryCode = "en";
      newUri = "/" + defaultCountryCode + request.uri;
    }
    const response = {
      statusCode: 302,
      statusDescription: "Found",
      headers: {
        location: { value: newUri },
      },
    };
    return response;
  }
  return request;
}

로직은 그리 복잡하지 않다.

이미 다국어 라우팅이 된 /de... 같은 경로라면 request.uri.substr(3, 1) != "/"에 걸려서 리디렉션 없이 그대로 반환한다. 아니라면 다국어 라우팅 시도한다.
Cloudfront에서 자체적으로 국가를 구분하기 위해 받는 cloudfront-viewer-country라는 헤더를 가져다가, 국가를 구분한다. 국가코드는 ISO 표준에 기반한다.
국가코드가 없거나 모르는거면 영어 /en로 라우팅한다.
그렇게 해서 독일, 이태리, 불란서, 한국이 들어오면 /kr/, /de/, ... 같은 경로로 리디렉션하도록 구성한 것이다. (location 헤더 활용)

여기서는 location으로 떠넘겨서 uri까지 변경되게 하는 방법을 취했지만, request.uri를 변경해서 반환하는 방법도 있다. 그러면 리디렉션 없이 S3 오리진만 바뀐 채 동일한 uri로 가져올 수도 있을 것이다.

아무튼 저렇게 넣어서 변경사항을 저장하고, 테스트 기능을 활용해서 잘 동작하는지 확인해보자.

대충 아무것도 안넣었을때는 /en로 던져주는 것을 볼 수 있고

넣어서 쏘면 넣은대로 나올 것이다.

그리고 게시 버튼을 눌러서 라이브로 배포하면 끝이다.

3. 테스트 환경 구성하기 (S3, Cloudfront)

일단 Function은 보조적인 부가기능에 불과하고, 확인을 위해서는 테스트셋을 세팅해야 한다.

먼저 다국어에 해당하는 index.html 파일들을 s3 버킷에 올려뒀다.

이정도로

Cloudfront 캐시설정도 좀 바꿔줘야 한다.
cloudfront-viewer-country라는 특수 헤더를 Cloudfront가 오리진에 전달해줘야 그걸 Function이 받아서 처리할 수 있는건데, 기본 캐시 설정은 헤더를 전부 씹기 때문이다.

근데 완성형으로 제공해주는 정책 중에 cors 설정과 cloudfront 헤더 설정이 동시에 들어있는게 없어서 또 직접 만들어야 한다. 짜증이 난다.

정책 > 원본 요청으로 이동

정책을 이렇게 적당히 만들어준다.
당장 필요한 Cloudfront Viewer Country 헤더와 S3 접근에 필요한 CORS 전용 헤더다. 헤더를 아무것도 넘기지 않을 때는 CORS가 발생하지 않아서 괜찮은데, 커스텀 헤더를 보내기 시작하면 이렇게 끼워줘야 하더라.