HTTPS 쓰고 싶어요 (1)

🚀 사건의 발단

1. FE에서 데이터를 못 가져오는 문제

아직 글은 안 올렸지만, FE를 vercel을 통해 배포했다.

문제는 api 요청을 localhost:8000 로 날리고 있어서 당연히 오류가 발생했다.

NEXT_PUBLIC_BASE_URL=localhost:8000

그래서 환경변수 설정을 통해 localhost가 아닌 EC2 퍼블릭 IP 주소로 바꿔놓으면 당연히 될 줄 알았다.

NEXT_PUBLIC_BASE_URL=52.xx.xxx.xx

그럼 그렇지 어림도 없다. 곧바로 Mixed Content 오류 발생.

이미지 출처: cloudfront

2. 브라우저에서 https로 입력하는 경우에 데이터를 못 가져오는 경우

사실 1번 문제도 문제지만, 그 전에 이 문제를 더 빨리 접했다.

EC2의 IP 주소를 52.xx.xxx.xx 라고 가정해보자.

브라우저 창에 http://52.xx.xxx.xx:8000/rackets 를 입력하면 올바른 결과를 가져온다.

{
  count:2,
  rackets:[
    {name:'Nanoray',brand:...}
     ...
  ]
}

근데 https://52.xx.xxx.xx:8000/rackets 를 입력하면 귀신같이 오류가 발생하더라.

그냥 처음엔 단순히 음... 인바운드 규칙에 HTTPS를 허용하지 않은 문제인 줄 알았는데, 그게 문제가 아니더라.

🌀 Mixed Content ?

MDN는 Mixed Content를 다음과 같이 설명한다.

An HTTPS page that includes content fetched using cleartext HTTP is called a mixed content page.

HTTPS를 사용한 페이지면서 감히 HTTP로 fetch를 한다? 어림 없지 ㅋㅋ

아무튼 위 두 문제를 해결하기 위해서는 HTTPS를 사용하는 것이 최우선이었다.

HTTPS를 사용하기 위해서는 도메인이 있어야 하니, 일단 도메인을 구매하러 가보자.

HTTPS는 무엇인가?
HTTPS를 사용하려면 왜 도메인이 있어야하나? 를 쓰고 싶지만, 그럼 글을 못 끝낼 것 같으니, 따로 정리해봅시다.

💸 도메인을 구매하자 (feat. 가비아)

꼭 가비아가 아니어도 되는데, 그냥 한글 지원하길래 가비아에서 샀다.

어렴풋한 기억에 전 직장에서 staging.xx.xxx 이런식으로 스테이징 환경과 프로덕션 환경의 주소가 다른게 기억이 나서, 다음과 같은 도메인을 신청했다.

staging-instance.zxc

결론부터 말하자면, 왜 그랬을까. (그래도 2500원이라 다행이다. 그냥 좀 물어볼걸)

그런짓은 하지말아야 했는데, 난 그 사실을 몰랐어

🛣️ AWS Route 53 설정

1. Route 53 호스팅 영역 생성하기

먼저 호스팅 영역을 생성하자.

도메인 이름에 내가 구매한 도메인 이름을 작성해준다.
본인의 경우 staging-instance.zxc 가 되겠다.

그 이외에는 별도의 설정 없이 생성을 누르면, 2개의 레코드가 생긴다.

레코드 이름	유형
staging-instance.zcx	NS
staging-instance.zcx	SOA

NS (Name Server) : 어떤 DNS가 실제 DNS 레코드를 가지고 있는지 알려주는 역할을 한다.

SOA (Start Of Authority) : 관리자의 이메일 주소, 도메인이 마지막으로 업데이트된 시간, 새로 고침 사이에 서버가 대기해야 하는 시간 등 도메인 또는 영역에 대한 중요한 정보를 저장한다.

가비아 네임서버 수정

방금 생성된 NS 유형의 레코드에 보면, 값/트래픽 라우팅 대상 항목에 4가지 주소가 적혀있게 된다.

이 값들을 구매한 도메인의 관리페이지에 들어가서, 네임서버 1~4차 값으로 수정해주면 된다.

EC2 Public IP 주소 등록

레코드 생성을 누른 후, 값에 EC2의 퍼블릭 IP 주소를 입력하자.
그리고 레코드 생성을 누르면?

레코드 이름	유형
staging-instance.zcx	NS
staging-instance.zcx	SOA
staging-instance.zxc	A

새로운 유형의 레코드가 생성된다.

A (Address) : A는 주어진 도메인의 IP 주소를 가리킨다.

👦 AWS Certificate Manager 설정

마지막으로 Certificate Manager에서 인증서를 요청해보자.

퍼블릭 인증서를 선택하고, 우리가 구매했던 도메인 이름을 적는다.

생성 이후에 해당 인증서를 클릭하면, 아래와 같이 도메인 란에 Route 53에서 레코드 생성 이 보인다.

해당 부분을 클릭하면, 한 개의 항목이 존재할 것이고, 해당 항목을 선택한 후 레코드 생성을 누르면 끝이다.

이렇게 생성을 마치고 Route 53의 호스팅 영역에 가보면 CNAME 유형의 레코드가 하나 더 생긴다.

레코드 이름	유형
staging-instance.zcx	NS
staging-instance.zcx	SOA
staging-instance.zxc	A
_112asdfa	CNAME

CNAME (Canonical Name) : 레코드 값에 IP 주소를 매핑하는 A레코드와 달리 CNAME 레코드는 도메인 주소를 매핑한다.

그럼 승인될 때까지 조금 기다려보자.

야호!

다음에느 로드밸런서를 이용해서, http 요청을 https 요청으로 바꿔보자

참고자료

https://www.cloudflare.com/ko-kr/learning/dns/what-is-dns/