ngrokでローカルのWebサイトをインターネット公開する

2019年5月19日

ngrok（エングロック）という便利なサービスを見つけたので紹介します。

ngrokとは

ローカルWebサーバーで動かしているサイトをインターネットに公開できるサービスです。

デプロイ環境がなくてもWebサイトを公開することができます、それもローカル環境のものをそのまま！すごい！

開発中のサイトをインターネット経由で誰かに見てもらいたいときや、Web API（コールされる側）の開発などに役立ちそうです。

ngrokの使い方

アカウント登録

まずは、公式サイトからアカウント登録します。

GitHub、Googleアカウントでログインすることもできます。

ngrokコマンドのダウンロード

ログインすると↑のようなページに来るので、自身の環境に合わせたngrokコマンドをダウンロードしましょう。

私は今回Windows版を使います。
ダウンロードしたZIPの中に「ngrok.exe」が入っているので、任意のディレクトリにおいてパスを通します。

パスを通したらngrokコマンドが使えるようになります。

>ngrok --version
ngrok version 2.3.28

ngrokコマンドのセットアップ

↑の画像の③にあるコマンドをローカルで実行します。
自分のアカウントの接続トークン文字列が入っているので正確にコピペしましょう。

>ngrok authtoken ***********************************
Authtoken saved to configuration file: C:\Users\aaa/.ngrok2/ngrok.yml

認証が成功するとローカルに設定YAMLが作られます。

サイトを公開

ローカルのWebサーバーを立ち上げて、ngrokコマンドを実行します。

>ngrok https 80

localhostの80番ポートをhttpsプロトコルで外部公開します。
コマンドを実行するとターミナルに稼働状況が表示されます。

動的に割り当てられたURLがでるのでアクセスするとローカルのサイトが表示されます。

爆速でWebサイトが公開できちゃいました！

その他

Apacheのログを見るとlocalhostからのアクセスになってました。

コマンドにパラメータを指定してbasic認証をかけることもできます。

>ngrok https -auth="ユーザー:パスワード" 8080

ポートを変えて複数サイト起動を試してみましたが、無料アカウントではアクティブにできるサイトは１つのみのようです。

各プランはこんな感じ

プランが上がるとドメインを指定できたり、コネクション数が増やせるみたいですね。

---

GitHubのwebhookをテストしたくてググってたらたまたま見つけました！
Postmanと一緒にWebサービス連携の開発には必需品になりそうです。

また、アジャイルな案件ではコード直してすぐクライアントに確認してもらうとかにも使えるんじゃないかな。

でわ。