웹사이트나 API 서버를 개발할 때 일반적으로는 로컬 개발환경을 구축하고 개발을 진행합니다. 하지만 때에 따라서는 외부 서비스와 연동을 하거나 외부에서 접근이 필요한 경우가 있는데 상용(Production) 환경이 아니라 개발 환경에서 외부 접근을 열어주는 일은 굉장히 번거로운 일이 될 수도 있습니다.
이런 경우 간단하게 사용할 수 있는 Ngrok이라는 프로그램을 소개해 드리고자 합니다.
Ngrok
Ngrok은 외부(Public)에서 로컬에 접속할 수 있게 도와주는 터널링 프로그램입니다. 물론 Ngrok 이외에도 여러 가지 다른 터널링 프로그램이 존재하지만 간단히 테스트하는 용도로는 Ngrok을 통해 적절하게 이용할 수 있습니다.
Ngrok 설치
위의 홈페이지에서 다운로드하여 설치하거나 Mac OS를 사용하시는 경우라면 brew를 이용하여 설치하실 수 있습니다.
$ brew install --cask ngrok
==> Tapping homebrew/cask
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask'...
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 555641 (delta 0), reused 2 (delta 0), pack-reused 555637
Receiving objects: 100% (555641/555641), 245.11 MiB | 19.34 MiB/s, done.
Resolving deltas: 100% (392420/392420), done.
Tapped 3866 casks (3,982 files, 263.0MB).
==> Downloading https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-darwin-amd64.zip
######################################################################## 100.0%
Warning: No checksum defined for cask 'ngrok', skipping verification.
==> Installing Cask ngrok
==> Linking Binary 'ngrok' to '/usr/local/bin/ngrok'
� ngrok was successfully installed!
Code language: Bash (bash)
설치가 완료되면 아래와 같이 실행해볼 수 있습니다. help 명령어는 Ngrok에서 지원하는 명령어들을 보여줍니다.
$ ngrok --help
NAME:
ngrok - tunnel local ports to public URLs and inspect traffic
DESCRIPTION:
ngrok exposes local networked services behinds NATs and firewalls to the public internet over a secure tunnel. Share local websites, build/test webhook consumers and self-host personal services.
Detailed help for each command is available with 'ngrok help <command>'.
Open http://localhost:4040 for ngrok's web interface to inspect traffic.
EXAMPLES:
ngrok http 80 # secure public URL for port 80 web server
ngrok http -subdomain=baz 8080 # port 8080 available at baz.ngrok.io
ngrok http foo.dev:80 # tunnel to host:port instead of localhost
ngrok http https://localhost # expose a local https server
ngrok tcp 22 # tunnel arbitrary TCP traffic to port 22
ngrok tls -hostname=foo.com 443 # TLS traffic for foo.com to port 443
ngrok start foo bar baz # start tunnels from the configuration file
VERSION:
2.3.35
AUTHOR:
inconshreveable - <alan@ngrok.com>
COMMANDS:
authtoken save authtoken to configuration file
credits prints author and licensing information
http start an HTTP tunnel
start start tunnels by name from the configuration file
tcp start a TCP tunnel
tls start a TLS tunnel
update update ngrok to the latest version
version print the version string
help Shows a list of commands or help for one command
Code language: plaintext (plaintext)
Ngrok 사용법
이제는 Ngrok을 이용하여 직접 터널링을 해보겠습니다. 만약 로컬 서버 포트가 8080이라고 가정하면 아래의 명령어를 실행합니다.
$ ngrok http 8080
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 1 hour, 59 minutes
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://ed917f810676.ngrok.io -> http://localhost:8080
Forwarding https://ed917f810676.ngrok.io -> http://localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
Code language: Bash (bash)
위와 같이 화면에 표시되면 터널링이 완료되었고 이제부터 외부에서 접근이 가능합니다. 만약 포워딩 주소인 http://ed917f810676.ngrok.io로 호출을 하게 되면 아래에 표시되는 것과 같이 Access Log가 출력됩니다. 지금은 별도의 애플리케이션을 로컬 개발 환경에서 구동하고 있지 않아 502 에러가 발생했습니다.
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Session Expires 1 hour, 59 minutes
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://ed917f810676.ngrok.io -> http://localhost:8080
Forwarding https://ed917f810676.ngrok.io -> http://localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
HTTP Requests
-------------
GET /favicon.ico 502 Bad Gateway
GET / 502 Bad Gateway
Code language: Bash (bash)
이렇게 포워딩 URL을 사용하게 되면 외부에서도 로컬 개발 환경에 접근이 가능해집니다. 그런데 여기에서 유심히 봐야 할 항목이 있습니다. 바로 Session Expires 부분인데 시간 정보가 2시간에서 점차 줄어들고 있는 것을 확인할 수 있습니다. Ngrok은 기본 세션 타임이 존재하고 세션이 만료된 이후에는 다시 Ngrok을 실행해줘야 합니다. (재실행 시 포워딩 URL이 변경되므로 테스트 환경에서 다시 설정을 진행해줘야 합니다.)
세션을 계속 유지하고자 하는 경우 우선 Signup 페이지에서 가입을 진행합니다. google이나 github 계정으로 쉽게 가입할 수 있습니다. 이후 로그인을 수행하여 Authtoken을 확인합니다.
Authtoken을 사용하는 방법 크게 두 가지로 나뉩니다. Ngrok 실행 시 authtoken 값을 입력하여 실행하는 방법과 설정 파일(ngrok.yml)에 등록하여 사용하는 방법입니다.
$ ngrok authtoken 1aaaaaaaaaaqYTs_7gnBdATCRX4PVYuNvLSTQ
Authtoken saved to configuration file: /Users/test/.ngrok2/ngrok.yml
Code language: Bash (bash)
첫 번째 방법인 Ngrok을 실행 시 authtoken 값을 입력하여 실행하는 방법으로 실행했더니 자동으로 ngrok.yml 파일에 Authtoken 정보가 추가되었습니다. 이제 다시 Ngrok을 실행해보겠습니다.
$ ngrok http 8080
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account test@gmail.com (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://de1c3300ec88.ngrok.io -> http://localhost:8080
Forwarding https://de1c3300ec88.ngrok.io -> http://localhost:8080
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
Code language: Bash (bash)
이제는 Session Expires 항목이 표시되지 않고 계정 정보가 표시됩니다. 이렇게 사용하게 되면 세션 만료 없이 Ngrok을 사용할 수 있습니다.
Ngrok 요금제
Ngrok은 위와 같이 다양한 요금제를 제공하고 있고 요금제마다 제공하는 기능이 다르고 일부 제약 사항이 존재합니다. 하지만 개인이 개발을 진행하면서 간단하게 테스트하는 용도로 사용하기에는 무료 요금제도 충분합니다.
마치며
지금까지 Ngrok의 설치 및 사용 방법에 대해서 살펴보았습니다. 앞서 설명드렸듯이 외부에서 로컬 개발 환경에 접근 시 간단하게 사용할 수 있는 프로그램이고 무료 플랜으로도 주요 기능들을 사용할 수 있기 때문에 인기 있는 프로그램입니다. 필요한 경우 유용하게 사용하셨으면 좋겠습니다.