[Next] CloudFront + 가비아로 HTTPS 도메인 연결하기

Gyuhan Park·2023년 8월 10일
1

nextjs

목록 보기
4/8
post-custom-banner


이전글에서 next serverless를 이용하여 CloudFront에 자동배포를 구현하였다. 근데 "CloudFront 주소가 마음에 안들어서 + 그냥 해보고 싶어서" 도메인을 붙이려고 삽질을 겁나 했다.....진짜 배포 관련해서 삽질이 제일 어지러운듯.... 아무튼 START

🔥 요약

  1. 가비아 도메인 구매 후 CNAME 설정
  2. ACM으로 SSL 발급
  3. CNAME 가비아 설정에 추가
  4. SSL 인증서 CloudFront 에 연결

🪓 삽질 TMI

일단 맨처음엔 무료 도메인을 이용했었는데 A, CNAME 에 대한 이해도가 낮은 상태에서 래퍼런스도 없다보니 도메인 연결이 쉽지 않았다. 연결은 되는데 https 가 안되서 크롬의 거부를 받는다. (인증서 발급을 절대 안해줌ㅠ) 그래서 몇번의 삽질을 거친 결과 거금 550원을 들여서 가비아의 도메인을 구매하였다.

🪓 가비아 TMI

일단 가비아 홈페이지에 들어가 원하는 도메인을 구매한다. 내 맥북에서는 보안프로그램이 안깔려서 윈도우를 사용하는 걸 추천한다. 어떻게 구매가 잘 됐으면 핸드폰으로 문자가 날라온다.

다른 블로그들은 네임 서버를 건드는데 CloudFront 로 배포된 사이트는 건들지 않아도 된다 (건들였다가 다하고도 삽질을 했다는)

🛠️ 가비아 도메인 설정

My가비아 -> DNS 관리툴 클릭 -> 레코드 수정 -> 레코드 추가
순서대로 누르면 화면에 아래와 같은 화면이 뜬다.

레코드 타입: CNAME으로,
호스트 이름: www@ 을 넣어주면 되고,
값: CloudFront 주소 를 넣는다.

일단 기본 세팅은 끝났다. 이 상태에서 도메인에 접근하면 403 forbidden 에러가 뜬다. SSL 인증서 발급을 해줘야 되는데 우린 ACM을 이용하려고 한다.

📖 ACM

ACM : AWS Certification Manager
AWS에서 HTTPS에 필요한 SSL 인증서 발급해주는 서비스다. 가장 삽질한 부분...왜 발급을 안해줘...이유를 안알려줘서 답답한데 잘되도 갱신되는 시간이 있어서 제대로 설정한건지를 기다려야 확인이 가능함 😭

📕 SSL 인증서 연결

SSL 인증서를 CloudFront 에 연결해야 한다.

CloudFront -> 편집 을 누르고 내려보면 이런 내용이 있다.
지금은 SSL이 발급된 상태라 이렇게 뜨지만 연결이 안된 경우 SSL의 option이 뜨지 않고, 연결된 SSL 인증서가 없으면 그럼 완료버튼이 실행이 안된다.

📕 SSL 인증서 발급

요청을 클릭하고 도메인명을 적어준다음 나머지 기본값으로 발급을 요청한다.
그럼 아래와 같은 화면이 뜨는데 이화면을 이젠 보기가 싫다...부적격...

이상태에서 인증서를 들어가보면 CNAME 이름CNAME 값이 존재한다. 이 값을 가비아에 추가해줘야 한다.
아까처럼 DNS 설정에 들어가 호스트 -> CNAME 이름, 값 -> CNAME 값을 추가해준다.

📕 SSL 인증서 연결 (2)

이렇게 설정하고 아마 10분 이내로 왔던 것 같다. 블로그 보면 걸리는 시간은 사람마다 다른 것 같은데 1시간 이내로 되는 것 같다. (이말 때문에 잘못했는데 계속 기다리긴 함)

이렇게 발급이 된 후 아까 연결하려고 했던 CloudFront 화면에 들어가면 SSL이 떠있다 !!!!!
대체 도메인 작성하고 SSL 추가하면 완료 !
이렇게 자물쇠를 눌러보면 SSL 인증서가 잘 발급된 것을 확인할 수 있다.

https://sihyung92.oopy.io/devops/gabia/1

profile
단단한 프론트엔드 개발자가 되고 싶은
post-custom-banner

0개의 댓글