[NodeJs] localhost가 실행되었는데 127.0.0.1 에 접속되지 않는 경우

 

해결 방법 (결론)

결론부터 말하자면 NodeJs 버전 17 이상부터 서버 실행시 ipv6 프로토콜을 우선적으로 사용하기 때문에

ipv4 프로토콜의 루프백 주소인 127.0.0.1 은 연결이 되지 않는 것이다.

 

그래서 아래와 같은 설정을 추가해주면 된다.

import dns from "node:dns";

dns.setDefaultResultOrder("ipv4first");

 

2022.11.10

vite로 생성한 프로젝트에서 위와 같은 방법으로 완전히 해결되지 않는 경우가 발생했다.

또 다른 환경에서 프로젝트를 빌드하고, preview 모드로 실행한 경우였는데,

 

아래와 같은 방법으로 수정했다.

 

vite.config.ts

export default defineConfig({
  //...
  server: {
    host: "127.0.0.1",
    port: 5005,
  },
  preview: {
    host: "127.0.0.1",
    post: 5005,
  },
  //...

 

사건(?)의 개요 공유

이번에 구매한 맥북에 개발 세팅을 하면서 진행하고 있는 프로젝트를 옮기는데 문제가 발생했다.

 

vite(https://vitejs.dev/) 로 세팅한 react 프로젝트 이고, kakao map api를 사용한 프로젝트 였는데

윈도우에서 실행할 때는 잘 되던 kakao map api가 실행되지 않았다.

 

생각보다 원인을 찾는데 시간이 걸렸고, 그 내용을 기록하고 공유하고자 한다.

 

kakao api 는 많은 분들이 알고 계시겠지만, 웹에서 앱키를 사용하기 위해서는 도메인을 등록해야한다.

그렇지 않으면 401 권한 에러가 발생하기 때문에 정상적으로 사용할 수 없다.

 

그래서 kakao 개발자센터의 내 애플리케이션의 웹 플랫폼 도메인에 127.0.0.1를 등록해놓고 로컬에서 개발을 진행하고 있었다.

 

그런데, 이번에 구매한 맥북에 프로젝트를 받아오고, 실행하니 카카오맵 api 가 정상적으로 실행되지 않았다.

왜 그런가 보니 vite를 실행할 때 윈도우에서는 127.0.0.1 로 실행하는데, 맥북에서는 localhost 로 실행이 되어

카카오 개발자센터에 등록되지 않은 도메인이기 때문에 권한 에러가 발생한 것이다.

 

그래서 자연스럽게 127.0.0.1로 주소를 치고 접속했는데....

 

이런 화면이 떴다. 진짜 황당하고 당황스러운 순간이었다.

그래서 처음에 내가 맥북을 잘 몰라서 그런가? 아니면 m1이라 그런가?에 초점을 맞추어 계속 검색해봤다.

하지만 속시원한 답을 찾을 수 없었다. 자꾸 hosts 파일을 수정하라는데, 너무나도 정상적으로 설정되어있었다.

 

그래서 이번에는 왜 m1에서는 vite 서버실행이 localhost 로 되는걸까??라는 생각을 하게되었다.

이 때 이렇게 생각한 이유는 해당 프로젝트를 같이하고 있는 개발자가 이전에 맥북 프로를 사용했는데, 그 분도 해당 프로젝트가 전 맥북에서는 잘 되었고, 이번에 같이 노트북을 바꾸게 되었는데 바꾼 노트북에서 정상적으로 실행되지 않았기 때문에 m1 문제인가 했다.

예전에도 m1에 당했던 적이 있어서..

 

그러면서 m1 에서 localhost 와 127.0.0.1 이 다른 이유에 대해서 검색하기 시작했는데

127.0.0.1과 ::1 의 차이점에 대한 글을 보게 되었고,

127.0.0.1은 ipv4 프로토콜, ::1 은 ipv6 프로토콜의 주소를 뜻하는 것이라는 것을 알게되었다.

그러면서 hosts 파일에서 두 프로토콜모두 localhost 로 호스팅설정 되어있는 것이 기억났다.

 

그래서 mac, nodejs, ipv6 키워드를 가지고 검색해보니 이런 이슈를 찾을 수 있었다.

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

"localhost" favours IPv6 in node v17, used to favour IPv4 · Issue #40537 · nodejs/node

 

이번에 맥북에서 nodejs를 설치하면서 18버전으로 설치했던 것이 생각났다.

그에 따라 nodejs가 ipv6 프로토콜로 서버를 실행했던 것이다.

그러면서 자연히 127.0.0.1로 접속하면 당연히 안되는 것이었다. 그러면서 카카오맵이 안되었던 거고.

 

꼬꼬무를 통해 결국 원인을 찾았고,

위 이슈의 comment 중에 ipv4 프로토콜로 우선실행하도록 설정하는 내용이 있어서 참고하여 vite 에서 해당 내용을 설정하는 방법을 찾아 해결했다. 이후 127.0.0.1로 정상실행되면서 카카오맵도 정상적으로 실행되었다.

 

또 한번 실행환경의 중요성을 배워버렸다랄까..? 😵‍💫