[AWS] CloudFront Function 사용하여 index.html 생략하기

next.js 를 사용해서 만든 소스코드를 S3에 올리기 위해 정적 호스팅이 가능하도록 변환하는 과정에서 라우팅 방식에 문제가 생겼다.

(프론트 개발자가 아니라서 잘 모르지만 제가 대충 이해한거에오 ㅎ)

 

 

s3 엔드포인트를 사용하면 index.html 을 생략해도 라우팅이 가능한데

Cloudfront 도메인을 사용하면 라우팅이 되지않았다.

 

예를 들자면

 

http://{s3-endpoint}/data/ 에 접근하면

 

http://{s3-endpoint}/data/index.html 화면이 호출된다

 

그런데 Cloudfront 도메인은

 

https://{CloudFront-domain}/data/ 로 접근할 경우 제대로 호출하지 못한다.

 

따라서 찾은 방법은 CloudFront의 Function을 사용하는 방법이다.

 

 

---

CloudFront Function 사용방법

 

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html

파일 이름이 포함되지 않는 요청 URL에 index.html 추가 - Amazon CloudFront

 

[CloudFront - 함수 - 함수 생성] 을 통해서 함수를 만들어준다

위 링크에서 해당 함수에 대한 소스 코드를 얻을 수 있다.

 

이렇게 구성하고 게시하기!

 

게시를 안하면 안됩니다용

 

그리곤 CloudFront - 배포 - 동작 편집을 눌러줍니당

 

 

그리곤 하단에서 함수연결을 통해 미리 만들어두었던 함수를 연결해준다.

 

그러면 해당 오류는 사라집니다~

 

함수 유형중 Lambda@Edge 라는 것이 있는데 이건 람다를 활용해서 사용하는 함수이다.

예전에는 이걸 많이 사용했던 것 같고 람다엣지를 사용하다가 요금이 과금이 된 포스팅을 적지 않게 볼 수 있었다.

 

그렇다면 CloudFront Function과 Lambda@Edge 에 대한 비용에 대해 알아보자

---

CloudFront Function과 Lambda@Edge 에 대한 비용

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

Amazon CloudFront CDN - 요금제 및 요금 - 무료 체험

 

CloudFront Functions 호출 요금은 호출 1백만 개당 0.10 USD(호출당 0.0000001 USD)

전체 함수에서 총 호출 수에 대해 요금이 부과된다.

 

Lambda@Edge 요청 요금은 1백만 건당 0.60 USD(요청당 0.0000006 USD)입니다.

글로벌 Amazon CloudFront 이벤트에 대한 응답으로 함수를 실행할 때마다 요청 횟수를 계산. 

 

CloudFront Function이 Lambda@Edge 보다 저렴하지만 그래도 호출할때마다 비용이 발생한다는게 부담스럽다.

대체할 수 있는 방법이 있을까...