하이브리드앱과의 통신테스트를 하기 위해서 실제서버의 주소로 연결된 앱을 가지고 테스트하기는 상당히 번거럽습니다.
vue.js 소스를 수정하고, git 업로드하고, 서버에서 git pull 하고, yarn build 하고, 기타 pm2 restart 를 해야 하는등...
소스 몇개 수정하고 또 빌드하고 업로드하고.... 엄청 짜증나죠.
이럴때 그냥 앱에서 현재 컴퓨터에서 실행되는 localhost 환경으로 연결하면 편리합니다.
순서대로 따라해보세요
1. vue 를 아래와 같이 실행합니다.
$ yarn dev --port=3000 --hostname=0.0.0.0
2. usb로 폰을 연결합니다.
: 설정에서 USB 디버그모드를 활성화 해주세요
3. 앱을 실행합니다.
4. 크롬 주소창에 아래와 같이 입력하고 잠시 기다립니다.
: chrome:inspect
5. 곧이어 출력되는 목록중에서 자신의 앱에 해당하는 부분에 "inspect" 를 클릭합니다.
: 앱용 개발자도구가 뜹니다.
6. 윈도우 cmd 창에서 ipconfig (또는 ifconfig) 명령어로 자신의 사설아이피를 알아봅니다.
: 보통 192.168.0.X 로 되어 있습니다.
7. 개발자도구에서 주소창에 192.168.0.X:3000 으로 접속합니다.
8. 현재 디버깅서버에서 돌고있는 웹페이지가 뜹니다.
끗~
※ 참고로 백엔드 서버도 로컬에 있다면 마찬가지로 vue.js 에서 백엔드주소를 localhost 가 아니라 사설아이피로 해주셔야 제대로 통신이 됩니다.