모바일 기기에서 개발 서버 확인하기

앱 형태의 모바일 웹을 개인 프로젝트로 개발 할 때부터 찾아 헤매던 방법인데, 개발 중인 로컬 서버를 제 스마트폰에서 어떻게 확인하는가였어요. 너무 당연한 것일 수 있지만 저는 오래 돌아돌아 이번에야 해답을 알 수 있었는데, 요새 네트워크를 조금 공부해 봤다고 아주 흥미롭더라구요! 또한 이전에는 그저 사용법을 알게 된 것으로 그쳤겠지만 이번에는 원리에 대한 호기심이 더 강하게 다가왔다는 것이 스스로에게 놀란 점이었어요. 서칭을 해보면 다음과 같은 방법을 쉽게 찾을 수 있습니다. 1 . 확인하려는 모바일 디바이스의 wifi를 개발 중인 컴퓨터가 접속한 wifi로 설정한다. 2. 로컬 서버를 실행 시킨 후, wifi의 ip에 로컬 서버의 포트 번호를 붙여 접속한다. 하지만 이상하게도 저는 접속이 되지 않았어요. 당시에는 이유를 모른 채로 해결을 미루었습니다. 그런데 이번에 회사 프로젝트를 할 때 방법을 알아내었죠! 먼저 말씀드릴 건, 저의 경우 vite로 생성된 프로젝트였습니다. 결론을 먼저 말씀드리자면, 해답은 --host 에 있었습니다! 그동안 개발 서버를 실행할 때 당연하게도 ‘npm run dev’ 커맨드를 사용했었는데 옵션이 하나 더 추가되어야 했던 것입니다. package.json에서 확인해보면, dev 스크립트는 사실 “vite”를 의미합니다. vite에서 개발 서버를 실행시키는 CLI인 것이죠. 여기에 바로 --host 를 추가하거나, 혹은 별도의 스크립트를 만들어 실행시키면 되었던 것입니다. 저의 경우, npm run host(vite --host)로 구분하여 실행시켰습니다. 그리고 드디어 제 스마트폰에서 wifi의 ip 주소와 포트 번호를 붙여 접속하면 로컬 서버를 확인할 수 있었습니다! npm run dev로 실행시켰을 때는 콘솔에 http://localhost:5173만 나타났었는데, 말그대로 개발 서버를 실행시킨 컴퓨터의 로컬호스트만을 가리키는 것이었어요. 때문에 인터넷이 접속되어있지 않아도 http://localhost:5173 혹은 127.0.0.1:5173으로 접근이 가능합니다. 그렇다면 wifi의 ip로 접근한다는 것이 성립되지 않는 게 당연한 일이었죠. 그런데 제가 이름 지은 npm run host로 실행시키면 콘솔에 비로소 제가 연결한 wifi의 ip 주소가 함께 나타납니다. vite 공식 문서에 따르면, —host 는 서버가 수신할 IP 주소를 지정하기 위한 CLI입니다. 공식 문서에서는 LAN와 공용 주소를 포함한 모든 주소를 수신하려면 이 옵션을 true로 설정하라 하는데, 이걸 위해 —host 를 덧붙이는 것이죠. 그래서 현재 컴퓨터에 접속된 wifi의 ip 주소를 수신할 수 있던 것입니다. 아주 속이 시원했습니다. 사실 너무 멀리 돌아와서 허탈하다 느낀 게… vite는 이미 힌트를 주고 있었다는 것이에요. npm run dev로 실행시켰을 때 콘솔을 보면 ‘Network: use —host to expose’라 써있었습니다… 역시 개발에서는 허투루 나오는 메시지가 없는 법인데, 대충 보면 안 된다는 것을 다시 한번 깨닫게 되었어요. 이렇게 알게된 것은 vite에서의 방법이었는데, Nextjs에서도 유사한 방법이 있을 거라 생각하여 찾아보니 -H 를 사용하면 되었습니다. 하지만 vite에서와 다르게 호스팅할 ip를 직접 명시해주어야했어요. 연결되어있는 wifi ip를 자동으로 수신할 수 있는 옵션이 있을 것 같은데 더 찾아봐야겠습니다! * server.host(Server Options) | Vite:  https://vitejs.dev/config/server-options#server-host * Development(Next.js CLI) | Next.js: https://nextjs.org/docs/app/api-reference/next-cli#development