휴대폰이나 개발 진행상황을 간단하게 데모할 시 개발중인 서버에 접속해야 할 경우가 있다. 이럴 경우, ngrok 는 사설 네트워크 안의 개발서버를 포트포워딩 등의 설정없이도 외부 네트워크에서 접속 가능하도록 해준다.



설치 및 진행

  • 설치 : https://ngrok.com/download
    에서 자신의 OS에 맞게 다운로드를 한다.이 후 압축을 풀고 ngrok파일(macOS의 경우)을 자신의 Project폴더로 이동시킨다.

  • 실행 명령어 : ./ngrok http 8000

실행 결과 ngrok

출처 - https://www.nomade.kr
  • Forwarding 된 주소로 접속을하면 자신의 로컬환경에서 개발한 페이지를 외부에서도 확인가능하다.(단, 서버를 재시작하면 포워딩 된 주소가 바뀌니 주의하자)

휴대폰으로 접속 시 사이트가 잘 뜨긴 하지만 글자 크기가 작고 전혀 모바일에 대응되지 않은 페이지같다. viewport meta 태그를 head 태그에 삽입해보자. viewport meta 태그는 배율 x1.0 고정으로, 유저의 배율 조정을 막겠다는 선언이다.

<meta name="viewport" content="width=device-width,initial-scale=1.0,
 minimum-scale=1.0,maximum-scale=1.0,
 user-scalable=no" />

주의!

  • 실제 서비스 배포가 아니며 테스트 용으로만 사용하자.

siwon

$_$