개요

로컬에 구성한 개발 환경을 급하게 외부에 공개해야 할 경우가 있습니다.


예로 갑자기 외부에서 중요한 고객에게 개발중인 제품을 시연해야 하거나 개발 단계에서 social login 연동등 web hook 을 수신해야 할 경우 domain 을 부여하고 외부에 공개해야 하는데 이를 위해서는 별도의 개발 서버로 옮기고 build와 deploy 를 하는 번거로운 과정을 거쳐야 합니다.


개발용 로컬 호스트를 tunneling을 통해(Secure tunnels to localhost) 외부에서 연결할 수 있도록 해주는 ngrok를 사용하면 쉽고 빠르게 로컬 개발 환경을 외부에 공개할 수 있습니다.


Laravel 에 내장된 vagrant 기반 개발 환경 구성 도구인 homestead 에는 ngrok 가 내장되어 있습니다.


설치

https://ngrok.com/download 에 연결하면 운영 체제별로 zip 으로 압축한 패키지를 제공하므로 다운받아서 압축을 해제하고 PATH 에 걸린 폴더에 넣은 후에 사용하면 됩니다.


저는 windows 환경에서 chocolatey 패키지 관리자 를 사용하므로 다음 명령어로 직접 설치했습니다.

choco install ngrok
CODE


설치가 끝나면 옵션없이 실행하면 간단한 사용법을 출력해 줍니다.

ngrok
CODE



http 터널링

기본 사용법은 아주 간단합니다. 만약 로컬 웹 서비스가 8000 포트에 떠 있다면 다음과 같이 protol port 옵션을 주고 실행하면 됩니다.

ngrok http 8000
CODE


그러면 다음과 같이 forwarding 이 되고 있다는 메시지를 확인할 수 있으며 여기에 있는 URL(예: http://38c7e252.ngrok.io) 에 연결하면 로컬의 8000 포트에 띄운 웹 서비스에 접속할 수 있습니다.


ngrok 가 구동되면 로컬 웹 인터페이스가 생성되며 http://127.0.0.1:4040/ 에 연결하면 ngrok 상태와 HTTP 요청 현황을 볼 수 있습니다.

id/pwd 로 포워딩 서비스 보호

생성된 임시 URL 을 안다면 누구나 내부 서비스에 접근이 가능합니다.

ngrok 를  구동할 떄 -auth 옵션에 id 와 암호를 지정해 주면  기본적인 인증을 거쳐야 서비스에 연결이 가능해집니다.

 ngrok http -auth='user:passwd' 8000
CODE


auth key 생성

ngrok 는 기본적으로 8 시간의 세션 시간을 갖고 이후에는 도메인이 변경됩니다. 이를 방지하려면 ngrok 에 회원 가입한 후에 대시보드에서 auth key 를 발급받아서 사용하면 됩니다.


signup 하지 않으면 이외에도 subdomain 사용, 다른 호스트 포워딩등 많은 기능을 사용하지 못하므로 회원 가입하는 것을 추천합니다.


가입후에는 대시보드에서 Authentication → your authtoken 메뉴에서 키를 확인할 수 있습니다.



아래 명령을 실행하면 ngrok 설정 파일에 인증키가 저장됩니다.

ngrok authtoken 발급받은인증키
CODE


다른 서버 포워딩하기

외부에서 접근할 수 없는 내부 서버에 개발 환경이 구성되어 있고 현재 사내에 있는 노트북에서만 내부 서버에 연결이 가능하다고 가정해 봅시다.


내부 서버에 올려 놓은 제품을 외부에 공개해야 할 경우 다음과 같이 내부 서버에 연결 가능한 노트북에서 ngrok 를 실행하면 됩니다. 

ngrok http 포워딩서버:포트
CODE


예로 개발중인 내부 서버의 IP 가 192.168.0.100 이고 443 포트로 웹 서비스가 제공될 경우 아래와 같이 내부 서버에 터널을 구성할 수 있습니다.

ngrok http 192.168.0.100:443
CODE


이제 외부에서는 ngrok 에 표시되는 forwarding url 로 접속하면 내부 서버에 올라간 개발 환경에 연결할 수 있습니다.


sub domain 사용

ngrok 를 실행할 때마다 포워딩용 도메인은 랜덤하게 생성되므로 기억하기가 어렵습니다.


Pro plan 에 가입했을 경우 sub domain 을 사용할 수 있습니다. 예로 lesstif.ngrok.io 란 서브 도메인을 사용하고 싶은 경우 아래와 같이 sub domain 을 명시해 주면 됩니다.

ngrok http -subdomain=lesstif 8000
CODE


마치며

ngrok 는 로컬 개발 환경을 외부에 공개해야 할 때 유용하게 사용할 수 있습니다. 이외에도 많은 활용법이 있고 Pro plan 으로 가입하면 개인 도메인을 사용하는등 여러 가지 혜택이 있으니 알아 두면 유용한 개발 도구입니다.




productivity
생산성