[Trouble Shooting] '아이폰'에서 화면이 열리지 않을때 (feat. Vite)

⚠️ 이슈 내용

React 프로젝트를 하면서 다양한 모듈 번들러를 사용해왔는데, 그중 유독 Vite를 사용할때, 아이폰(모바일)에서 개발서버는 물론, 빌드해서 서버를 배포한 프로젝트 자체도 열리지 않을때가 있었다.

 

 

또한, 무조건 다 열리지 않는 것은 아니었다. 갤럭시에서는 잘 열리며, 최신의 아이폰 기종에서도 잘 열리고 있었다 . 하지만, 구형의 아이폰 모바일 화면에서는 Vite로 환경설정을 사용했던 프로젝트들은 화면이 열리지 않는 것을 종종 겪는데, 이에 대한 해답을 여기에서 찾을 수 있었다..

 

How to open Vite dev server on your mobile

 

📌 이슈 원인

기본적으로 Vite 개발 서버는 로컬호스트에만 바인딩되어 있어 다른 기기에서 액세스할 수 없다. 다른 기기에서 액세스하려면 서버를 --host 옵션과 컴퓨터의 IP 주소를 지정해야 합니다.

 

✅ 해결 방법

만약 비슷한 상황을 겪고 계신다면 아래의 내용들처럼 차례대로 하시면 제대로 작동하실 수 있습니다.

 

1. IP(아이피)를 모를때

[찾기] → cmd 검색 → 터미널창에 다음과 같이 입력을 합니다.

# 자신의 IP 확인하기
$ ipconfig

2. 자신의 IP(아이피) 확인하

위의 명령어를 누르게 되면 다음과 같이 아이피가 나오게 됩니다.

 

3. package.json의 script를 수정한다.

# 전

... 생략

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

... 생략

# 후


... 생략

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

... 생략

 

단순히 --host만 추가되면 됩니다.. 너무 허무하게 끝이 나버린 문제.. 이제 다시 아이폰에서 다음과 같이 주소창에 입력하시면 됩니다.

https://[나의 IP]:[포트번호]

 

 

 

참고

---

Vite

 

끝..