[ 目次 ]

• はじめに
• ngrokとは
• なんでグローバルに公開するの？
• ngrokインストール
• ngrokを起動

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は、ngrokを利用してMac上で動いているアプリをグローバルに公開してみたいと思います。

ngrok

ngrokとは

secure introspectable tunnels to localhost と記載されていますが、ローカル環境（今回はMac）で動いているサーバーを外部からアクセスできるようにグローバルに公開する仕組みです。
ngrokがグローバルなURLを発行し、そのURLへのアクセスをローカル環境のサーバーにトンネリングします。

ポートフォワード、トンネリングという言葉をググってみてください。

【補足】
MySQL or MariaDBに Sequel Pro を利用してアクセスしているエンジニアの方も多いのではないでしょうか？
ステージングや商用環境のRDBには直接アクセスできない（3360ポートは外部公開していない）と思います。そんな時は Sequel Pro のsshのポートフォワード機能を利用してRDBにアクセスしますよね？「sshでサーバーに接続→サーバーからRDBにアクセス」という接続を Sequel Pro が実現してくれます。この仕組みと似ていますね。

なんでグローバルに公開するの？

グローバルに公開するメリットは以下が挙げられます。

• 勉強会のデモとしてローカルのアプリを公開したい
• スマホの実機のテストとしてローカルのアプリを公開したい
  → ローカルのアプリを実機から利用できるとデバックがさらにし易いですよね
• OAuthでCallback URLがhttpsに限定されていたり、実在するドメインでないと利用できないケース
• Webhookの通知を受けたい。Stripeの決済のWebhook通知を受けてテストしたい場合

今回は、3つ目のOAuthの利用でngrokを導入することにしました。

ngrokインストール

まずは、公式サイト からアカウントを作成します。

登録後は、ngrokのダッシュボード画面に遷移します。
ダッシュボードからzipファイルをダウンロードして、ngrok のバイナリーを設定しましょう。

今回は、zipダウンロード後以下のコマンドで進めています。

$ unzip ngrok-stable-darwin-amd64.zip
$ # パスを通す為、/usr/local/binにngrokを移動
$ sudo mv ngrok /usr/local/bin/
$ 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 - <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を起動

今回はローカルの80番ポートにフォワードします。

$ ngrok http 80

ngrok by @inconshreveable                                                                                                                                          (Ctrl+C to quit)

Session Status                online
Account                       yuki (Plan: Free)
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://f6104064.ngrok.io -> localhost:80
Forwarding                    https://f6104064.ngrok.io -> localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

この場合、http://f6104064.ngrok.ioでアクセス可能になります。
起動毎にURLが変わります。