Vite 로컬 개발 시 모바일 테스트하는 방법

Vite를 사용하여 로컬 개발을 진행할 때, 모바일에서도 UI를 확인하고 싶다면 vite --host 옵션을 활용하면 된다.

이를 통해 같은 네트워크에 연결된 모바일 기기에서도 개발 서버에 접속할 수 있다.

 

1. Vite 서버를 모바일에서도 접근 가능하도록 설정

package.json 수정

"scripts": {
  "dev": "vite --host"
}

 

패키지 스크립트를 수정한 이유 npm run dev를 돌린다.

결과적으로 터미널에 http://localhost:5173 이외의 http://[Ipv4]:5173 주소가 아래와 같이 추가로 제공된다.

 

npm run dev 실행 후, bash

 ➜  Local:   http://localhost:5173/
 ➜  Network: http://[아이피주소1]:5173/
 ➜  Network: http://[아이피주소2]:5173/
 ➜  Network: http://[아이피주소3]:5173/ <- 요놈

 

하지만 어떤 주소든 모바일에서는 실행이 안됐었고, 이 방법으로 해결할 수 있었다.

step1 . PC를 모바일 핫스팟으로 연결

step2 . 여러개의 Network 중 마지막 네트워크 Ip 주소 선택

 

그 결과, 모바일에서도 개발 모드를 테스트할 수 있었다.

 

cf) 만약 내 네트워크 정보가 bash에 뜨지 않는다면 스크립트에 오타가 없는 지 확인하자.

참고로, vite -- --host로 적었을 때, 나오지 않는 문제가 있었다.

 

⭕ 모바일 핫스팟 연결하는 이유

네트워크 격리/분리 문제가 가장 일반적인 원인이다. 많은 wifi 라우터와 공용 네트워크는 “AP 격리(AP Isolation)” 또는 클라이언트 격리(Client Isolation)” 기능을 사용한다.

• 이 기능은 같은 wifi 연결된 기기들이 서로 통신하지 못하도록 차단
• 모든 기기가 인터넷을 사용할 수 있지만, 로컨 네트워크를 통해 다른 기기와 통신 불가능

이에 따른 해결방법은 여러개 있다.

1. 네트워크 격리 확인 : 라우터 설정에서 “AP 격리” 또는 “클라이언트 격리” 기능 끄기
2. 모바일 핫스팟 ✅

등등

하지만 가장 쉬운 방법인 모바일 핫스팟 방법을 선택했다.

 

⭕ Network 들중 마지막 것만 접속되는 이유

예를 들어 터미널에 다음과 같이 표시된다면,

 ➜  Local:   http://localhost:5173/
 ➜  Network: http://[아이피주소1]:5173/
 ➜  Network: http://[아이피주소2]:5173/
 ➜  Network: http://[아이피주소3]:5173/ <- 요놈

• 첫번째와 두번째 주소는 가상 어댑터나 VPN 인터페이스일 가능성이 높음
• 마지막 주소은 실제 WiFi 어댑터의 IP 주소로, 모바일 핫스팟과 연결된 인터페이스 👉 무선 LAN 어댑터 Wi-Fi

 

 

사실 네트워크 지식이 부족해서 완벽하게는 이해되지 않았다.

추후에 네트워크 지식도 같이 공부하면서 로컬 개발환경에서 원할합 작업을 위해 세팅하는 방법에 대해 공부하면 좋을거같다.