사이드 프로젝트 - Dotto의 개발 일지 - 두달간의 여정 마무리

백엔드를 맡고 있는 형과 같이 발급받은 ssh key 를 등록을 하려는데 아무래도 가장 걱정됐던 부분은 요금 문제였다. 혹여나 요금 폭탄을 맞지 않을까하는 마음에 등록하기전에 ACM 에 붙어 있는 여러 서비스 링크를 따라가면서 인증서를 등록하고 난 다음에 어떤 구조로 흘러가는지 따라가봤다.

근데 뭔가 이건 상당히 잘못됐다라는 느낌을 많이 받았다. 

 

( 배보다 배꼽이 더 큰 느낌... )

 

사실 그냥 이런 서비스도 있으니까 한번 사용해봐라~~ 이런 글이였는데 둘 다 처음이다 보니...무조건 써야하는줄 알았다.

"아니 이게 맞아...? 저거 다 써야한다고?????" 딱 이런 느낌...ㅎㅎ

 

그래서 다시 각자 알아보기로 하고 저날 인증서 등록은 포기하고 일단 프론트를 다시 넷리파이로 옮겨놨다.

 

몇일 지나고 회사에서 aws에 새로운 링크를 배포할 일이 생겼다.

그래서 쿠버네티스를 사용하고 있기 때문에 쿠버네티스 설정을 보고, 배포관련하여 대리님한테 관련 이야기를 듣고 배포까지 하고 다시 HTTPS 관련 레퍼런스를 찾아보는데 문뜩 든 생각

 

"회사에서도 도메인은 1 개에 여러 하위 도메인을 묶어 놓는데 왜 우리는 도메인을 여러개 붙일 생각을 했을까?"

 

(처음에 도메인을 Netlify에다가 등록을 해놨기 때문에 백엔드에서 도메인이 없어서 하나 더 구입해야하는 줄 알았다...)

 

그리고 관련 레퍼런스를 찾아보는데 우리와 같은 문제를 겪는 사람이 단 한명도 없다?? 이건 말이 안된다.

"이건 우리가 처음부터 잘못하고 있다." 라는 생각이 확 들었다...

 

다시 처음으로 돌아가보자.

처음부터 다시 차근차근 해보자라는 생각에 일단 DNS 정보를 Netlify에서 Route53으로 옮겨달라고 요청드렸다.

그리고 2일 쯤인가.. 지나고 내가 생각했던 내용을 설명해 드렸다.

 

일단 확인해볼 것

 

1️⃣ 도메인 관리를 Route53으로 옮긴 후에 DNS 정보를 넷리파이 정보가 아닌 Route53으로 등록한 다음, 이 도메인을 넷리파이 주소로 봐라보게 해서 사이트가 들어가지는지 확인

 

A Name으로 넷리파이 로드밸런서 IP를 등록하고

C Name으로 배포된 넷리파이 주소를 등록

 

내 생각이 맞다면 dotto.site로 들어왔을 때 넷리파이를 봐라보게 했기 때문에 사이트에 접속이 돼야한다.

결과는 맞았다. dotto.site로 접속을 했을 때 넷리파이에 배포한 사이트로 접속이 되면서 URL은 dotto.site로 나오는 것.

 

그렇다면 다음 단계

 

2️⃣ 백엔드를 무조건 HTTPS 로 올린다. 단 이번엔 cerbot에서 인증서를 발급 받은게 아닌 구입한 도메인으로 ACM 에서 인증서를 발급받는 것.

 

그 전에 걱정했던 부분이 로드밸런서였다. 로드밸런서를 사용하면 혹시라도 큰 금액이 과금되지 않을까 하는 문제도 있었지만 굳이 로드밸런서를 써야하나 라는 생각이 있어서 만들지 않았었는데 ACM 에서 인증서를 발급 받으면 로드밸런서를 써야했고 또 찾아보니 인증서 발급해주는건 무료라 하니 안해볼 이유가 없었다.

 

참고용 블로그 따라 인증서를 발급 받고 로드밸런서를 만들고 하니 드디어 백엔드를 HTTPS 로 올리는데 성공했다.

 

하지만 하나 성공하면 뭐다??  또 다른 문제가 생기지

 

백엔드를 HTTPS 로 올리면서 dotto.site 라는 도메인을 가져갔기 때문에 프론트에서 이 도메인을 사용하지 못하는 것...

 

그래도 거의 다 온듯 했다.

 

여태까지 생각한 흐름을 정리한 결과

인증서를 발급 받을 때 dotto.site에 대한 것만 받았었는데 dotto.site와 *.dotto.site로 발급 받아서

 

프론트의 경우는 dotto.site, www.dotto.site를  를 사용하게 하고 백엔드의 경우는 api.dotto.site를 사용하여 서로 각자의 로드밸런서를 봐라보게 하는 것으로 이야기를 하고 각자 집가서 마저 해보는걸로 했다.

 

(카페 마감이라고 쫒겨남...)

 

다시 인증서를 발급 받고 dotto.site에 Netlify를 연결하고 api.dotto.site에 백엔드를 연결하고

백엔드가 연결이 잘 됐는지 포스트맨으로 계속 쏴보고

정상적으로 응답값을 보내주길래 바로 프론트에서 호출해보는데 예상이 맞다면 무조건 CORS가 나와야한다.

백엔드에서 CORS 처리를 해주지 않았기 때문에 무조건!!!

 

호출한 결과 CORS 똬악!!

 

Access to fetch at ‘https://api.dotto.site’ from origin ‘https://www.dotto.site’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

 

 

CORS가 이렇게 반가울 수가 있나..😭😭😭

 

여기까지 오는데 두달이나 걸렸어요...

저때가 새벽 4시 였는데 엄청 졸면서 했다. 근데 저 문구 보자마자 잠이 확 깸

바로 백엔드에서 CORS 설정해 주고 다시 호출하니 스웨거에서나 봤던 응답값이 콘솔에 똬악!!!

 

 

성공한거 확인되자마자 바로 꿈나라행

 

 

아쉬운점이 있다면 ALB 만들면서 겪은 문제점들이 있는데 너무 졸면서 해가지고 해결하는 과정을 놓쳐버렸다..

기회가 된다면 혼자서 처음부터 해보고 싶다라는 생각이 들었다.

 

 

---

 

참고

https://it-eldorado.tistory.com/129

https://pgmjun.tistory.com/69