지금껏 간단한 프로젝트들을 진행하면서 항상 번거로웠던 부분이 있다. 바로 모바일 환경의 테스트이다.

물론 브라우저의 개발자도구에서 모바일 환경을 에뮬레이트 해볼 수는 있다. 간단하게 레이아웃이나 사이즈 등을 체크하는데 유용하다.

다만 개발자도구의 모바일 에뮬레이트에서는 정상적으로 출력되는 스타일이 실제 모바일 환경에서는 깨져버리는 현상을 여러번 겪으면서 '모바일 에뮬리이트는 단순히 뷰포트만 모바일 기종에 맞춰 출력해보는데 써야겠다' 라고 생각했다.

그래서 정확한 테스트를 위해 지금까지는

스타일 변경 ⇒ 모바일 에뮬레이트 ⇒ 커밋 ⇒ 배포 ⇒ 모바일에서 확인

이라는 귀찮은 과정을 진행해왔다. 테스트가 끝난 뒤 배포하는 것이 정상인데 모바일 환경을 테스트하기 위해 미완성 웹을 배포해야했다.

이러한 이유로 프로젝트를 진행할 때 모바일의 세부적인 테스트는 가장 뒤로 미루었다.
pc 환경에서 테스트를 끝낸 웹을 배포하고 그 이후에 모바일에서 여러 부분을 체크해본 뒤 문제가 있는 부분을 한꺼번에 수정해서 다시 배포하는 방법을 사용해왔다. 한번에 끝나면 다행이지만 모바일에 맞게 수정한 부분이 pc에서 말썽을 일으킨다면 또 다시 수정해야하는 번거로움이 있었다.

번거로움을 감수해가며 여태 프로젝트를 진행해오다가 문득 '모바일에서 직접 개발 서버에 접근하는 방법이 있지 않을까?' 라는 생각이 들었다.

ngrok

ngrok는 보안 터널을 통해 로컬 서버를 외부 환경에서 접근할 수 있게 해준다.
npm을 통해 설치가 가능하다.
$ npm i ngrok -g

설치가 끝나면 아래의 명령으로 실행이 가능하다.

$ ngrok http 포트번호

포트번호는 localhost의 포트와 동일하게 작성하면 된다.

실행하면 터미널에 여러 내용이 출력되는데, 이 내용 중 포워딩 부분의 도메인을 이용하면 외부 환경에서 로컬 서버에 접근이 가능하다. 이 도메인은 https://____.ngrok.io 형태를 갖는다.