개요

리디렉션 관리는 웹 사이트의 일반적인 요구 사항으로, 존재하지 않는 URL을 리디렉션하거나(예: 만료된 캠페인 또는 웹사이트 구조 변경 후) 국가별로 콘텐츠를 현지화하는 데 자주 사용됩니다. 리디렉션은 오리진이나 CDN에서 관리할 수 있습니다. CDN 수준에서 리디렉션을 관리하면 오리진의 로드를 줄이고 응답 시간을 줄일 수 있습니다. 정적 호스팅(예: S3)과 같은 일부 경우에는 오리진에서 리디렉션을 관리할 수 없습니다. CloudFront의 리디렉션은 엣지 함수 기능을 사용하여 관리됩니다.

아키텍처 관련 결정

요구 사항에 따라 엣지 함수를 사용하여 다양한 방식으로 리디렉션을 구현할 수 있습니다. 비즈니스에 가장 적합한 구현을 설계하려면 다음 질문을 고려해 보세요.

  • 리디렉션 로직을 얼마나 자주 업데이트하나요? 여러 팀이 동시에 리디렉션을 많이 사용하려면 단순하고 가끔씩 실행되는 A/B 테스트에 비해 좀 더 정교한 구현이 필요합니다.
  • 로직에 몇 개의 리디렉션 규칙이 있나요? 리디렉션 데이터베이스의 크기는 다양한 스토리지 옵션을 평가할 때 고려해야 할 요소입니다.
  • 리디렉션이 정적인가요, 동적인가요(예: 사용자 국가 또는 디바이스 기능에 따라 다른지)? 동적인 경우에는 응답을 변경하는 데 필요한 모든 파라미터를 사용할 수 있는 컨텍스트에서 리디렉션 로직을 실행해야 합니다.
  • URL을 사용자에게 투명하게 다시 작성하나요, 아니면 3xx Redirection을 보내나요?


CloudFront의 엣지 함수를 사용한 리디렉션의 몇 가지 구현에 대해 알아보려면 이 워크숍을 실습해 보세요. 다음 섹션에서는 CloudFront를 사용한 리디렉션 관리의 두 가지 일반적인 구현을 공유합니다.

AWS CloudFront에서 HTTP Redirects를 실행하는 방법

일반 사용 사례

정적 HTTP 리디렉션

변경이 거의 없는 소수의 규칙이 포함된 HTTP 리디렉션을 구현하려는 경우 최종 사용자 요청 이벤트에 CloudFront Function을 구성하고 함수 코드 안에 리디렉션 로직을 임베딩합니다. 리디렉션 로직의 변화에 따라 함수 코드를 업데이트할 수 있으며 새 로직은 몇 초 내에 사용자에게 적용됩니다.

예를 들어 최종 사용자 요청 이벤트에 구성된 다음 CloudFront 함수는 선택된 국가(스페인 및 UAE)의 사용자에게 3xx HTTP 응답을 전송하여 단일 페이지 애플리케이션의 로컬 버전으로 리디렉션합니다(예: https://example.com/ -> https://example.com/es/). 이 기능이 제대로 작동하려면 오리진 요청 정책cloudfront-viewer-country 헤더를 포함해야 합니다. 이는 이 헤더를 함수 로직에서 사용하는 CloudFront Function 이벤트 객체에서 사용할 수 있도록 하도록 CloudFront에 지시합니다. 참고로 이 샘플 코드에서 사용자는 특별히 다른 국가 버전의 SPA를 요청하지 않는 한 해당 국가를 기준으로 리디렉션됩니다.

function handler(event) {
  var request = event.request;
  var headers = request.headers;
  var host = request.headers.host.value;
  var supported_countries = ['ie','ae', 'es']; // countries in which you'd like to serve a localized version of your Single Page Application
  var defaultCountryIndex = 0; // default country index in the support_countries array. here it is 'ie'
  
  if ((supported_countries.includes(request.uri.substring(1,3))) && ((request.uri.substring(3,4) === '/') || (request.uri.length === 3))) {
      // If one of the supported country codes is included in the path (e.g. /es/about) then add index.html when needed to the reauest
      return requestWithIndexHTML(request);
  } else if ((headers['cloudfront-viewer-country']) && (headers['cloudfront-viewer-country'].value.toLowerCase() !== supported_countries[defaultCountryIndex])){
      // Otherwise if the user reauest is coming from one of the supported countries except the default one, then redirect to country specific version (e.g. /about -> /es/about)
      var response = {
          statusCode: 302,
          statusDescription: 'Found',
          headers: { location: { value: `https://${host}/${headers['cloudfront-viewer-country'].value.toLowerCase()}${request.uri}` } },
      };
      return response;      
  } else {
      // Otherwise send rewrite the request to the default country path, add index.html if needed and return
      request.uri = '/'+supported_countries[defaultCountryIndex] + request.uri;
      return requestWithIndexHTML(request);
  }
}

// Add index.html to SPA path when needed
function requestWithIndexHTML(request) {
    if (request.uri.endsWith('/')) {
        request.uri += 'index.html';
    } else if (!request.uri.includes('.')) {
        request.uri += '/index.html';
    }
    return request;
}

대량 HTTP 리디렉션

CloudFront Function으로 더 큰 리디렉션 매핑을 지원할 수도 있습니다. CloudFront KeyValueStore를 사용하면 최대 함수 크기인 10KB를 초과하는 매핑을 지원할 수 있습니다. 예를 들어 매칭하려는 URI를 키에 저장하고 리디렉션 URL을 값에 저장할 수 있습니다. 최종 사용자 요청의 이벤트 객체에서 사용 가능한 URI를 평가하여 일치하는 URI를 찾은 다음 해당 URI가 키에 있으면 함수는 관련 값과 함께 3xx 리디렉션을 반환합니다.

KeyValueStore를 사용하면 정기적으로 변경되는 데이터를 코드에서 분리할 수 있다는 이점도 있습니다. KeyValueStore는 읽기 지연 시간이 짧은 대규모 글로벌 키-값 데이터 스토어(초당 수백만 건의 요청)에 적합합니다.

HTTP 리디렉션에 대한 고급 요구 사항

KeyValueStore의 최대 크기(5MB) 또는 초당 API 직접 호출 몇 개의 변경 속도 제한으로는 충족할 수 없는 고급 리디렉션 요구 사항에는 Lambda@Edge 기반 솔루션이 더 적합합니다. 여러 마케팅 팀에서 매일 수십만 개의 캠페인 리디렉션을 업데이트하는 경우를 예로 들 수 있습니다.

 이 아키텍처에서는 오리진 요청 이벤트에 구성된 Lambda@Edge 함수가 모든 캐시 미스(cache miss)에 대해 실행되어 S3 또는 DynamoDB와 같은 외부 규칙 스토리지를 통해 어떤 리디렉션 규칙을 적용할지 확인합니다. 규칙은 선택한 스토리지에서 직접 관리되며, 그 위에 간단한 UI를 구축하여 관리를 용이하게 할 수 있습니다. S3 기반 스토리지와 인증된 관리 UI를 사용하는 이 아키텍처의 예는 이 블로그에 설명되어 있습니다.

리소스

이 페이지의 내용이 도움이 되었나요?