S3와 CloudFront에서 정적 웹 사이트 호스팅을 시도했습니다.

코로나의 영향으로 극찬 재택 근무중인 Risako입니다

계속 집에 있으면 기분이 우울하거나 운동 부족 기분이 되거나 버립니다 ...
요즘은 아침에 일어나자마자 개 산책에 가거나 방의 양이 닿는 장소에서 일을 해 보거나 시행 착오하고 있습니다.

오늘의 테마는 'S3와 CloudFront에서 정적 웹사이트 호스팅을 해보았다'입니다.
집어 넣은 곳도 많이 있으므로, 자신의 비망록으로도 쓰려고 생각합니다.

목표

Cloudfront를 통해 S3에 저장한 정적 웹사이트를 독자적인 DNS로 열람한다.

사전에 준비하는 것

사용할 원하는 도메인 이름을 가져옵니다. (이번에는 hoge.ga라고합니다)

S3 버킷에 정적 웹사이트를 포함하여 탐색하고 싶은 것을 넣습니다. (이번에는 test.html 열람하기로 결정)

먼저 S3 버킷 설정에서

만든 S3 버킷 속성 → Static website hosting 열기

이 버킷을 사용하여 웹사이트 호스팅을 선택하고 색인 문서 오류 문서를 입력합니다. (이번에는 index.html과 error.html로 둡니다.)

*블록 공개 액세스가 모두 꺼져 있지 않으면 설정할 수 없으므로 주의
3. 버킷 정책에서 정적 웹사이트의 공개 설정을 구성합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your-s3-bucket>/test.html/*"
        }
    ]
}

일단 S3의 설정은 끝입니다.

그런 다음 CloudFront 설정

Cloudfront를 만들 때는 웹을 선택하여 만들 수 있습니다.
최소한, 변경해야 하는 항목을 기재합니다.

설정
Value

Origin Domain Name
만든 S3 버킷 선택

뷰어 프로토콜 정책
Redirect HTTP to HTTPS

CNAMES
설정하려는 DNS(test.hoge.ga)

SSL Certificate
Custom SSL Certificate(얻은 hoge.ga의 인증서 선택)