ngrok を使ってローカル環境を一時的に公開してみる

ローカルマシンで動かしているウェブアプリを、一時的に他の人に見せたい時なんかに、イチイチよそにデプロイしたり、自機のプライベート IP を教えたりするのは面倒だ。

そこで ngrok というツールを使うと、ローカル環境で立ち上げている開発サーバに ngrok の URL が付与されるので、他の人には ngrok の URL を教えれば良くなり、とても簡単なのである。

実際に試してみた。

目次

ngrok アカウントを作成する

まずは ngrok アカウントを作成する。といっても GitHub 連携でログインすれば良いだけ。

ngrok 公式サイトに GitHub アカウントでログインすると、「Connect your account」欄が表示され、次のようなコマンドが表示されているはずだ。

$ ./ngrok authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

ngrok をインストールする

ngrok も公式サイトからダウンロードできるが、Mac なら Homebrew でもインストールできる。

# Homebrew Cask でインストールされる模様
$ brew install ngrok

そしたら先程の認証コマンドを実行する。

$ ngrok authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Authtoken saved to configuration file: /Users/Neo/.ngrok2/ngrok.yml

# 中身見てみるとコレだけ
$ cat ~/.ngrok2/ngrok.yml
authtoken: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

HTTP(S) トンネルを作る

ngrok は、ローカルのあるポートと ngrok とでトンネルを作っているだけだ。

例えば、ローカルサーバを 8080 で立ち上げているのであれば、それを公開する時は以下のように叩く。

# ngrok http は共通、その後に公開したいポートを指定する
$ ngrok http 8080

ngrok by @inconshreveable                                                                  (Ctrl+C to quit)
                                                                                                           
Session Status                online                                                                       
Account                       Neos21 (Plan: Free)                                                          
Version                       2.3.35                                                                       
Region                        United States (us)                                                           
Web Interface                 http://127.0.0.1:4040                                                        
Forwarding                    http://cf1bafa807c0.ngrok.io -> http://localhost:8080                        
Forwarding                    https://cf1bafa807c0.ngrok.io -> http://localhost:8080                       
                                                                                                           
Connections                   ttl     opn     rt1     rt5     p50     p90                                  
                              0       0       0.00    0.00    0.00    0.00

こんな感じ。Forwarding に表示されている URL を開けば、ローカルホスト相当の内容が世界中どのマシンからでも閲覧できる。

当然、ngrok でトンネリングしている間は、ローカルマシンでは開発サーバを立ち上げっぱなしにしておく必要がある。気が済んだら ngrok のコンソールを Ctrl + C で閉じ、その後開発サーバも停止すれば良い。

ngrok は Let's Encrypt による HTTPS も提供してくれているので、ウェブカメラを使うようなウェブアプリのデモもやりやすい。

コマンドのオプション引数で、サブドメイン部分の文言を任意のモノに変更できるので、自分のお決まりの文字列を決めておけば、ngrok を起動する度に URL が変わらず、アクセスが楽になるかも。