犬「桃太郎さん、きび団子ください」 桃太郎「犬が喋った！？」
こんにちは。エンジニアのまろです。
テストサーバーにアップするのって面倒ですよね。FTP環境だったり、Gitでの環境だったり。どちらもコマンドでアップするんですけどなんか。。。
あと外部サービス連携も面倒ですよね。開発中と本番のURLが違うのはもちろん、localhost:8080なんて外部からアクセスできないし、それの設定なんてこれまた面倒。そんなときにngrok使いましょう。というお話です。
ngrokとは
localhostで動いているサーバーを外部（LAN外）からアクセスできるように、リレーしてくれるツールです。
例えば「http://localhost:8888」が「http://c3f4avrc.ngrok.com」になって公開される感じです。
簡単すぎて、今回はボリューム少な目です。
※無料ですが、ngrokを継続して使っていくために任意で寄付を募っています。少し考えてみるのもいいかもしれません。
ダウンロード
Macならこれで一発。
brew install ngrok
他はこちらからダウンロードします。
それぞれのプラットフォームのものを選択してください。
実行
先ほどダウンロードしたファイルを解凍します。
ローカルで立ち上げている3081ポートを公開する例です。
Macでの動作となります。
ちなみにリレーするのはgulpで立ち上げたサーバーです。gulpを使った開発環境の作り方については「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」を参照してみてください。
ngrok 3081 #webサーバーのポート(localhost)
立ち上げると、ランダムに振り分けられたURLが表示されますので、そこにアクセスします。アクセスログも吐き出されます。
スマホの4Gからでもバッチリアクセスできました。
ちなみに「http://localhost:4040/http/in」から詳しいログを確認できるダッシュボードにアクセスできます。
ランダム文字列が面倒くさい
振り分けられるサブドメインはランダムです。これは覚えにくいですね。好きな文字列にすることができたなら、それは本当に素敵なことです。
そんなときは、こちらからSign Upしてみましょう。
GitHubでログインしてhttps://ngrok.com/dashboardにいくと-authtokenがあるので一旦それを実行します。
./ngrok -authtoken *******/****** 3081
そして以下のように起動すると、
ngrok -subdomain=maromaro 3081
「http://maromaro.ngrok.com」としてURLが振り分けられます。
まとめ
簡単ですね。シビアな案件では厳しいと思いますが、一時的に、テストとして使うのであれば使えそうな気がします。
Linux版もありますので、マイコンボード上でサーバーを立てたときにサクッと外部からアクセスできるIoTな使い方もできそうですね。
過去の積み上げのせいでテストサーバーに制限があったり、お金の問題でクラウドが使えなかったり、そんな環境におすすめです。
これで、あらかさんに僕のlocalでちょっと確認してみてとお願いして、4Gで接続されて「繋がんないんですけど」なんて言われて拳をグッと握ることがなくなりそうです。
【フロントエンドエンジニアの皆さんへ】
※ エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順
※ AngularJSのOne-time Bindingを使ってパフォーマンス改善をしよう
※ WebPackを使ってJavaScriptを効率的に書くチュートリアル【入門編】