[AWS] Route53 + CloudFront + S3 + ACM 정적 페이지 배포하기 (HTTPS 배포, 가비아 도메인 연동)

 

[AWS] Route53 + CloudFront + S3 + ACM 정적 페이지 배포하기 (HTTPS 배포, 가비아 도메인 연동)

AWS의 Route53, CloudFront, S3, ACM를 사용하여 정적 페이지를 배포하는 방법입니다. 저는 미리 가비아에서 도메인을 구입해둔 상태이기 때문에 해당 도메인을 연동하고 ACM으로 인증서를 발급하여 HTTPS로 배포하도록 하겠습니다.

---

1. S3 버킷 생성

우선 가장 먼저 AWS에 로그인하여 콘솔에서 s3를 검색한 후 클릭하여 서비스에 들어가주세요.

 

우측의 버킷 만들기를 클릭합니다.

 

버킷 이름을 작성하고 다른 옵션들은 그대로 둔 채 우측 하단의 "버킷 만들기"를 클릭 해주세요.

 

이후 생성된 버킷을 클릭하고 업로드 하려는 파일을 마우스로 올려서 업로드를 진행한 뒤 우측 하단의 "업로드"

---

2. AWS CloudFront 

이제 다시 콘솔에서 cloudfront를 검색하여 해당 서비스를 클릭한 후 "CloudFront 배포 생성"을 클릭해주세요.

 

배포 이름은 편하신데로 임의로 작성한후 하단의 Next를 눌러줍니다.

현재 포스팅은 S3를 기반으로 배포하기 때문에 Origin type을 Amazone S3로 지정해주고, 아래의 Browse S3를 클릭하여 버킷을 연결해주시면 됩니다.

Origin path - optional는 선택 사항이며 저는 S3 버킷에 iPortfolio라는 폴더가 기본적으로 있기 때문에 기본 경로로 설정하였습니다. 즉 도메인.com 으로 사용자가 접속할 경우 기본 경로를 "도메인.com/iPortfolio"가 됩니다.

만약 S3 버킷에 폴더 아래에 html, css, js 파일들이 있는 구조라면 폴더명을 작성해주시면 되며 S3 버킷에 따로 폴더를 한번 거쳐서 가는 형태가 아닌 html, css, js 파일들이 바로 있는 형태라면 빈값으로 두고 진행하시면 됩니다.

아래와 같이 저는 현재 iPortfolio 폴더 아래에 정적 파일들이 있는 형태이기 때문에 작성한 것 입니다. 

 

정적 페이지이기도 하고 잠깐 사용할 것이기 때문에 비용을 최소화 하기 위해 "보안 보호 비활성화"로 진행하였습니다.

마지막으로 하단의 Create distribution을 클릭하여 CloudFront 설정을 마무리 합니다.

---

3. AWS Route53

다시 콘솔에서 route53을 클릭하여 서비스에 들어가고 "시작하기" 버튼을 클릭해주세요.

 

"호스팅 영역 생성"을 선택하고 "시작하기" 버튼을 클릭하여 다음 단계로 넘어갑니다.

 

도메인 이름(ex. tistory.com)을 입력하고 "호스팅 영역 생성"을 클릭하여 Route53을 생성하고 마무리합니다.

---

4. AWS Certificate Manager (ACM)

이제 ACM을 사용하여 인증서를 발급하는 과정입니다. 콘솔 검색에서 ACM을 입력하여 Certificate Manager를 클릭해주세요.

 

우측 상단에서 리전을 "버지니아 북부"로 변경해줍니다.

 

※ CloudFront에 인증서를 사용하기 위해서는 ACM의 리전을 버지니아 북부(us-east-1)로 하여 사용해야 합니다.

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cnames-and-https-requirements.html?utm_source=chatgpt.com

 

이제 요청 → 퍼블릭 인증서 요청 → 다음을 클릭해주세요.

구매해두었던 도메인 이름을 추가합니다. 저는 "이 인증서에 다른 이름 추가"를 클릭하여 도메인을 추가 하였습니다. 인증서를 발급받을 도메인을 입력한 후 우측 하단의 요청을 눌러주세요.

예시) tistory.com / www.tistory.com  이와 같은 형태로 총 2개를 입력하였습니다.

 

인증서 생성이 완료되었다면 "Route 53에서 레코드 생성" 버튼을 클릭 후 레코드 생성을 진행해주세요.

 

처음엔 "검증 대기 중"으로 되어있으며 이후 가비아 도메인 연동 등 추가적인 설정 이후 완료될 것 이기 때문에 우선은 무시한 채 아래의 가비아 도메인 연동 설정을 진행해주세요.

 

---

5. 가비아 도메인 연동

가비아 홈페이지로 이동하셔서 로그인 후 우측 상단의 My가비아 → 도메인을 클릭해주세요.

 

미리 구매해둔 도메인을 확인하고 우측 "관리" 버튼을 클릭합니다.

네임서버 설정을 클릭해주세요.

 

AWS Route53을 보면 NS 유형에 총 4개의 값이 보일겁니다. 이 값들을 각각 가비아에서 1~4차의 호스트명에 입력하여 적용해주세요. 순서 상관 없이 값들을 채워 넣어주면 됩니다.

※ 가비아에 네임서버 입력 시 마지막에 . 을 빼주셔야 합니다.

---

7. 마무리 (CloudFront 대체 도메인 이름, Path 설정 및 Route53 A 레코드 등록)

다시 CloudFront 서비스로 들어가서 대체 도메인 이름 아래에 있는 "Add domain"을 클릭해주세요.

 

"Add another domain"을 클릭하여 도메인 입력란을 추가하고 구매한 2개의 도메인 주소를 입력해주세요.

예시) tistory.com / www.tistory.com

 

ACM 설정이 잘 되어 있으면 아래와 같이 기본적으로 연결되어 있으니 Next → Add domains를 눌러 마무리 해줍니다.

 

다시 CloudFront 서비스 화면에서 우측의 편집을 눌러주세요.

 

비용 절감을 위해 "Use North America, Europe, Asia, Middle East, and Africa"로 선택합니다.

 

스크롤을 조금 내리면    Default root object - optional가 있을텐데, 이는 사용자가 Root URL(/)을 요청할 경우 반환할 파일을 선택해주어야 합니다. 즉 예를들어 htts://도메인.com/을 입력할 경우 어떤 정적 페이지를 보여줄 것인가에 대한 옵션입니다.

저는 기본적으로 index.html 파일을 보여줄 것이기 때문에 index.html을 작성하였습니다. 설정 완료 후 "변경 사항 저장"을 클릭하여 CloudFront 설정을 마무리해주세요.

 

이제 마지막으로 Route 53으로 돌아와서 "레코드 생성"을 클릭해주세요.

 

A 레코드를 추가하고 별칭 토클을 한번 클릭하여 "CloudFront 배포에 대한 별칭"을 클릭하고 배포 선택을 클릭해줍니다.

이후 "다른 레코드 추가"를 눌러 www에 대한 설정도 똑같이 진행한 뒤 "레코드 생성"을 클릭하여 마무리해주시면 됩니다.

---

배포 확인하기

이제 배포한 도메인으로 접속하면 아래와 같이 정적 페이지가 배포된 것을 확인할 수 있습니다.