vite로 배포중인 리액트 프로젝트 모바일로 localhost 접속해서 확인하기

 

한 줄 설명
vite로 배포중인 리액트 프로젝트 모바일로 localhost 접속해서 확인하기

문제 상황

웹앱을 개발하면서 모바일 환경에 맞춰 화면을 구성하다 보니, 계속해서 개발자 도구를 이용해 모바일 화면을 확인해야 했다. 이 과정이 상당히 번거로웠고, 특히 아이폰의 노치 때문에 실제 배포된 화면을 직접 핸드폰으로 확인하고 수정해야 했다. 그래서 개발 중인 localhost를 내 핸드폰에서 바로 확인할 수 있으면 좋겠다고 생각하게 되었다.

 

 

시도했던 첫번째 방법

일단 검색해서 나온 첫번째 방법으로 시도했다

기존에는 npm run dev로 했다면, 뒤에 --host를 붙인다(-가 두개다)

npm run dev -- --host
또는
vite --host

로 개발 서버 실행해준다

그러나.. 트러블 슈팅

근데 나는 안 됐다. 내 노트북 로컬에서도 열리지 않았다.
그래서 이번에는 DNS 캐시를 지워봤다

 

DNS 캐시 지우는 코드:

sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder

 

 

 

근데 안됐다...

네트워크 방화벽도 해제해보고....

온갓 방법을 다 시도했는데, 안됐다

 

혹시나 해서 빌드도 다시 해봤는데, 어차피 로컬 호스트에서 잘 보이면 이 부분 문제는 없는거니까 패스...

 

 

이런 까만 화면만 떴다

최종 해결 방법

 

package.json에서 script 부분을 찾는다

나는 vite 환경이라서, dev: "vite" 라고 적혀있는데, 여기 뒤에다 --host를 붙여서 

 

 

그 다음 터미널에 아래 내용을 입력해서 개발 서버를 시작한다

//npm 썼으면 
npm run dev
//pnpm 썼으면 
pnpm run dev

 

 

그러면 

 

 

 

이제 핸드폰에서 바로 로컬 호스트를 확인할 수 있다!

 

다시한번 말하자면, 반드시 노트북과 핸드폰의

그리고 아직 해결 못 한 부분이긴 한데 윈도우 쓰는 친구는 같은 방법으로 해도 핸드폰에서는 계속 로딩중 화면이 나오면서 실패했다.

레퍼런스

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