항해99 81일차 TIL : https로 배포하기(feat. AWS SSL 인증, ACM, 아마존 클라우드 프론트)

이번 실전프로젝트로 개발한 서비스를 배포하기에 앞서, 프론트엔드와 백엔드는 https로 배포하기로 합의했다.

왜 굳이 https로 배포하기로 했냐면

1. http로 하면 보안이 취약하니 https로 보안성을 올리려고
2. https에서만 쓸 수 있는 geolocation(현재 접속 위치의 위도 경도 좌표를 알려준다) 기능을 쓰기 위해
3. https가 있어보이니까

이러했다.

이 원대한 포부를 이루기 위해서는 장장 5시간의 화려한 대삽질이 필요했다. 다시는 나와 같은 불행한 개발자 지망생이 나오지 않길 바라는 마음으로, 15분컷으로 끝내는 https 도메인 등록 방법을 알려주겠다.

이 글은 프론트엔드가 https 도메인을 등록하는 방법을 소개하는 글이므로, 백엔드 https 도메인을 등록하는 방법은 다른 블로그를 찾아주세요.

15분컷을 시켜주겠다고 호언장담했지만, 나도 다른 블로그를 보고 했고 그 블로그들만 보고 하면 문제가 없기 때문에 긴 설명은 하지 않을 생각이다. 하지만 그 블로그들이 놓치는 부분을 짚어서 헤매지 않게 하는 것이 이 글의 진짜목표다. 그런 블로그들이 놓치는 디테일을 파고든 틈새 설명이라고 보면 된다.

먼저 나를 살리기도 하고 디테일이 없어 고생도 시킨 블로그들은 다음과 같다. 그래도 감사한 그저 빛같은 블로그니뮤......

https://velog.io/@seeh_h/aws-https

[배포] AWS S3로 배포한 앱에 HTTPS 적용하기

https://velog.io/@bluestragglr/S3-ACM-CloudFront-Route53%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EB%A6%AC%EC%8A%A4-%ED%8E%98%EC%9D%B4%EC%A7%80-https-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-34

S3, ACM, CloudFront, Route53으로 서버리스 페이지 https 배포하기 [3/4]

그럼, 이 블로그들이 놓치는 부분을 살펴보자

1. SSL 인증서를 받을 땐 꼭 버지니아로 설정하자.

https 도메인을 연결시키려면 SSL이란 인증서를 받아야 하고, 그건 AWS의 Certicicate Manager(ACM)에서 받을 수 있다. 보통은 왼쪽의 인증서 프로비저닝을 클릭해서 인증서를 받는다. 근데 여기서 오른쪽 상단의 서울이 보이는가? 지역이 서울로 설정된 상태로 SSL을 받으면 이 다음에 설명할 Cloud Front에서 막히게 된다. 그 설명은 밑에서 하겠다.

이렇게 '무조건' 지역을 미국 동부 버지니아로 해야한다. 이 부분을 반드시 놓치지 말고 버지니아로 설정하자.

2. 인증서 요청 과정에서 숨바꼭질 공략법

미국 동부 버지니아로 지역을 설정하고, 위에서 소개한 블로그에서 시키는대로 인증서 요청을 하다보면 이 상태에 도달하게 된다.

여기서 AWS님이 알아서 검증 해주겠지, 기다려보자고 하면 안된다. 추가행동이 필요하다는 저 오렌지색 박스안의 말대로 뭔가 해줘야 한다. 내가 AWS가 알아서 해준다고 믿다가 1시간 넘게 시간을 날렸다. 저 토글들을 클릭하면 

저 파란 버튼이 나온다. 저걸 눌러야 Route 53에서 필요한 처리를 해준다(Route53도 https 연결을 위해서 필요하다). 근데 다른 블로그들에선 저 파란버튼이 어디 숨어 있는지 알려주지 않는다. 토글만 누르면 되는데!! 어디 숨었는지 설명 좀 아낀다고 살림살이 나아졌습니까 블로거님들?? 저 파란 버튼을 누르고 좀 기다리면 검증보류가 발급완료라는 반가운 초록색 글씨로 바뀐다.

교훈 : TIL 블로그를 쓰면 디테일하게 쓰자. 더이상의 자세한 설명은 생략한다 식의 디테일을 생략한 설명은 도움을 구하려고 온 사람들에게 현타를 안기고 삽질을 유도합니다. 

3. 미국 동부 버지니아에서 SSL을 받았어야 하는 이유

이제는 Cloud Front에서 할일이 남았다. 다른 블로그가 시키는대로 Cloud Front에서 뭔갈 하다보면 이게 나오는데 

저 빨간 네모안에 있는 Custom SSL... 은 미국 동부 버지니아에서 받은 SSL만 취급한다. 다르게 말하면, 서울에서 받은 SSL이 있다면 저 Custom SSL... 은 비활성화되어서 선택할 수 없게 된다. 다른 블로그들에서는 미국 동부 버지니아로 설정하고 SSL을 받으라 하지만 왜! 그래야 하는지 진짜 설명은 없다. 그래서 미국 동부 버지니아 어쩌고 하는 내용없이 SSL 인증서를 받는 걸 소개한 블로그만 읽은 사람은 여기서 왜 저게 비활성화 된지 모른채 또 헤메게 된다. 나처럼.

교훈 : 어떤 행동을 반드시 해야 한다면 왜! 그래야 하는지 이유를 명시해주자. 사람은 왜! 해야 하는지  이유를 모른다면 제멋대로 굴게 된다.

4. 모든 절차를 성공적으로 수행해 https가 배포가 되었다면? 재배포때는?

 https로 성공적으로 배포했다고 하더라도 수정해서 재배포를 했는데 예전 버전으로 나오게 된다. 이 현상의 원인을 모른다면 또 내가 못난 탓인가 자책할 수도 있겠지만, 걱정말자. 그저 예전의 버전을 그대로 보여주는 캐시라는 친구가 남아서 새로워진 나를 보여주지 못하고 있는 것 뿐이다. 그러니 그 캐시를 없애면, 보여줄게 완전히 달라진 나!를 보여줄 수 있게 된다. 그 방법은 아래 블로그가 잘 설명해주고 있으니 그대로 따라하자. 디테일을 놓치지 않아서 내가 따로 설명할 필요가 없는 아주 아주 아주 아주 훌륭한 블로그다. 블로그는 이렇게 써야한다는 걸 보여주는 교과서적인 예시라할만 하다. 이거 쓴 블로거는 자신의 분야에서 아주 승승장구 하고 있을 것이다.

https://infraboy.tistory.com/5

[AWS] Cloudfront | CDN 캐시 삭제 방법

 그럼 이제 https 도메인 연결하는 걸 15분컷으로 끊을 일만 남았다. 화이팅!!!!!!!!!