Ngrok 사용하여 개발하기

Ui jong Kim·2022년 3월 5일
3

웹사이트나 API 서버를 개발할 때 일반적으로는 로컬 개발환경을 구축하고 개발을 진행합니다. 하지만 때에 따라서는 외부 서비스와 연동을 하거나 외부에서 접근이 필요한 경우가 있는데 상용(Production) 환경이 아니라 개발 환경에서 외부 접근을 열어주는 일은 굉장히 번거로운 일이 될 수도 있습니다.

이런 경우 간단하게 사용할 수 있는 Ngrok이라는 프로그램을 소개해 드리고자 합니다.

Ngrok

ngrok - secure introspectable tunnels to localhost

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!

설치가 완료되면 아래와 같이 실행해볼 수 있습니다. 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

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

위와 같이 화면에 표시되면 터널링이 완료되었고 이제부터 외부에서 접근이 가능합니다. 만약 포워딩 주소인 http://ed917f810676.ngrok.io로 호출을 하게 되면 아래에 표시되는 것과 같이 Access Log가 출력됩니다. 지금은 별도의 애플리케이션을 로컬 개발 환경에서 구동하고 있지 않아 502 에러가 발생했습니다.

ngrok by @inconshreveable                                          (Ctrl+C to quit)

Session Status              online
Session Expires             1 hour, 56 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
                  2       0      0.03    0.01    0.00    0.00

HTTP Requests
-------------

GET /favicon.ico            502 Bad Gateway
GET /                       502 Bad Gateway

이렇게 포워딩 URL을 사용하게 되면 외부에서도 로컬 개발 환경에 접근이 가능해집니다. 그런데 여기에서 유심히 봐야 할 항목이 있습니다. 바로 Session Expires 부분인데 시간 정보가 2시간에서 점차 줄어들고 있는 것을 확인할 수 있습니다. Ngrok은 기본 세션 타임이 존재하고 세션이 만료된 이후에는 다시 Ngrok을 실행해줘야 합니다. (재실행 시 포워딩 URL이 변경되므로 테스트 환경에서 다시 설정을 진행해줘야 합니다.)

세션을 계속 유지하고자 하는 경우 우선 https://dashboard.ngrok.com/user/signup에서 가입을 진행합니다. google이나 github 계정으로 쉽게 가입할 수 있습니다. 이후 로그인을 수행하여 authtoken을 확인합니다.

authtoken을 사용하는 방법은 크게 두 가지로 나뉩니다. Ngrok 실행 시 authtoken 값을 입력하여 실행하는 방법과 설정 파일(ngrok.yml)에 등록하여 사용하는 방법입니다.

$ ngrok authtoken 1aaaaaaaaaaqYTs_7gnBdATCRX4PVYuNvLSTQ

Authtoken saved to configuration file: /Users/test/.ngrok2/ngrok.yml

첫 번째 방법인 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

이제는 Session Expires 항목이 표시되지 않고 계정 정보가 표시됩니다. 이렇게 사용하게 되면 세션 만료 없이 Ngrok을 사용할 수 있습니다.

Ngrok 요금제

Ngrok은 위와 같이 다양한 요금제를 제공하고 있고 요금제마다 제공하는 기능이 다르고 일부 제약 사항이 존재합니다. 하지만 개인이 개발을 진행하면서 간단하게 테스트하는 용도로 사용하기에는 무료 요금제도 충분합니다.

마치며

지금까지 Ngrok의 설치 및 사용 방법에 대해서 살펴보았습니다. 앞서 설명드렸듯이 외부에서 로컬 개발 환경에 접근 시 간단하게 사용할 수 있는 프로그램이고 무료 플랜으로도 주요 기능들을 사용할 수 있기 때문에 인기 있는 프로그램입니다. 필요한 경우 유용하게 사용하셨으면 좋겠습니다.

profile
클라우드에 관심이 많은 개발자

0개의 댓글