CloudFront에 멀티 오리진을 설정할 때 착각으로 막힌 이야기

3행으로 알 수 있는 개요


  • CloudFront에서 S3 및 API Gateway를 멀티 오리진으로 설정하여 동일한 사용자 지정 도메인으로 만들려고했습니다.
  • 무한히 missing authentication token 에서 화난
  • API Gateway의 리소스 계층 구조와 CloudFront의 Behavior의 Path Pattern이 일치하지 않는 것이 문제였습니다.

    주제



    S3에 프런트 엔드 파일을 배치하고 CloudFront를 사이에 끼우는 일반적인 (?) 형식
    이 때 페이지의 일부 콘텐츠에 대해서는 정기적으로 내용을 갱신하고 싶었으므로 API 경유로 취하도록 했다
    API 엔드포인트도 웹페이지의 맞춤 도메인과 동일한 도메인을 사용하고 싶었기 때문에 CloudFront에 멀티 오리진 설정을 하고 배분하기로 했다


    이 설정을 시도하려고 missing authentication token가 반환된다는 전형적인 실수에 빠져 원인을 모르고 1주일 이상 막혔다는 이야기

    원인



    처음에 API Gatewa의 리소스는 아래와 같이 루트 바로 아래에 API 엔드 포인트를 생성하여 prod 스테이지에 배포했습니다.


    그 상태에서 Origin과 Behavior의 설정은 아래와 같습니다.




    에서 https://hogedomain/api/endpoint 에 방문하여 missing authentication token 에서 화난
    OriginDoaminName/OriginPath가 Behavior의 Path Pattern까지 포함한 URL에 매핑되면 오해하여 API Gateway의 URL https://XXXXX.amazonaws.com/prod/endpointhttps://hogedomain/api/endpoint 에서 호출된다고 생각했기 때문

    실제로 https://XXXXX.amazonaws.com/prod/https://hogedomain/에 매핑되므로 위에서 액세스 할 수 없습니다.

    해결



    API Gateway 측 리소스에 CloudFront의 Path Pattern에서 설정하고 싶은 경로를 1계층 파는 것으로 원래의 의도대로 https://hogedomain/api/endpoint 에서 API Gateway URL이 호출된다
  • 좋은 웹페이지 즐겨찾기