ngrokでローカル環境で起動させたアプリケーションを外部公開する

Webアプリケーションなどを作成しているとき、ローカルサーバーを立てて挙動を確認したりすることがあると思います。
今回は、この自分のローカル環境で起動しているアプリケーションを気軽に公開できるものを紹介します。
その名もngrokです。

導入

ngrokはエングロックと読みます。
nginx(エンジンエックス)っぽいとはいえ、東雲(しののめ)や心太(ところてん)ぐらい初見殺しです。

導入は簡単で

brew cask install ngrok

で完了です。

早速使ってみる

試しに、LaravelというPHPのフレームワークを今回使ってみます。
ngrok-testという名前でプロジェクトを作ります。

composer grobal require "laravel/installer=*"
composer create-project laravel/laravel ngrok-test

ngrok-testというプロジェクトを起動します。

cd ngrok-test
php artisan serve

これでLaravelのビルドインサーバーが起動するので、localhost:8000にアクセスすると、

とあらかじめLaravelで用意されたページが開きます。
ここで、ngrokを使ってみます。
Laravelのビルドインサーバーを起動させたまま

ngrok http 8000

を打ち込みます。これは、localhostの8000番のポートのものをhttpで外部公開するということを指定しています。
そうすると、

という画面が出てきます。
これで公開完了です。
Forwardingの欄に書かれている2つのURLが外部公開されているものです。
実際にアクセスしてみると、

とまあローカルで見れた画面と同じものなので当然画面上の変化はないのですが、実際に生成されたURLにアクセスすることでローカル環境と同じものが見れることが確認できます。

これだけだと恩恵を感じれないかもしれませんが、例えば開発中の画面を仲間に一旦共有したり、外部のAPIと試験的につなぎこみしたりも出来るようになります。

実際に、上で表示されたURLに別のPCやスマホからアクセスしても同じ画面が表示されます。
ちなみに、このURLはハッシュでランダム生成されたもので、ctrl+cでngrokを停止させるとこのURLは利用できなくなります。

まとめ

次回あたり、これを利用して何か作りたいなと思います。