Ngrok

문득, 개발과 테스트를 동시에 병행하면서 진행상황을 공유하거나 내부적인 테스트를 할 때 개발중인 PC의 특정 포트를 외부와 연결하려면, 공유기에서 포트포워딩을 해야하는 귀찮은 설정이 필요했는데...Ngrok 이라는 서비스를 알게되어서 편하게(?) 설정할 수 있다는걸 알고 관련 내용을 기록해보기로 한다.

 

엔그록..왜지? 이름이...

 

I. ngrok 이란?

공식 사이트를 방문하면, 아래와 같은 대문 이미지가 보이는데...개발자를 위한 통합 인그레스 플랫폼이라고 소개하고 있다. 인그레스가 뭐야? (첨 봄..@.@)

https://ngrok.com/

리버스 프록시, 방화벽, API 게이트웨이, 글로벌 로드밸런싱을 결합하여 앱과 API를 제공한다고 하는데..어, 잘 모르겠다. 암튼..내가 알기론 터널링(Tunnel)을 위한 걸로 이해하고 있다.

https://dashboard.ngrok.com/

ngrok 사이트에 회원가입하고 dashboard에서 또다른 설명이 있어서 보니까, 조금 더 이해했다..(!!)

 

가령, 집 PC에서 개발중인 프로젝트를 외부에서 보고자 한다면 공유기 설정을 해야한다고 했지만, ngrok을 이용하면 외부에서 내부(=Localhost)로 접근할 수 있게 해준다 정도?

ngrok 터널링 개요

 

II. ngrok 사용법

일단 홈페이지를 보니까, 다양한 환경에서 사용할 수 있는데..난 Windows이면서, 별도의 프로그램을 다운로드 받고싶진 않아서, npm 으로 ngrok을 전역(Global)으로 설치했어

npm install ngrok -g

 

그런다음 AuthToken이 필요해서, dashboard에서 Getting Started > Your AuthToken 에서 제공하는 코드를 복사해와서 터미널에서 실행해주었지!

ngrok config add-authtoken 2#############################################U

 

그리고 이제 터널링을 해보려고, 로컬에서 개발중인 웹의 클라이언트 포트를 입력해봤어

ngrok http 5173 -- http://localhost:5173

 

뭔가 ngrok이 제공하는 명령이 더 있을것같아서 --help를 입력해보니까 굉장히 많은 명령이 있더라구? 다 외우진 못하겠지

ngrok --help

/*
NAME:
  ngrok - tunnel local ports to public URLs and inspect traffic

USAGE:
  ngrok [command] [flags]

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.

Author:
  ngrok - <support@ngrok.com>

TERMS OF SERVICE: https://ngrok.com/tos

EXAMPLES:
  ngrok http 80                           # secure public URL for port 80 web server
  ngrok http --domain baz.ngrok.dev 8080  # port 8080 available at baz.ngrok.dev
  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 --domain=foo.com 443          # TLS traffic for foo.com to port 443
  ngrok start foo bar baz                 # start tunnels from the configuration file

COMMANDS:
  api                            use ngrok agent as an api client
  completion                     generates shell completion code for bash or zsh
  config                         update or migrate ngrok's configuration file
  credits                        prints author and licensing information
  diagnose                       diagnose connection issues
  help                           Help about any command
  http                           start an HTTP tunnel
  service                        run and control an ngrok service on a target operating system
  start                          start tunnels by name from the configuration file
  tcp                            start a TCP tunnel
  tls                            start a TLS tunnel
  tunnel                         start a tunnel for use with a tunnel-group backend
  update                         update ngrok to the latest version
  version                        print the version string

OPTIONS:
      --config strings    path to config files; they are merged if multiple
  -h, --help              help for ngrok
      --metadata string   opaque user-defined metadata for the tunnel session
  -v, --version           version for ngrok
  */

 

그런데 로컬에서 잘 실행되던 클라이언트를 터널링을 통해 ngrok이 포트포워딩하면서 외부에서 접근가능한 URL을 만들어주기에 접속해보면 Data Fetching 에러가 발생해...로컬에서는 GraphQL로 서버를 만들고 있었는데,..아마도 이건 내부에서 요청도 터널링을 통해서 제공된 외부 URL로 변경해서 데이터 요청을 해야하는걸로 이해하고 변경해보니 해결되긴 했어..

근데 왜 Region이 Japan인거냐...

 

결과적으로는 이렇게 2개의 포트를 터널링했는데 단순하게 포트를 2개 지정해서 ngrok을 실행하면 에러가 뜬다?

ngrok http 4000 5173

ngrok http [4000,5173]

// 둘다 아니니깐 이렇게 하지 마세요!ㅋ

 

너무 심플하게 생각함 ㅋㅋ 아무튼, dashboard에 답이 있더라!!

 

+ 해결법

 

ngrok configuration file에 두개의 포트를 설정하면 되는거였어, 나는 이게 뭐 Free 라서 제한있는줄 알았는데..그게 아님!

 

1)  Configuration File 체크 : 기본적으로 AppData내에 있더라고?

$ ngrok config check
Valid configuration file at C:\Users\sprax\AppData\Local/ngrok/ngrok.yml

 

2) Configuration File Edit : 환경설정 파일을 수정할수도 있어, 그런데 꼭 그렇게 하지말고..저건 전역 설정이라고 보여져

$ ngrok config edit
authtoken: 2####################################U

 

그래서 내가 해결한 방법은 로컬에 ngrok.yaml 이라는 파일을 만들고 여기에 터널링할 포트를 2개 지정해주었지

$ touch ngrok.yaml
$ vi ngrok.yaml

version: "2"
authtoken: 2########################################U
tunnels:
  graphql:
    addr: 4000
    proto: http
  react_app:
    addr: 5173
    proto: http

 

아, 그리고 이걸 기반으로 ngrok을 시작하는 script를 추가해주었고,..

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tunnel": "ngrok start --config=./ngrok.yml --all"
  },
  ...

 

이걸 실행하면, 2개의 포트를 터널링 하는데 성공했어! 혹시 몰라서 ngrok config file 관련 북마크도 추가해두어야 다음에 좀더 심오한(?) 설정을 할 수 있겠지!

https://ngrok.com/docs/agent/config/

Configuration File | ngrok documentation

 

III. ngrok Traffic Inspector

이렇게 터널링된 개발중인 서비스를 외부에서 접근해서 여러 디바이스에서 테스트를 해볼수 있게 되었고, 조금 더 편하게 갤이 진행되고 있다고 느꼈음. 이 기능은 ngrok DashBoard에 있음!

Traffic Inspector

 

이제 다시 코드를 만들어볼까?!