[ngrok] localhost를 외부로 연결하기

change·2020년 10월 11일
0
post-thumbnail

이 포스트에서는 ngrok을 사용하여 로컬환경에 띄워진 서비스를 외부로 공유하는 법에 대해서 알아보려 한다.

ngrok 이란?

공식 홈페이지에서는 아래와 같이 설명하고 있다.

Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.
(번역: Ngrok는 NAT 및 방화벽 뒤의 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출한다. )
출처 ngrok 공식 홈페이지

보통 개발자들은 개인 로컬환경에서 개발을 진행한다.
로컬환경에서 개발하며 테스트를 할 때는 localhost 혹은 127.0.0.1 IP를 사용하여 테스트하는데 이는 한정적인 상황에 대해서만 테스트할 수 있다.
실제로 개발이 끝나고 서비스 운영을 하려면 외부환경에서 접근했을 때에도 문제없이 동작하는지 확인이 필요한데 방법은 여러 가지가 있다.


1. 로컬환경의 포트를 외부에서 접근할 수 있도록 열어주는 방법

포트를 외부로 열어주게 되면 보안상 위험하므로 추천하지 않는다.
또, 공유기를 사용 중일 경우 외부 아이피로 접근하면 내부 아이피의 특정 포트로 연결되도록 포트 포워딩 설정을 해주는 불편함을 겪어야 한다.

개발에만 집중하기에도 시간 없는데 테스트를 위해 환경설정을 해주는 건 효율적이지 않다.

2. 개발 중인 패키지를 빌드하여 외부 서버에 올리는 방법

개발 중 기능이 하나 추가될 때마다 수많은 테스트를 진행하는 건 모두가 아는 사실이다.
이 방법은 기능을 추가하고 새로 패키지 빌드하여 외부 서버에 업로드하고 그 서버에 접근하여 테스트해야 한다.
외부 서버가 아직 운영을 위한 환경설정이 되어있지 않다면 다 맞춰주고 난 후 테스트를 해야 한다.

글만 봐도 벌써 귀찮아지는 방법이다.


간단하게 2가지 방법만 말했지만 여러 가지 방법이 더 있다.
그 방법들의 공통점은 테스트를 자주 해야 하는데 너무 귀찮다는 거다.

오늘 설명할 ngrok이 이 문제를 간단히 해결해준다.
ngrok을 실행하면 localhost 혹은 127.0.0.1을 외부 도메인으로 그대로 연결해서 따로 서버를 띄우지 않아도 외부에서 로컬 서버로 접근이 가능하다.

또, 특정 기능까지만 빌드하여 테스트하는 게 아니라 도메인이 로컬로 직접 연결되기 때문에 로컬에서 테스트 중인 개발 서버가 핫 리로딩이 가능하면 수정된 코드가 외부에도 바로 적용될 수 있다는 게 가장 큰 메리트인 것 같다.

서비스가 동작하는 원리나 방법에 대해서는 깊게 설명하지는 않겠다.
자세한 내용은 공식 홈페이지에서 확인할 수 있다.

오늘은 어떻게 사용하여 로컬환경을 외부로 노출하는지를 알아보겠다.


ngrok 사용방법

1. ngrok 다운로드

ngrok 다운로드는 공식 홈페이지에서 가능하다.

Download for Window 버튼을 클릭하여 zip 파일을 다운로드한다.


2. ngrok 실행

다운받은 zip 파일을 압축 해제하면 ngrok.exe 파일 하나가 나온다.

# ngrok 실행 명령어 (내부 8080 포트를 외부로 노출)
ngrok http 8080

# ngrok 실행 창
ngrok by @inconshreveable                                                                               (Ctrl+C to quit)

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://153e771428b1.ngrok.io -> http://localhost:8080
Forwarding                    https://153e771428b1.ngrok.io -> http://localhost:8080
Connections                   ttl     opn     rt1     rt5     p50     p90
 0       0       0.00    0.00    0.00    0.00

위와 같이 ngrok http 8080을 실행하면 ngrok이 실행된다.
실행 창에서 Forwarding 부분을 보면 접속에 대한 정보 확인이 가능하다.
http://153e771428b1.ngrok.io 도메인으로 접속하면 http://localhost:8080 로컬환경으로 연결이 된다.

Session Expires 에 보이는 시간은 남은 세션 유지 시간이다.
ngrok은 무료로 사용할 수 있지만, 최대 세션 유지 시간이 8시간이다.
물론 그 후에 ngrok을 새로 실행하면 다시 8시간을 사용할 수 있지만, 도메인 주소가 바뀌게 된다.
8시간마다 도메인 주소가 바뀌는 게 맘에 들지 않는다면 공식 홈페이지에서 간단하게 회원가입 후 유료 요금제를 사용하면 세션 유지 시간제한은 사라진다.

필자는 ngrok을 개발 도중 외부 테스트를 빠르게 진행하기 위해 사용하기 때문에 8시간만 있어도 테스트에 어려움이 없어서 무료 버전으로 사용 중이다.

ngrok 실행 후http://localhost:4040 에 접속해보면 아래와 같이 웹에서 현재 세션의 트래픽에 관해서 확인이 가능하다.
무료 버전임에도 제공해주는 기능이 생각보다 많다.


3. 에러 발생 시

ngrok 명령어를 실행했을 때 ngrok invalid host header 관련 에러가 발생한다면 아래와 같이 -host-header="localhost:8080" 옵션을 추가하여 해결이 가능하다.

# -host-header="localhost:8080" 옵션 추가
 ngrok http 8080 -host-header="localhost:8080"

위에서 설명한 기능 외에도 서브도메인 설정, 인증추가 등 다양한 기능이 옵션으로 제공된다.
간단히 ngrok help 명령어로 확인이 가능하고 자세한 내용은 여기서 설명하기보단 ngrok 공식문서를 확인하는 게 좋을 것 같다.

마치며...

오늘은 개발하며 사용했던 ngrok 사용법에 대해서 알아봤다.
개발하며 테스트를 위한 환경설정을 신경 쓰는 게 너무 귀찮았는데 명령어 한 줄로 해결할 수 있는 편한 방법을 찾아서 공유하기 위해 포스팅을 했다.
예전부터 외부에서 로컬환경으로 접속하는 여러 가지 방법들을 사용해봤는데 최근 ngrok을 사용해보니 지금까지 중 가장 편한 방법이라서 앞으로도 애용할 것 같다.

0개의 댓글