CloudFront를 사용하여 Amazon S3에서 호스팅되는 정적 웹 사이트 제공

Cloud Resume Challenge의 파트 2/n

청크 1: 프런트엔드 구축

S3에서 Next.js 웹사이트를 구성하고 나면 웹사이트 엔드포인트http://cindy-crc.s3-website-us-east-1.amazonaws.com/가 HTTP임을 알 수 있습니다. 이는 웹 사이트 URL이 보안을 위해 HTTPS를 사용해야 하고 여기에서 CloudFront를 사용해야 하기 때문입니다.

스택:

Next.js

아마존 S3

Amazon CloudFront

이전 에서 기억하겠지만 이 작업을 계속하려면 S3 버킷에 연결된 모든 버킷 정책을 제거하고 모든 퍼블릭 액세스를 차단해야 합니다.

오리진 액세스 ID(OAI)에 의해 제한되는 액세스와 함께 REST API 엔드포인트를 오리진으로 사용합니다.

CloudFront 배포 생성

주로 팔로우Use CloudFront to serve a static website hosted on Amazon S3

Amazon CloudFront console에서 배포 생성을 선택합니다.

원본 도메인: cindy-crc.s3.us-east-1.amazonaws.com(드롭다운 메뉴에서)

이름: cindy-crc.s3.us-east-1.amazonaws.com(자동 입력되어야 함)

S3 버킷 액세스: 예 OAI 사용(버킷은 CloudFront에 대한 액세스만 제한할 수 있음)

원본 액세스 ID에 대해 새 OAI 생성을 선택하고 새로 생성된 OAI를 선택합니다

.

버킷 정책: 예, 버킷 정책을 업데이트합니다.

기본 루트 개체 - 선택 사항: index.html

배포 만들기를 클릭하고 마지막 수정 상태가 배포 중에서 날짜로 바뀔 때까지 기다립니다. 5분 정도 걸릴 수 있습니다

.

배포 도메인 이름 링크https://d1ij0wngzhbeyc.cloudfront.net를 방문하여 이력서 웹 사이트

를 볼 수 있어야 합니다.

문제 해결

액세스 거부 오류가 발생하는 경우 버킷 정책 때문일 수 있습니다. 모든 공개 액세스를 차단하고 CloudFront 배포가 S3에 액세스하는 것만 허용해야 합니다. S3 버킷 정책은 다음과 같아야 합니다.

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
-                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity Distribution-ID"
+                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E392Q20ZNZ7N4X"
            },
            "Action": "s3:GetObject",
-            "Resource": "arn:aws:s3:::Bucket-Name/*"
+            "Resource": "arn:aws:s3:::cindy-crc/*"
        }
    ]
}