localhost 개발 환경을 포트포워딩 없이 외부에서 보여주는 터널링 도구, ngrok

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 외부 인터넷에서 로컬 개발 환경으로 접근할 수 있도록 해주는 터널링 도구인 ngrok 에 대해서 알아보도록 하겠습니다.

개발을 진행하다보면 개발 환경(localhost:PORT_NUMBER)을 외부에서 확인해야하는 상황이 생깁니다. 

모바일 환경에서의 테스트나 클라이언트에게 보여주는 등의 상황 말이죠.

저는 포트포워딩을 통하여 외부환경에서 로컬 개발 환경으로 접속하려고 시도했었는데요, lg u+ 공유기 문제로 포트포워딩이 제대로 되지 않더군요.

그러던 중 'ngrok' 이라는 터널링 도구를 알게 되었고, 간단하게 이를 해결할 수 있게 되었습니다.

설치

설치는 ngrok 홈페이지에서 본인의 OS에 맞는 버전을 다운받아 설치하면 됩니다.

<ngrok 홈페이지>

윈도우의 경우에는 .zip 파일을 다운받게 되는데, 받아서 압축을 해제하면 ngrok.exe 파일이 있습니다.

해당 파일을 C 드라이브에 ngrok 디렉토리를 만들어 위치시키면 설치는 끝입니다.

실행

실행도 간단합니다.

ngrok.exe 파일을 실행시키고, 아래와 같은 명령어로 터널링을 진행합니다.

ngrok http 8080 -host-header=localhost

위의 명령어의 의미는 다음과 같습니다.

http : HTTP 프로토콜로 들어오는 트래픽만을 검색한다는 의미.

8080 : 터널링을 진행할 로컬 환경에서의 포트번호.

-host-header=localhost : 로컬 디버깅 환경으로 요청 데이터가 들어오는 것을 확인할 수 있도록 하는 옵션. 본 옵션을 생략하면 ngrok 까지 트래픽이 도달하지만 디버깅 환경으로 접속하지는 못함.

명령어를 입력하고 실행하면 아래와 같은 화면이 뜹니다.

여기서 Forwarding 에 있는 주소로 접속하면 로컬 환경으로 접속할 수 있습니다.

해당 주소는 Session Expires 시간이 다 되면 만료되며, 터널링을 진행할 때 마다 다른 주소가 생성됩니다.

또한, ngrok 을 실행하는 동안에 로컬 환경에서 localhost:4040 에 들어가면 inspect 를 할 수 있습니다.

inspect 를 이용하면 외부 환경에서 요청한 메소드와 주고받은 데이터를 확인할 수 있습니다.

여기까지...

로컬 개발 환경에 포트포워딩 없이 쉽게 접속할 수 있고, 어떤 요청이 들어왔는지 까지 쉽게 알 수 있는 터널링 도구 ngrok 에 대해서 알아보았습니다.

개발함에 있어 도움이 되셨으면 좋겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://blog.aliencube.org/ko/2017/06/02/tools-for-testing-webhooks/

https://ngrok.com/download

*이 포스팅이 도움이 되셨다면 다녀가셨다는 표시로 공감 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)