'제 EC2에 고정 IP를 부여했는데, 배포 사이트가 이상해요...'

1. 들어가기 전에

AWS EC2에 프로젝트를 배포하신 동기 분에게 슬랙 DM이 왔다. '휘민님,혹시 카카오 Developer에 등록이 안되어 있으면 다른 데이터 가져오는데 문제가 생기나요?' 라는 질문을 받았다. 동기는 프론트엔드, 나는 백엔드로 2차 프로젝트를 진행했었다. 동기분과 이야기하면서 문제를 해결했는데 그 과정을 기록으로 남겨 놓고자 한다.

2. 상황

• 프론트엔드 : 리액트
• 백엔드 : 익스프레스
• 데이터베이스 : RDS mySQL
• PM2를 이용한 프론트엔드 / 백엔드 배포

위의 기술들을 사용했고, 아래와 같은 상황이 발생했다.

• 문제가 된 해당 사이트, 앞으로 A 사이트라고 부르겠음
  

• 정상 작동 시(또 다른 프론트엔드 팀원이 똑같은 환경으로 배포한 사이트)
  

3. 해결과정

1. 가장 먼저 카카오 developer에 A사이트의 루트 URI가 등록이 되어 있는지 확인했다. 이유는 일단 동기가 물어본 부분이었기 때문이다. 하지만 이미 등록이 되어 있었고, 내 생각에도 Redirect URI를 등록하지 않았다고 해서 백엔드에서 데이터를 못 받아오지는 않을 것 같았다.(내가 해당 ec2에 ssh로 접속할 수 없었기 때문에 서버의 상태를 확인하지 못했다.)

2. 개발자 도구에서 네트워크 탭을 확인해봤다. 확인해보니 빨간색부분이 카카오 API 중 지도와 관련된 API는 실패했고, 로그인과 관련된 요청은 문제가 없었다. 두 부분 다 백엔드와 통신을 하는 부분이 있다. 카카오 API와 통신 후 그 데이터를 가지고 백엔드와 통신하는 과정이 있기 때문에 백엔드가 문제가 있을 거라고 생각했다. (다 적고 나서 왜 저 부분만 에러가 나는지 확인해보니 프론트 개발자분들이 카카오 디벨로퍼에서 두 개의 앱을 생성해서 각각의 키를 가지고 있었고, 에러가 없던 로그인 IP는 관리하시던 프론트 팀원(a님)이 A 사이트의 URI 등록을 해주신 상황이라 네트워크 에러는 안났고, 맵 기능을 구현 하신 프론트 팀원(b님)은 변경된 A 사이트의 URI를 등록을 안 해주신 상황이라 해당 에러가 난 거였다. 하나는 에러가 나고 하나는 에러가 안 나도 기능이 동작을 안 했던 이유는 두 기능 다 백엔드와의 연동하는 부분이 있는데 여기서 문제가 있었다.)

3. 처음에는 네트워크 요청중에 <pending> 상태인 요청을 확인하지 못했다. 그리고 나는 도커를 이용해 배포를 했고, pm2를 사용해보지 못했기 때문에 펜딩 상태인 요청의 URI가 어떤 URI인지 몰랐다. 그래서 정상 작동하고 있는 사이트의 네트워크 탭을 살펴봤다. 값은 다르지만 IPv4의 형식으로 이루어진 비슷한 요청을 확인했고, response를 살펴본 결과 백엔드에서 준 데이터가 있는 것을 확인하고, A사이트의 백엔드에 문제가 있음을 확인했고, EC2에 접속해서 코드를 다시 확인해보실 것을 말씀드렸다.

4. 원인은 간단했다. 고정 IP 기능을 사용하면서 새로운 IP가 발급 됐다. 이 과정에서 백엔드의 API Endpoint의 값을 변경해주지 않았기 때문에 백엔드에서 데이터를 받을 수 없었다. 허무했다. ㅋㅋ 그래도 같이 문제 해결 과정에 참여해서 도움을 드릴 수 있어서 하나의 경험을 얻었다. PM2를 잘 모르다보니 적극적으로 도움을 드리지 못하고, 유추만해서 의견을 제시만 드렸다. PM2에 대해서도 한 번 살펴볼 필요가 있겠다.

4. 결론

• 원인은 간단한데 찾는데는 꽤나 애를 먹었다. 사실 a 사이트를 정상적으로 돌리는 건 금방 해결은 했지만, 네트워크 탭에 나오는 저 에러가 왜 발생하는데는 애를 좀 먹었다. 프론트의 여러 맥락들을 파악하지 못하고, 해결하자니 애를 먹은 듯 하다. 이래서 역시 커뮤니케이션이 중요하네... 물론, 프로젝트 끝난 지 두 달이 지나서 들여다봐서 더 애를 먹은 것도 크다.

• 카카오 developer에 URI가 등록이 안되면 카카오 API를 쓰는 페이지는 로직에 따라서 렌더링은 커녕 에러를 뿜을 수도 있다.
  - 카카오 맵 API 쓰는 페이지는 해당 페이지가 바로 렌더링을 해야되는데 URI가 등록이 안되서 바로 에러를 뿜었다.

  • 카카오 로그인은 특정 버튼을 눌렀을 때 동작하므로 페이지의 렌더링에는 문제가 없지만, 트리거를 발동시키면 에러를 발생시킨다.

• EC2의 퍼블릭 IP가 바꼈다면 로직에 따라서 각 프로젝트의 endpoint를 확인할 필요가 없다.(pm2에 호스팅되는 URI에 관계없이 항상 똑같은 endpoint를 가지게 하는 기능은 없을까?)