かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Mac localhost で開発中のサイトを実機モバイルで確認したい!

iPhoneSafari 対応してない CSS が結構あって開発中に実機で確認したい。ただCSSやJSの挙動の確認で更新とリロードが多くなるから確認環境を作って都度 push するのは too much …
手元の localhost のまま実機確認したんじゃ〜というケースが多々あります。

ngrok を使って localhostホスティングすれば OK

Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.

Ngrok のエンドポイントを介して紐付けられているホストを配信できるサービスという認識。 1プロセスしか使わないなら無料なので開発中に自分で確認する用途で使うにはちょうど良さそう

インストール

homrbrew でインストールできる

$ brew install ngrok

ngrok を使って localhost を配信する

cf. ngrok – documentation

ngrok http {ポート番号} でアクセス可能な URL が発行される。
localhost:3000 で動いているローカルサーバーのサイトを公開したい場合は次通り

$ ngrok http 3000
 ngrok by @inconshreveable                                                                                                       (Ctrl+C to quit)
                                                                                                                                                
Session Status                online                                                                                                            
Session Expires               1 hour, 59 minutes                                                                                                
Version                       2.3.40                                                                                                            
Region                        United States (us)                                                                                                
Web Interface                 http://127.0.0.1:4040                                                                                             
Forwarding                    http://XXXXXXXXXXXX.ngrok.io -> http://localhost:3000                                                            
Forwarding                    https://XXXXXXXXXXXX.ngrok.io -> http://localhost:3000                                                            
                                                                                                                                                
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                       
                              0       0       0.00    0.00    0.00    0.00 

httphttps とで .ngrok.io のURL が発行されるので、このアドレスに実機からアクセスすれば開発中のローカルサーバーのサイトの表示確認をすることができる。

₍ ᐢ. ̫ .ᐢ ₎ カンタン!!


[参考]

ngrokで検索したらこれ出てきたけど謎