vite + yarn 환경에서 localhost 모바일로 보기 (안드로이드)

vite + yarn 환경에서 배포 전 모바일로 개발환경을 보고싶을 때의 방법을 기록해두려고 합니다.

 

많은 참고 링크가 있었지만 결국 너무 기초적인 부분을 해결을 안했어서 이 글이 누군가에게 도움이 되길 바라며,,,

 

0. 데스크탑과 모바일 같은 와이파이 연결

우선 기본적으로 모바일과 데스크탑이 같은 와이파이에 연결돼있어야 합니다. 

 

제일 먼저 yarn dev로 로컬환경을 실행했을 때 

이렇게 나오는데 이걸 무시하고 별짓을 다하고 돌아보니 --host 옵션을 사용해야 한다는 것이였습니다. 

아마 이걸 놓치지 않았다면 아래에 과정들을 아무것도 안해도 됐을텐데 오히려 좋네요

 

 

1. yarn dev --host 명령어 사용

2. cmd 창을 켜서 ipconfig 명령어 사용

 

3. 모바일로 IPv4 주소 + :5173 접속 

예를 들면 IPv4의 주소가 123.111.111.1이면 모바일에서 123.111.111.1:5173 로 접속하면 개발환경을 볼 수 있습니다.

 

 

여기까지 왔을 때 모바일로 봤을 때 아래처럼 나온 다면 성공!

 

예외 1.

만약 안된다면 와이파이 -> 속성 클릭 -> 네트워크 프로필 개인으로 변경

 

 

예외 2. 

제어판 -> 시스템 및 보안 -> window Defenders 방화벽 -> 고급 설정 

 

인바인드 규칙 -> 새규칙 

 

포트선택

 

 

TCP선택, 특정 로컬 포트 선택 (겹치지 않는 포트번호 ex 1234)

다음 -> 다음 -> 이름 임의 설정 후 마침 

 

인바운드 규칙 속성 들어간 후

프로토콜 및 포트 메뉴에서 프로토콜 종류를 TCP -> IPv6로 변경

 

마지막으로 cmd -> ipconfig 명령어로 자신의 IPv4주소를 확인한 후 IP주소:포트번호 ex) 123.111.101.1:3000 으로 접속가능! (위와 동일)

 

 

Reference

• https://blog.naver.com/icran/30179801013  
• https://yujin-dev.tistory.com/49