🔥 TIL - Day 39

2차 프로젝트까지의 결과물을 프론트엔드와 백엔드로 나누어 배포를 해야 한다.
현재는 다 EB에 올라가서 작동중이다.

프론트 쪽만 독립적으로 배포하기 위해 SSR을 사용하는 부분을 CSR로 수정했다. (다행이 매우 적었음..)
(요즘에는 프론트앤드와 백엔드를 분리하기 위해 거의 CSR을 사용한다고 한다.)

📌 S3와 CloudFront를 이용한 웹 리소스 호스팅

S3 버킷에는 파일 등을 저장하는 기능과 더불어 웹 리소를 호스팅하는 기능이 있다.

S3 버킷에 HTML파일을 업로드하고 해당 버킷의 속성에서 정적 웹 사이트 호스팅을 설정해주면 쉽게 업로드된 HTML 파일을 호스팅 할 수 있다.

HTML 뿐만 아니라 CSS, JS, Image 등 웹 리소스 모두 호스팅의 대상이 된다.

호스팅 문제는 이걸로 해결됐는데 CloudFront는 왜 사용하는 것인가?

CloudFront를 사용하는 가장 큰 목적은 CDN 기능을 사용하기 위함이다.
CDN의 기능을 가장 짧게 설명하면 캐싱이다.
물리적으로 멀리 있는 클라이언트가 우리의 리소스에 접근시 빠른 응답을 내어주기 위해 AWS가 가진 여러 Region에 캐싱서버를 두어 응답시간을 줄일 수 있는 것이다.

이런 것과 더불어 여러 기능을 담고 있는 것 같으니 더 알아보자.

일단 CloudFront를 하나 생성한다.
생성할 때 원본도메인은 정적 웹 사이트 호스팅을 설정한 S3 버킷으로 하고 기본값 루트 객체는 CloudFront의 루트 경로로 접근시 보여줄 html 파일을 지정한다.

OK 일단 이렇게 하면 CloudFront의 도메인으로 들어가면 우리의 index.html을 확인할 수 있다.

📌 내가 구매한 도메인에 CloudFront의 도메인을 연결하고 HTTPS 사용하기

이제 CloudFront의 도메인을 우리가 가비아를 통해 구매한 도메인으로 변경한다.
가비아에서 구매한 도메인의 CNAME에 CloudFront의 도메인을 넣어두면 끝!

CNAME 레코드는 도메인 이름으로 다른 도메인 이름을 매핑시키는 DNS레코드이다.
지금의 경우 우리가 구매한 도메인으로 접근하면 CNAME으로 매핑된 CloudFront의 도메인을 찾는 것이다.

그럼 이제 우리가 구매한 도메인으로 CloudFront의 도메인에 접근할 수 있다.
접근할 수 있어야 하는데 아래와 같은 에러화면이 나온다. 🥺😭😰

🧐 CloudFront는 HTTPS를 지원한다.

현재 상태에서 CloudFront의 도메인으로 접근해보면 자물쇠가 채워진 걸 볼 수 있다. HTTPS를 사용하고 있다는 의미이다.

HTTPS를 위한 SSL인증서는 도메인 별로 가지고 있어야 한다. 하지만 우리가 구매한 도메인에는 인증서가 없다. 때문에 에러를 발생시키는 것이다. 인증서를 발급해보자.

CloudFront의 설정편집탭에서 작업한다.
일단 대체 도메인을 우리가 구매한 도메인으로 변경한다.

이제 인증서를 요청해야 하는데

Region을 지정해준다. 해당 Region으로 이동해서 인증서를 요청하거나 아래 인증서 요청 링크를 클릭한다.

인증서 요청 링크로 이동해서 퍼블릭 인증서 요청을 누르고 아래와 같이 설정한다.

요청을 하면 아래와 같이 검증 대기 중인 인증서가 나온다.

검증을 수행해야 하는데 앞서 검증 방법을 DNS 검증으로 선택했으므로 DNS 검증을 수행한다. 인증서의 세부내용을 확인하면 CNAME 이름과 CNAME 값을 확인할 수 있다.
(일종의 key-pair ?)

CNAME 이름과 CNAME 값을 가비아의 CNAME 레코드로 설정해줘야 한다.
CNAME이름은 메인도메인 앞까지 복사한다.
as...dsd1.www.abc.com의 경우 www까지 쭉 복사해서 CNAME 레코드의 호스트로 설정하고 해당 레코드의 값은 CNAME값 전부를 복사해서 넣어준다.

위 작업을 완료하고 잠시 기다리면 상태가 발급됨 으로 바뀌게 된다.
두 번 테스트를 해봤는데 처음에는 3분 안에 검증이 끝났는데 두번째에는 훨씬 오래 걸렸다. 침착하게 기다려보시길...

인증서를 발급받았으니 이 인증서를 CloudFront의 대체 도메인이 될 우리가 도매인이 사용할 수 있도록 CloudFront에 설정해준다.

• 대체 도메인 이름: 구매한 도메인
• 사용자 정의 SSL 인증서: 방금 Certificate Manager로부터 발급받은 인증서
  

변경된 설정을 저장하고 우리가 구매한 도메인으로 접근해보자.

자물쇠가 잘 채워져 있다. 우리의 도메인에서도 HTTPS를 사용할 수 있게 되었다.

📌 Route53의 네임서버로 변경

마지막으로 Route53으로 네임서버를 옮기자.
Route53으로 네임서버를 옮기는 가장 큰 이유는 관리 포인트를 AWS에 모으고자 하는 것이라고 한다. 일단 만들어보자.

가장 먼저 Route53의 호스팅 영역을 생성한다.
도메인 이름은 서브 도메인을 빼고 설정해줘야 한다. (이유는 잘 모르겠다..)

www.dhk-99.shop ❌
dhk-00.shop ⭕️

생성하면 두 개 레코드가 기본적으로 생성된다. 그 중 NS 레코드의 값을 확인한다.

4개 네임서버 도메인이 있을 것이다. 이 4개 네임서버를 가비아로 옮겨준다.
아래 보이는 1차, 2차, 3차, 4차 모두 변경해주면 된다.

Route53 쪽 네임서버 도메인을 보면 끝에 . (점)이 붙어있는데 이거 포함시키면 안됨!

네임서버를 등록하고 쫌 오래 기다리면 적용된다.