はじめに
ローカルサーバー(PC内のサーバー)を外部に公開したいと思ったことはないだろうか？
いわゆるパソコン上のブラウザでアクセスする分には、ローカルで開発用サーバーを起動して難なく実現出来るだろう。
これが、スマフォからのアクセスとなればどうだろうか。
おそらく自宅であれば、WiFiルーターなどで折り返してアクセスするという方法もあるだろう。
では自宅などとは違ってネットワークの構成、設定が思うようにならない場合はどうだろうか。
レンタルサーバ、VPS、AWSやGCPにAzure、Herokuとまぁ何でも良いんだけど、インターネット上にWebアプリをホストできる状態にある人は、それを使うというのももちろん手だ。
でも、動機は果たして何だったのか。
そう、開発環境でデバッグモードで、ブレイクポイントにトレースを仕掛け、コードを修正したら保存、即アプリ更新な、やはり開発環境のローカルサーバーにアクセスしたいのではないだろうか。
開発中のWebアプリを、ローカルサーバーを外部に公開出来たとしたら？
前置きが長くなったが、Node.jsなら npm run dev でwebpack-dev-serverあたりを、Pythonでdjangoならmanage.py runserver、Rubyならbin/rails sあたりでローカルサーバーが動いていると思うが、これにインターネット越しにアクセスできたらどうだろう？
もちろん、スマフォでなくてもOKだ。今作りかけのアプリを誰かに今すぐ見せたくて、使ってみて欲しくてといったこともあるかも知れない。そう、会議中などにデモ的に動く環境を出席者に提供する等といったことも頭を過るかも知れない。
ともかく、そんなときにはngrokだ。
ngrok
公式サイトをまずは見てほしい。SIGN UPが必要だが、無料のプランで試すことが出来るし、ちょっとした確認であればこれで十分だだと思う。
インストールから使い方
インストール
公式サイトのヘッダーメニューにDOWNLOADリンクがあるのでクリックすると以下の画面に。
ダウンロードボタンをクリックしてダウンロードし、zipを展開。
unzip /path/to/ngrok.zip
ぽつんとngrokという名前のファイルが出てくる。私はこういうときは${HOME}/.bin配下に配置している。もちろん${HOME}/.binにはパスが通っている。
最初に一度だけ、以下を実行。
./ngrok authtoken <YOUR_AUTH_TOKEN>
ここで、<YOUR_AUTH_TOKEN>の部分は、ログイン後以下の画面から確認可能。
使い方
使い方は至って単純。もし3000番ポートで開発中のアプリが起動していたら、以下を実行。
./ngrok http 3000
赤枠で囲ったURLへアクセスすると、ローカルの3000ポートが反応するという形に。
スマフォならではの機能を試すときなどに便利なので是非。