MacにngrokをインストールしてローカルWebサーバを外から接続できるようにする

#Mac環境
私のMacの環境は以下

terminal

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.12.6
BuildVersion:	16G29

#ngrokって？
ポワードフォワーディングのサービスの一つです。ファイアウォール下でもHTTP等をトンネリングして外部からアクセスできるようにするトンネリングサービスです。どちらかというとWebアプリケーション等の開発者向けで、用途としてはローカルで開発中のWebアプリケーション等の動作検証で外部からアクセスしてもらえるようにする、などがあるようです。

注意
ポートフォワーディングはネットワークに穴を開ける行為です。 セキュリティ上のリスクを承知したうえで使う必要があります。

#ngrokをダウンロード
ngrockのサイトからOSに合わせた資材をダウンロードします。

ダウンロードフォルダにzipファイルがダウンロードされました。

unzipするとHOMEディレクトリに解凍されます。

terminal

$ unzip ~/Downloads/ngrok-stable-darwin-amd64.zip 
Archive:  /Users/take/Downloads/ngrok-stable-darwin-amd64.zip
  inflating: ngrok             

#ヘルプコマンドで動作テスト
helpコマンドで動作確認します。

terminal

$ ./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 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.2.8

AUTHOR:
  inconshreveable - <[e-mail]>

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

#使ってみる
早速使ってみます

terminal

$ ./ngrok http 80

この状態でインターネットにつながる端末ならどこからでも http://fee58745.ngrok.io にアクセスすればローカルの80番につながります。お手軽ですね。サブドメインの fee58745 は動かすたびにランダムな文字列が設定されます。

#PCとユーザアカウントを紐付ける
ngrok.comにサインアップします

するとトークンが発行されるので、画面に指示されたとおりにコマンドを実行します。

terminal

$ ./ngrok authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Authtoken saved to configuration file: /Users/take/.ngrok2/ngrok.yml

#動作確認
再度80番ポートで使ってみます

terminal

$ ./ngrok http 80

アカウント名が表示されるようになりましたね

ブラウザからアクセスしてみると、エラー画面になります。これはトンネリング通信はできていますが、私のPC自体80番ポートを使ったhttps通信を行うアプリを起動していないためです。ポワードフォワーディングの仕組み上は問題なしです。

以上です。ngrokは1.xバージョンではサブアドレスの指定が無料でできましたが2.xバージョンでは有料になってます。動作テスト程度でしたら無料でOKかと思います。