Nuxt.js에서 만든 정적 사이트를 S3 + CloudFront에서 호스팅하는 패턴

Nuxt.js에서 SSR을 사용하지 않는 정적 사이트를 생성하고 (nuxt generate) S3에서 저렴하게 호스팅하면 각 페이지에 대해 index.html 파일이 생성되지만 링크 URL은 index입니다. html은 생략되기 때문에, 그대로는 Not Found가 되어 버린다”라는 과제가 있다. 일반 웹 서버에는 Apache의 경우 DocumentIndex, nginx의 경우 index와 같이 파일 이름이 생략되면 기본 파일 이름을 전달하는 설정이 있지만 상당한 동작이 필요합니다. 된다.

실현 방법에는 몇가지 패턴이 있는 것 같기 때문에, 자세한 것은 각각의 해설 페이지에 맡기도록(듯이), 그것들을 정리해 보았다.

참고

CloudFront + S3에서 정적 사이트를 운영할 때의 주의 사항 - Qiita

구성 패턴

1. S3에서 Static website hosting 수행

대량의 액세스가 발생하지 않고 HTTP만으로 좋은 경우는 이것이 가장 간단합니다.

정적 웹 사이트 호스팅의 인덱스 문서 설정에 index.html을 설정합니다.

사용자 지정 도메인에 게시하는 경우 버킷 이름을 FQDN으로 지정해야 합니다.

참고

Deploy a NUXT app to S3 in 5 minutes - freeCodeCamp

2. S3에서 정적 웹 사이트 호스팅을 사용하여 CloudFront를 통해 게시

1 외에도 CloudFront에서 S3에서 정적 웹 사이트 호스팅 된 URL을 Origin이라고합니다.

S3의 정적 웹 사이트 호스팅에 직접 액세스 할 수 있습니다.

S3에의 직접 액세스를 제한하는 수단은 있지만, 약한 방법밖에 없다? HTTP로의 직접 액세스를 절대로 하고 싶지 않다고 하는 경우는 주의.

CloudFront의 요청에 특정 사용자 지정 헤더를 부여하고 S3에서 이를 확인합니다.

CloudFront의 Edge는 다양하고 변동하기 때문에 IP 제한은 현실적이지 않습니다.

참고

How to Deploy on AWS w/ S3 and Cloudfront? - Nuxt.js 공식

S3+CloudFrond에서 Nuxt.js(vue)의 HTTPS 정적 사이트 구축 및 배포

3. CloudFront 오류 페이지 설정에서 index.html 반환

S3에서 Static website hosting을 수행하지 않고 CloudFront에서 S3 버킷을 Origin으로 지정합니다.

index.html이 생략되어 403이 될 때 표시되는 오류 페이지로 index.html을 반환하도록 설정합니다.

여담) CloudFront 에 「Default Root Object」라고 하는 그것 같은 설정은 있지만, 이것은 정말로 루트 밖에 효과가 없기 때문에 도움이 되지 않는다.

의미 적으로는 에러 페이지로서 표시하게 되므로, 조금 기분이 나쁘다. (개인의 감상입니다)

참고

Nuxt의 SPA를 S3+CloudFront에서 호스팅합니다. 배포는 CodeBuild에서 자동화 - 액트 인디 개발자 블로그

Nuxt.js로 만든 정적 사이트를 CloudFront + S3로 배포 할 때 Tips - @ryoheimorimoto

4. Lambda@Edge에서 index.html로 다시 씁니다.

CloudFront에 대한 액세스를 훅하고 자체 처리가 가능한 Lambda@Edge를 사용하여 index.html을 부여하여 Origin에 요청합니다.

설정이 상대적으로 번거롭고 Lambda에 추가 비용이 듭니다.

참고

Implementing Default Directory Indexes in Amazon S3-backed Amazon CloudFront Origins Using Lambda@Edge - AWS Compute Blog

할 수 있었다! S3 오리진에 대한 직접 액세스 제한과 인덱스 문서 기능을 공존시키는 방법 - Developes.IO

nuxt generate + S3 + CloudFront + Lambda Edge에서 정적 사이트 구축 및 빠져있는 포인트 및 솔루션 - Qiita