ローカルサイトを外部に公開できるngrokの使い方

ローカル環境で作っているサイトを、ネット経由で見せたいときってありますよね？
そんなときに便利なのが「ngrok 」というコマンドラインのツールです。

自分の端末のローカル環境で作業をしているウェブサイトを同僚に見せたいときや複数端末でブラウザテストをする際、また、BrowserStack やCrossBrowserTesting のような外部のブラウザテストサービスを使うときにも役立ちます。あと、コワーキングスペースなどで作業していてネットワーク環境がコントロールできない時にも便利ですね。

しかも、これが無料で提供されています。ありがたいですね。開発者の方に感謝です。

ngrokでできること

ngrokでできることを簡単にまとめると、以下の通りです。

• localhostにhogehoge.ngrok.comで外部からアクセスできる
• マルチデバイスのテストに便利
• CrossBrowserTestingのようなテストサービスにも使える
• コワーキングスペースなどでローカルのサイトをシェアしたい時にも便利

インストール方法

1. ngrok.com からダウンロード
2. 任意のディレクトリにファイルを解凍する

僕の場合はコマンドラインでどこからでも使えるように、パスが通っている/usr/local/binにファイルを設置しました。ちなみにPATHの確認は以下のコマンドでできます。

% printenv PATH
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin

基本的な使い方

基本的なコマンドをいくつか書いておきます。

ローカルホストを公開

% ngrok http 8006

このコマンドを実行すると以下のように情報が表示されるので、表示されたURLからlocalhost:8006にアクセスできます。「xxxxxxxx」の部分はngrokから自動で割り当てられます。

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

ngrokのウェブインターフェイス

ngrokを走らせた状態でhttp://127.0.0.1:4040にアクセスするとngrokのステータスをチェックしたり表示されているページの状態をインスペクトできます。

停止する方法

Ctrl-Cでngrokを停止できます。

サブドメイン

上の「xxxxxxxx」を指定することも可能です。

% ngrok http -subdomain=hogehoge 8006

-subdomainオプションに指定したサブドメイン（上の場合は「hogehoge.ngrok.io」）で、localhost:8006にアクセスできます。

パスワード保護（BASIC認証）

BASIC認証でパスワード保護することもできます。

% ngrok http -auth='user:password' 8006

「user」に任意のユーザ名、「password」に任意のパスワードを指定します。これで表示されたサブドメインからlocalhost:8006にBASIC認証付きでアクセスすることができます。

まとめ

以上、ローカル環境（localhost）を外部に公開するための便利なツール「ngrok」についてご紹介しました。こういったツールはいくつかありますが、その時の状況や環境にあわせて使い分けられるように、いくつか準備しておくと良さそうですね。ちなみに、僕は最近ではお手軽なCodekit とngrok を使い分けています。

では、Happy developing!

2017年10月11日に公開され、2019年3月29日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存