ローカルサイトを外部に公開するためのツール「ngrok」が便利

Advertisement

以前このブログで紹介したことがあるんですが、「ngrok 」というツールを久々に使ってやっぱり便利だなぁと思ったので再度ご紹介します。

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

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

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

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

アカウント登録(無料)でさらに便利に

アカウント登録(無料)をすると、以下の機能も使えるようになります。

  • サブドメインの指定
  • パスワード保護

これらの機能を使えるようにするには、アカウント登録してauthtokenを設定する必要があります。

Authtokenの設定方法

アカウント登録 してログインして「Get Started」のページに行くと「Install your authtoken」の下に以下のようなコマンドがあります。

% ngrok -authtoken XXXXXXXXXXXXXXXXXXXX

これをターミナルにコピペして実行するとAuthtokenの設定が完了します。これでサブドメインの指定やパスワード保護ができるようになります。

基本的な使い方

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

ローカルホストを公開

% 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!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です