[AWS] AWS S3 정적 웹 호스팅 + 가비아 도메인 연결 + CloudFront HTTPS 설정하기

가비아에서 도메인을 구매한 후, AWS S3에 정적 웹 호스팅용 버킷을 생성합니다.

이때 버킷 이름은 구매한 도메인 이름과 정확히 일치하도록 설정해야 합니다.

 

이후 만든 버킷 -> 권한 탭에 가서 아래 권한을 추가합니다.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

 

이제 Route 53 서비스로 이동후 '호스팅 영역'을 클릭한 후, '레코드 생성' 버튼을 눌러줍니다.
레코드 유형은 일반적으로 A레코드(A - IPv4 주소)를 선택하고,  트래픽 라우팅 대상은 'S3 웹사이트 엔드포인트'로 설정합니다.

이후, 레코드 테이블에서 NS 타입의 네임서버(NS) 값 4개를 확인합니다.
각 값의 맨 끝에 있는 마침표(.)는 제거한 후, 가비아 도메인 관리 페이지로 이동해 네임서버 설정 항목의 1차 ~ 4차에 순서대로 입력해줍니다.

이 작업을 통해 가비아 도메인이 AWS Route 53과 정상적으로 연결됩니다.

 

변경 사항이 즉시 반영되지는 않으며, 적용되기까지는 최대 몇십분까지 소요됩니다!

 

 

---

 

CloudFront로 정적 웹사이트에 HTTPS 적용하기

 

AWS Certificate Manager(ACM) 서비스로 이동한 후, 리전을 반드시 버지니아 북부(us-east-1)로 변경합니다.
이는 CloudFront가 글로벌 서비스이기 때문에, 인증서 사용 시 버지니아 북부에 위치한 인증서만 지원하기 때문입니다.

이제 ‘인증서 요청’ 버튼을 클릭하고, 도메인 이름에는 구입한 도메인과 함께 와일드카드 도메인(*.도메인)도 함께 입력해줍니다.

 

 

 

발급을 완료하면 검증 대기중이 됩니다.

 

해당 인증서를 클릭 후, Route53에서 레코드 생성 버튼을 눌러서 레코드 생성을 눌러줍니다.

상태가 '발급됨'으로 바뀌면 인증서의 ARN을 복사후 CloudFront 서비스로 이동합니다.

 

CloudFront서비스의 배포 생성을 클릭후 원본 도메인에 S3의 정적 웹 호스팅 url를 입력합니다.

 

 

CloudFront 배포 설정에서 추가로 변경해야 할 항목은 총 4가지입니다.

우선 뷰어 프로토콜 정책의 Redirect HTTP to HTTPS로 변경합니다.

Redirect HTTP to HTTPS로 설정하여 HTTP 요청을 HTTPS로 자동 리디렉션되도록 합니다.

 

또한, 캐시 키 및 원본 요청(Cache key and origin requests) 항목에서 Legacy cache settings를 선택한 뒤, 객체 캐싱(Object caching)을 Customize로 변경하고, 기본 TTL(Default TTL) 값을 0으로 설정합니다.

Default TTL 값을 0으로 설정하면 CloudFront가 캐싱을 하지 않게 되어, 정적 파일(html, css, js 등)을 수정했을 때 변경 사항이 즉시 반영됩니다.
또한, 항상 원본에서 최신 파일을 불러오기 때문에, 개발 중 변경 사항을 빠르게 테스트할 수 있어 개발 환경에 매우 유리합니다.

 

 

추가로, 아래로 스크롤하여 대체 도메인 이름(CNAME) 항목에 S3 버킷 이름(도메인 이름과 동일) 을 입력합니다.
그다음, Custom SSL Certificate 항목에서는 앞서 생성한 인증서(ACM) 를 선택해줍니다.

 

 

 

---

 

현재는 Route 53에서 설정된 도메인이 S3 웹사이트 엔드포인트를 직접 가리키고 있습니다.

이제는 CloudFront를 중간에 끼워 넣어, 도메인이 CloudFront를 거쳐 S3로 연결되도록 해야 합니다. 이를 위해 Route 53에서 기존 S3 웹사이트 엔드포인트에 연결된 레코드를 CloudFront 배포 도메인으로 수정해줍니다.

 

 

 

이렇게 설정하면 사용자 요청은 먼저 CloudFront로 전달되고, 이후 CloudFront가 S3에서 정적 파일을 가져오는 구조가 됩니다. 결과적으로 HTTPS 적용이나 캐싱 전략 등 CloudFront의 다양한 기능을 활용할 수 있게 됩니다.

 

---

모든 설정이 완료되었습니다. 변경 사항이 적용되기까지는 몇 분 정도 시간이 소요될 수 있습니다.
잠시 후 웹사이트에 다시 접속해보면, 기존에 표시되던 "보안되지 않음" 메시지가 사라지고, HTTPS가 적용된 안전한 연결로 표시되는 것을 확인할 수 있습니다. 캐시 때문에 이전 설정이 계속 보일 수 있습니다. 이럴 경우 브라우저 캐시를 삭제하거나 시크릿 모드로 접속해보시길 추천드립니다.

 

 

 

 

 

 

[참고]

https://www.youtube.com/watch?v=RbJ4-GWckeM&t=722s