[Next.js] 같은 네트워크 망에 연결된 다른 컴퓨터에서 테스트 하는 방법

같은 네트워크 망에 연결된 다른 컴퓨터에서 테스트 하는 방법

들어가며

• Next.js 로컬 개발 서버를 같은 네트워크 망에 연결된 다른 컴퓨터(또는 스마트폰 등)에서 테스트하는 방법을 간단하게 정리해본다.

 

방법

(1) 서버를 로컬 IP로 바인딩하기

• 기본적으로 @next dev@는 localhost (127.0.0.1)에서만 실행되어 외부에서 접근할 수 없다.
• 외부 기기에서 접근하려면 로컬 IP에 바인딩해야 한다.
• 아래와 같이 터미널에서 명령을 실행하여 로컬 서버를 실행하거나 @package.json@ 파일의 @scripts@ 부분을 다음과 같이 수정해준다.

$ next dev -H 0.0.0.0

 

/package.json

"scripts": {
  "dev": "next dev -H 0.0.0.0"
}

 

(2) 로컬 IP 확인하기

• Next.js 개발 서버를 실행하는 컴퓨터의 로컬 IP를 확인해준다.
• 아래의 명령을 터미널에 실행하여 내 컴퓨터의 IP 주소를 확인한다.

$ ifconfig | grep inet    # MacOS / Linux

$ ipconfig    # Windows

 

윈도우에서 확인하기

• 윈도우 터미널에서 @ipconfig@ 명령을 실행하면 아래 내용이 출력되는데, @IPv4 주소@ 부분(✅)을 확인한다.

Windows IP 구성


무선 LAN 어댑터 로컬 영역 연결* 1:

   미디어 상태 . . . . . . . . : 미디어 연결 끊김
   연결별 DNS 접미사. . . . :

무선 LAN 어댑터 로컬 영역 연결* 2:

   미디어 상태 . . . . . . . . : 미디어 연결 끊김
   연결별 DNS 접미사. . . . :

무선 LAN 어댑터 Wi-Fi:

   연결별 DNS 접미사. . . . :
   링크-로컬 IPv6 주소 . . . . : *******************
   IPv4 주소 . . . . . . . . . : 192.168.0.21   ✅
   서브넷 마스크 . . . . . . . : 255.255.255.0
   기본 게이트웨이 . . . . . . : 192.168.0.1

이더넷 어댑터 Bluetooth 네트워크 연결:

   미디어 상태 . . . . . . . . : 미디어 연결 끊김
   연결별 DNS 접미사. . . . :

이더넷 어댑터 이더넷:

   미디어 상태 . . . . . . . . : 미디어 연결 끊김
   연결별 DNS 접미사. . . . :

 

(3) 다른 컴퓨터에서 접속해보기

• 같은 네트워크에 연결된 다른 컴퓨터에서 다음과 같은 주소를 입력하여 접속한다.
• 다른 컴퓨터에서 구동되고 있는 로컬 서버에 접속할 수 있게 된다.

http://[(2)에서 확인한 IPv4 주소]:3000    # http://192.168.0.21:3000