Vite localhost 로컬 개발 서버 모바일 접속

요즘 사내 프로젝트에서 모바일 페이지 작업을 해서 모바일 기기로 현재 개발중인 페이지를 띄워서 확인하고 싶었다.

원래 방법대로 개발 pc와 모바일을 똑같은 wifi 환경으로 두고, 모바일에서 ip주소:port번호로 접속했는데, 모바일 기기로 로컬 서버 접속이 안되는것 ..? 

계속 아래와 같은 에러가 나고 모바일 접속이 안되는 문제가 있었다.

The URL can't be shown. 이라는 문구만 계속 나옴.. 

 

 

예-전에 리액트 프로젝트에서는 문제없이 잘 뜨던게... 왜 안뜰까? 

생각을 하다가 지금 프로젝트의 번들러는 Vite이므로 Vite의 문제인걸까? 하고 찾아서 해결 할 수 있었다. 

 

npm run dev 명령어로 개발 서버를 띄울때 vite 의 기본 호스트는 localhost, 기본 포트는 5173으로 설정된다.

하기 공식문서 캡쳐내용 참고

 

 

호스트가 localhost 인 경우 vite 서버를 띄운 곳에서만 ip주소를 수신받을 수 있고 브라우저 접속이 가능하므로 모바일 기기 연결할때 처럼 다른 ip주소로 외부적인 접속을 하고싶으면 따로 호스트를 설정해준다.

 

package.json 설정 변경하기

 

AS-IS

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
}

 

TO-BE

"scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
}

 

개발 서버 띄우기

이제 npm run dev로 개발 서버를 띄운다. 

 

 

이제 Local: 에 뜨는 localhost 주소뿐만아니고 아래 Network:로 뜨는 와이파이에 연결된 ip로도 접속이 가능해진다. 

 

wifi 로 연결된 ip 주소 확인

 

 

모바일 접속 

 

그럼 이제 설정한 host 주소로 개발서버를 접속할 수 있으므로, 

wifi 연결된 내 pc ip주소:port번호로 당연히 모바일로도 접속이 가능하다.!

즉, 192.168.0.3:5173/으로 모바일에 접속하면 바로 개발 화면이 나타난다. 

 

 

voila!

 

Reference 

https://ko.vitejs.dev/config/server-options.html

https://dev.to/bhendi/how-to-open-your-vite-dev-server-on-your-mobile-k1k

https://osg.kr/archives/648