AWS CloudFront에서 쿼리 스트링을 포함한 도메인 리다이렉트 구성하기

개요

AWS의 도메인 리다이렉트 예제를 찾아보면 S3의 Bucket을 활용한 리다이렉트 방법이 가장 많이 나오는데,

이는 아래와 같은 단점들이 있다.

1. S3 Bucket을 관리해야 하여 관리포인트가 늘어난다.
2. Query Parameter의 유지가 불가능하다.

1번은 큰 문제가 아닐 수 있지만,

2번과 같인 Query Parameter를 상황에 따라 유지해야 하는 경우에는 사용이 불가능했다.

 

따라서 Query Parameter도 같이 포함하여 리다이렉트 할 수 있도록 하는 방법을 찾아보았고,

이를 기록하게 되었다.

아래 절차는 Route 53에 기존 도메인이 등록되어 있는 상태에서 진행해야 한다.

 

CloudFront Functions

S3를 활용하여 도메인 리다이렉트를 구성한다고 하더라도,

기존 도메인의 HTTPS를 대응하기 위해서는 최초 진입 시 CloudFront를 구성해야 한다.

 

AWS에서 CloudFront만을 이용해서 도메인 리디렉션을 구성하는 방법은 아래 링크에 설명되어 있다.

CloudFront에서 도메인 리디렉션

 

내용을 요약하면, S3 리디렉션을 연결하거나 리디렉션 하는 엣지 함수를 구성해야 한다는 내용이다.

 

엣지 함수는 Lambda 혹은 CloudFront Functions를 통해 구성할 수 있는데,

다른 기술이 추가되면 관리 포인트가 늘어나기도 하니 CloudFront Functions로 간단하게 구성해 보자.

 

AWS 콘솔에서 CloudFront > 함수 > 함수 생성을 통해 함수를 생성해 보자.

이름과 설명은 자유롭게 입력하고,

현재 지원하는 js Runtime 최신 버전인 2.0을 선택하고 함수 생성 버튼을 눌러서 함수를 생성한다.

 

이후 함수 코드 작성 부분에 아래와 같이 작성한다.

새로 리다이렉트 할 타겟 도메인만 맞춰서 변경하면 된다.

function handler(event) {

    // 새로 리다이렉트할 타겟 도메인
    var newDomain = 'https://www.example-target.com';

    var request = event.request;

    // 요청 경로 (예: '/some/path')
    var path = request.uri;
    
    // 쿼리스트링 객체
    var qsObject = request.querystring;
    
    // https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example_cloudfront_functions_normalize_query_string_parameters_section.html
    var qs = [];
    for (var key in qsObject) {
        if (qsObject[key].multiValue) {
            qsObject[key].multiValue.forEach((mv) => {qs.push(key + "=" + mv.value)});
        } else {
            qs.push(key + "=" + qsObject[key].value);
        }
    }

    // 최종 쿼리스트링 (없으면 빈 문자열)
    var queryString = qs.length > 0 ? '?' + qs.sort().join('&') : '';

    // 최종 리다이렉트 URL
    var location = newDomain + path + queryString;

    return {
        statusCode: 301,
        statusDescription: 'Moved Permanently',
        headers: {
            location: { value: location }
        }
    };
}

해당 코드는 아래 CloudFront Developer Guide 두 문서를 참고하여 작성하였다.

Redirect to a new URL in a CloudFront Functions viewer request event - Amazon CloudFront
Normalize query string parameters in a CloudFront Functions viewer request - Amazon CloudFront

 

코드를 잘 작성했다면, 아래와 같이 게시 탭에 들어가서 함수 게시 버튼을 눌러서 마무리한다.

 

Certificate Manager

CloudFront 배포에서 HTTPS를 서빙하고 Route 53 도메인과 연결하도록 설정하기 위해서는

도메인 인증서를 발급받아서 연결해야 한다.

자세한 내용은 아래 링크 참고.

Use custom URLs by adding alternate domain names (CNAMEs) - Amazon CloudFront

 

인증서 등록을 위해 AWS Certificate Manager 콘솔에 들어가자.

콘솔에 들어간 후, 반드시 확인해줘야 할 것이 있다.

인증서 생성 시 반드시 버지니아 북부(us-east-1) 리전에 생성해야 한다.

 

us-east-1 리전에 생성하지 않으면 CloudFront에 인증서를 연결할 수 없다.

 

리전을 확인했으면, 인증서 요청 버튼을 눌러서 진입하고, 퍼블릭 인증서를 발급받자.

도메인 이름에 사용자가 최초에 접근할 도메인을 기입한다.

해당 도메인이 규칙에 포함되는 와일드카드 인증서로 발급하는 것도 가능하고,

해당 도메인 말고도 아래 "이 인증서에 다른 이름 추가" 버튼을 통해 여러 도메인 등록도 가능하다.

 

요청 버튼을 눌러 등록을 완료하고,

잠시 기다리면 콘솔에 아래와 같이 "검증 대기 중" 상태로 나타난다.

해당 화면에서 "Route 53에서 레코드 생성" 버튼을 눌러서 도메인 검증을 위한 CNAME을 등록하자.

위 화면에서 레코드 생성 버튼을 누르면 자동으로 Route 53에 인증에 필요한 CNAME 값이 등록된다.

 

이후 잠시 기다리면, 아래와 같이 성공 상태로 바뀐 것을 확인할 수 있다.

 

CloudFront 배포 생성

이제 드디어 CloudFront 배포를 생성해 보자.

CloudFront 콘솔의 배포 탭에서 배포 생성 버튼을 눌러 생성 페이지로 들어갈 수 있다.

• Origin domain : 필수값이지만 CloudFront Functions에 의해 리다이렉트 될 예정으로 아무렇게나 작성해도 상관없다.
• 프로토콜 : HTTP만 해당, HTTP port는 80으로 기입
• 이름 : 자유롭게 작성

그리고 바로 밑에 기본 캐시 동작이라는 섹션이 있는데,

여기는 기본값으로 두고 그 아래 작성 부분으로 넘어가자.

• 함수 연결 : "뷰어 요청"에서 우리가 만들었던 CloudFront 함수 연결
• 웹 애플리케이션 방화벽 : 보안 보호 비활성화

• 대체 도메인 이름(CNAME) : 사용자가 진입할 도메인 기입 (항목 추가로 여러 개 입력 가능)
• Custom SSL certificate : Certificate Manager에서 만들었던 인증서 선택 (대체 도메인 이름 작성 시 필수)

여기까지 설정한 후, 배포 생성 버튼을 눌러 CloudFront 배포를 생성하면 된다.

 

Route 53 도메인 설정

이제 마지막으로 Route 53에서 도메인 설정만 맞춰주면 끝이다.

먼저 Route 53 콘솔 > 호스팅 영역 > 해당 도메인 페이지에서 레코드 생성 버튼을 눌러 진입한다.

• 레코드 이름 : 하위 도메인과 합쳤을 때 원본 도메인 이름이 완성되도록 작성
• 레코드 유형 : A - IPv4 주소 및 일부 AWS 리소스로 트래픽 라우팅
• 별칭 토글 : 활성화
• 트래픽 라우팅 대상 : CloudFront 배포에 대한 별칭 선택, 아래에서 생성한 CloudFront 배포 연결
  • 주의 : CloudFront 배포에서 연결한 CNAME과 레코드 이름이 맞지 않으면 CloudFront 배포가 나타나지 않는다.

 

결과 확인

이제 해당 도메인으로 접속해서 정상적으로 리다이렉트 되는지 확인해 보자.

원본 도메인에 접속했을 때, 정상적으로 원하는 도메인으로 리다이렉트 되는 것을 확인할 수 있다.

(이미지는 이해를 위해 URL과 Location 부분을 예제에 맞게 수정해 두었다.)

 

---

참고 문헌

• CloudFront에서 도메인 리디렉션
• (선택 사항) 웹 페이지 리디렉션 구성 - Amazon Simple Storage Service
• Redirect to a new URL in a CloudFront Functions viewer request event - Amazon CloudFront
• Normalize query string parameters in a CloudFront Functions viewer request - Amazon CloudFront
• CloudFront 함수 이벤트 구조 - Amazon CloudFront
• Use custom URLs by adding alternate domain names (CNAMEs) - Amazon CloudFront
• AWS Serverless 로 1분만에 URL Redirection 구현하기 - AWS 강의실