ローカルで立てたWebサーバーに自分のスマートフォンでアクセスする方法

ローカル環境でテストをする際にローカルサーバーを立てることがよくあると思います。

ローカルサーバーなので、基本的にはそのマシンからしかアクセスができません。

しかし、スマートフォンの場合にページがどう見えるのかなどを検証したい場合があり、自分のスマートフォンからアクセスしたい場合があります。

そんなときに便利なのがngrokというツールです。

ngrokを使うことでローカルサーバーを外部公開可能です。

インストール(Macです)

以下のコマンドを実行します。

brew install ngrok

ローカルサーバーを起動する

今回は http://127.0.0.1:8887 で起動しているとします。

ngrokを使って外部公開する

$ ngrok http 8887

8887 はローカルサーバーのポートを指定します。

すると、コンソールに以下のような出力がされます。

ngrok by @inconshreveable                                                                              (Ctrl+C to quit)
                                                                                                                       
Session Status                online                                                                                   
Session Expires               7 hours, 51 minutes                                                                      
Version                       2.3.35                                                                                   
Region                        United States (us)                                                                       
Web Interface                 http://127.0.0.1:4040                                                                    
Forwarding                    http://746d33645ee5.ngrok.io -> http://localhost:8887                                    
Forwarding                    https://746d33645ee5.ngrok.io -> http://localhost:8887

スマートフォンから http://746d33645ee5.ngrok.io もしくは https://746d33645ee5.ngrok.io にアクセスすると、ローカルサーバーで公開しているページが表示されます。

このホスト名の部分はngrokを起動する度にランダムに変わります。

セキュリティの観点で、テストをする時以外は ngrok を停止しておいた方が良いでしょう。

Control + C で停止することができます。