CloudFront Functions를 사용할 때 발생하는 URI 재작성 문제를 해결하려면 어떻게 해야 합니까?

3분 분량

Amazon CloudFront Functions를 사용하여 수신 요청의 URI 경로를 다시 작성하거나 변경하려고 했지만 URI 재작성에 문제가 발생했습니다.

해결 방법

CloudFront 함수를 올바른 캐시 동작과 연결하지 않았음

CloudFront 함수를 수정하려는 요청에 대한 올바른 캐시 동작 및 경로 패턴 설정과 연결했는지 확인하십시오. 여러 캐시 동작이 동일한 요청과 일치하는 경우, CloudFront는 우선 순위가 가장 높은 캐시 동작을 사용합니다.

다음 단계를 완료하십시오.

CloudFront 콘솔을 엽니다.
탐색 창에서 배포를 선택한 다음, 해당 배포를 선택합니다.
동작 탭을 선택한 다음, 각 동작의 경로 패턴을 검토합니다.

CloudFront 함수 실행 후 URI 경로가 일치하지 않음

CloudFront Functions 로그에서 ‘URI 경로 불일치’ 오류를 확인하십시오. 이 오류가 발생하면 함수 실행 후 다시 작성된 URI 경로가 예상 형식과 일치하지 않는 것입니다.

CloudFront 함수 코드를 검토하여 URI 경로를 올바르게 변경하는지 확인하십시오. URI 경로는 잘못된 문자를 포함할 수 없으며 앞에 슬래시(/)를 포함해야 합니다.

URI 경로 예시:

/analytics.js/v1/xT5Qstsd35FL5WgikA1ABwyCQUDDYPHx/analytics.min.js';

자세한 내용은 CloudFront 및 엣지 함수 지표 보기를 참조하십시오.

SSL 인증서가 오리진 및 요청된 도메인과 일치하지 않음

CloudFront 함수가 호스트 헤더 값을 다시 작성하고 이 값이 더 이상 SSL 인증서 도메인과 일치하지 않을 때 문제가 발생합니다. 그러면 CloudFront 함수가 SSL 인증서에 있는 도메인과 다른 도메인으로 요청을 전달합니다.

이 문제를 해결하려면 CloudFront 함수를 수정하여 호스트 헤더 값을 오리진의 SSL 인증서 도메인과 일치하도록 다시 작성하십시오.

예를 들어 오리진의 SSL 인증서가 example.com을 사용하지만 요청된 도메인이 www.example.com인 경우, CloudFront 함수에 다음 코드를 추가하십시오.

request.headers['host'] = ['example.com'];

이제 호스트 헤더는 요청을 오리진으로 전달하기 전에 example.com에 다시 작성됩니다.

SPA 배포에서 URI가 올바르지 않음

CloudFront를 통해 단일 페이지 애플리케이션(SPA)을 배포한 경우 정적 자산을 제외하고 index.html 파일을 제공하도록 요청을 재작성하기 위한 요구 사항을 확인하십시오. 예를 들어 요청은 JavaScript 또는 CSS 파일과 같은 정적 자산을 확인하지 않습니다.

CloudFront 함수에서 다음 코드를 사용하여 URI에 파일 확장자나 후행 슬래시가 있는지 확인할 수 있습니다.

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check whether the URI is missing a file name or a file extension.
    if (uri.endsWith('/') || !uri.includes('.')) {
        request.uri = '/index.html';
    }

    return request;
}

SPA에서 보낸 요청인 경우 URI를 /index.html로 다시 작성합니다. SPA에서 보낸 요청이 아닌 경우 URI는 변경되지 않으며 정적 자산에 대한 요청을 수정되지 않은 상태로 전달하도록 허용합니다.

URL을 변경할 때 URI에서 슬래시가 누락됨

CloudFront 함수를 사용하여 URL을 단축하거나 변경하는 경우 URI 시작 부분에 슬래시를 추가하여 URL 요청을 수락하십시오.

URL을 단축하는 CloudFront 함수 예시:

request.uri = '/' + newShortUrl;
return request;