スマホでlocalhostをテストする方法3選

web開発をする際、スマホで正常に動作するかの確認をしたい場面があると思います。
その際にさまざまな方法を試したので備忘録としてまとめました。

方法1 ： IPアドレスを使用する

1. PC, スマホが同じwifiに接続していることを確認
2. スマホでhttp://[IPアドレス]:[ポート番号]にアクセス(例：111.111.1.1:8080)

注意点

• 自分のアパートの備え付けであるwifiだと何故かできませんでした泣
• 同じwifiに接続しているデバイスでないとアクセスできません

方法2 ： ngrokを使用する

1. ngrokをインストール(macの場合、brew install ngrok)
2. ngrok http [ポート番号]を実行
3. 発行されたURLにアクセス

注意点

無料枠があり、アクセスしすぎると課金しないといけません。

方法3 : localtunnelを使用する

1. npx localtunnel --port [ポート番号]を実行
2. ローカルホストを立てているPCが接続しているネットワーク上のデバイスでhttps://loca.lt/mytunnelpassword にアクセスしてパスワードを取得
3. 発行されたURLにアクセスし、取得したURLを入力して送信

注意点

心なしかngrokに比べて遅い気がします。

どれがいいのか？

基本的にはIPアドレスを使った方法で事足りると思います。自分はwifiの設定?の関係で使えなかったので、代わりにlocaltunnelを使用しています。

ローカル環境を他の人に共有したい場合、ngrokやlocaltunnelを使用すると良いと思います。

参考