Ngrok 로 localhost 를 임시로 공개하기

1. 개요

Web 개발을 하다보면 자신의 개발 환경 ( localhost )을 인터넷 상에서 돌려보고 싶어질 때가 있다. 특히, Mobile 의 경우 개발을 하더라도 확인 할 방법은 Chrome의 Developer console ( 개발자 도구 )에서 확인 하는 방법 뿐고, 실제 공개뒤 모바일환경에서 확인을 해보면 결과가 생각했던 것과 다른 경우를 자주 볼 수 있다. 이때, Ngrok 을 사용하면 자신의 개발 환경에 공개 IP 및 URL 을 잠깐 부여할 수 있고, 외부 기기 에서 실제로 접근 할 수 있게 된다.

• Ngrok

2. HomePage

• https://ngrok.com/

3. Download && install

Terminal 에서 다음을 실행하고 설치해 보자

## download
$ wget [url]

#=> ex>
  $ wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip

## install
$ unzip [file name]

#=> ex>
   $ unzip ngrok-stable-linux-amd64.zip

$ sudo cp ngrok /usr/bin/
$ ngrok version
#=> ngrok version 2.2.8

4. Run

설치가 완료 되면 localhost 를 실행 시켜둔 상태로 다음의 라인을 입력하면 된다.

$ ngrok http [port] # port of localhost

#=> ex>
	$ ngrok http 3000


#=> ngrok by @inconshreveable
#=> Session Status                online
#=> Session Expires               7 hours, 50 minutes
#=> Version                       2.2.8
#=> Region                        United States (us)
#=> Web Interface                 http://127.0.0.1:4040
#=> Forwarding                    http://3daf13d3.ngrok.io -> localhost:3000
#=> Forwarding                    https://3daf13d3.ngrok.io -> localhost:3000

#=> Connections                   ttl     opn     rt1     rt5     p50     p90
#=>                               0       0       0.00    0.00    0.00    0.00

위의 결과에서 Forwarding 부분에 접속 가능한 URL 이 표시가 되다. http , https 모두 사용 가능하다. 실제로 외부 기기에 URL을 입력하고 접속해 보면 잘 접속이 되는 것을 알 수 있다.