[Web] API 주소를 하드코딩하면 생기는 문제

출근 후 월간 보고 자료 제작을 위해 AWS에서 배포된 회사의 API를 호출 했는데 500 bad request 에러가 발생했었다.

혹시 몰라서 로컬 서버에서 분석을 실행하니 잘 작동했고, 이를 해결하고자 하였다.

 

시도 1. AWS 서버 간의 통신 문제인지 확인

사실 로컬 서버에서는 잘 되던 API가 AWS에서 안되던 것은 이번이 처음 발생했던 문제는 아니였다.

로컬 서버는 외부망에서 분석 서비스를 요청하는 것이기에 회사 와이파이로 접근하면 방화벽을 통과하는데 문제가 없었지만,

AWS 분석 서비스는 AWS에 존재하는 서버간의 통신이였기에 AWS의 한 서버에서 데이터를 내보낸 데이터를 다른 서버가 받을 때 방화벽에 걸렸던 것이었다.

 

팀장님께서 AWS의 서버에서 외부로 데이터나 요청을 전송할 때 NAT gateway를 통해서 요청 ip를 하나로 고정해서 내보낸다는 것을 기억하시고 NAT를 통해 나오는 ip를 방화벽에 허용함으로써 해결됐었다.

 

이번에도 이런 문제인 줄 알았지만, 이미 해결되었던 문제 였었고 서버의 ip나 다른 환경에 아무련 변화가 없다는 것을 SSH 원격 접속을 통해서 확인하고 이 문제는 아니라는 것을 알게 되었다.

 

시도 2. AWS와 로컬 소스 파일 확인

설마 두 환경의 소스코드가 다른지 확인을 해봤다.

당연하겠지만 형상관리가 되어있는 상태였고, 두 소스코드는 동일했다.

 

시도 3. API  자체에 문제가 있는지 확인

AWS내에 API를 담당하는 서버가 정상적으로 작동하는지 확인을 했다.

SSH 원격 접속을 통해 API 서버에 접속한 뒤 분석 기능을 실행해 어떤 로그가 나오는 지 확인해 보았는데, 
아무런 로그가 출력되지 않는 것으로 보아 API 요청조차 정상적으로 되지 않는 것이 문제라는 것을 알게 되었다.

 

진짜 문제점

알고 보니 API를 호출하는 route.js파일에 API 주소가 하드코딩 된 것이 문제였다.

const response = await fetch(`${process.env.API_URL}${url}?${params}`, {
    method: "POST",
    headers: {
      accept: "*/*",
    },
    body: "",
  });

이런 식으로 .env 파일에 저장되어 있던 주소를 불러와야 했는데 

  const response = await fetch(`API_서버_주소${url}?${params}`, {
    method: "POST",
    headers: {
      accept: "*/*",
    },
    body: "",
  });

이런 식으로 하드코딩 되어있어서 문제가 발생했던 것이었다.

시도 1번에서 언급한 문제를 해결하는 과정에서 로컬 서버의 env파일과 AWS 소스의 env파일의 API_URL 값이 다르게 할당되어 있었는데, 
그냥 하드코딩을 해버리고는 왜 안되지 하면서 30분동안 바보 짓 한게 너무 화났다.

 

env 파일의 url을 받도록 수정하니 AWS 서비스에서도 정상적으로 분석 기능이 작동하였다.