[Knoticle] 문제해결과정 : Next SSR axios DNS 문제

문제 해결 과정

발생한 문제

서재페이지, 뷰어페이지를 Next getServerSideProps를 사용해서 SSR 적용 후 axios ECNNREFUSED 에러 발생

원인 분석

• 이전 develop에서 변경된 사항은 SEO에 관련한 타이틀,메타태그 추가와 SSR적용이었다.
• SSR이 적용되지 않은 메인,검색,에디터 페이지는 정상작동, SSR을 적용한 서재,뷰어 페이지만 에러가 발생했다.
• 하지만, 팀원 4명 중 나한테만 이러한 현상이 나타났다.
• SSR이 적용되지 않은 브랜치에서는 에러가 발생하고 있지 않았다.

이러한 상황을 종합해서 문제를 해결하기 위해서 여러가지 시도를 해봤다.

문제 해결 시도

1. 서버 확인 보통 axios ECNNREFUSED 에러는 통신하려는 서버가 꺼져있을때 많이 발생하는 에러로 확인했다. 하지만, 나의 경우에는 다른 페이지는 정상작동을 하고 있어서 서버가 꺼져있는 상태는 아니였다. console의 에러를 확인해보니 address가 정상적으로 들어가지 않은 것으로 확인되고, 에러도 서버를 확인할 수 없을 때 발생하기 때문에 정상적인 주소로 요청을 보내지 못하고 있다고 생각했다.
2. axios 직접 사용 및 주소 입력 기존에는 api함수와 env를 사용해서 요청을 보내고 있었다. env를 읽지 못하거나, api함수를 Next의 서버에서 읽지 못할 수 있다고 생각해서 직접 사용으로 변경해봤다. 하지만, 같은 에러를 발생하고 있어 api함수와 env는 모두 잘 적용되고 있었다.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const [bookId, articleId] = context.query.data as string[];

  const bookres = await axios.get(`http://lacalhost:8000/api/books/${bookId}`);
  const book = bookres.data;
  const articleres = await axios.get(`http://lacalhost:8000/api/articles/${articleId}`);
  const article = articleres.data;
	
	//이전 코드
  // const book = await getBookApi(bookId);
  // const article = await getArticleApi(articleId);
  return { props: { book, article } };
};

1. Next ssr의 문제확인
2. Next ssr로 변환하면서 에러가 발생했기 때문에 Next의 공식문서도 확인하고, 직접 csr로 변환했다가 ssr로 다시 변환해봤지만… Next에서는 큰 문제를 발견할 수 없었다.
3. node v17 DNS.lookup 방식 변경 여러가지 방법을 검색해보던 중 정답을 찾았다. node v17 이상에서는 loaclhost를 IP주소로 변환해야하는데 ipv4의 값과 ipv6값이 모호해져서 발생하는 에러였다. 하기 코드는 실제 내 맥북에서 /etc/hosts의 값으로 localhost가 127.0.0.1(ipv4) ::1(ipv6) 두개인 것을 확인할 수 있다.

문제를 해결하는 방법은 두가지다.

1. localhost 대신 127.0.0.1을 정확하게 입력한다.
2. hosts의 ipv6 값을 주석처리한다.

이 문제는 많은 사람들이 node v17이후로 경험하고 있는 문제였으나, 정확한 레퍼런스 자료를 찾기 힘들었다. 거의 40~50개의 자료를 확인한 후 해결할 수 있었다. 이 문제는 실제로 3시간 전에도 node.js issue에 열심히 커밋이 올라오고 있었다.

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost -> 주석처리하는 것이 좋은가?

정리

문제를 해결하면서 많이 고민하고, 당황했었다.

코드를 잘 못 입력하거나, 로직이 틀린게 아니라 내가 모르는 부분에서 문제가 발생하니 원인을 예상하기가 너무 어려웠다.

그래도, 주어진 상황에서 하나씩 확인하고 찾아보면서 해결하는 과정은 중요한 경험이라고 생각한다.

문제는 해결했지만, DNS ipv4, ipv6 등 더 공부해야 할 내용이 많은 것 같다.

Reference

https://github.com/nodejs/node/issues/40702

Unable to connect to establish a TCP connection (ECONNREFUSED) · Issue #40702 · nodejs/node