はじめに
今回はlocalhostで公開しているページをスマホのブラウザで見る方法を紹介します。
前提
- PCとスマホが同じネットワークに接続されていること
手順
1. PCのIPアドレスを調べる
- Windowsの場合
コマンドプロンプトで以下のコマンドを実行します。
ipconfig
- Macの場合
ターミナルで以下のコマンドを実行します。
ipv6を使用している場合違うかもしれません🙇♂️
ipconfig getifaddr en0
このとき表示されるIPアドレスがPCのローカルIPアドレスです。
2. localhostで公開しているポートを調べる
PCで起動しているサーバーのポート番号を調べます。
reactの場合はデフォルトで3000番ポート、viteの場合はデフォルトで5173番ポートです。
わからない場合、大抵はフレームワークなどでデフォルトのポート番号が指定されているので、そのポート番号を調べます。
3. スマホのブラウザでアドレスバーにURLを入力する
http://<PCのローカルIP>:<ポート番号>というフォーマットでアドレスバーに入力します。
例えば、PCのローカルIPアドレスが192.168.0.223で、ポート番号が3000の場合、以下のように入力します。
http://192.168.0.223:3000
これで、PCで公開しているページをスマホのブラウザで見ることができます。
WEBフロントエンド開発の場合、実際にスマホで確認することは大事ですのでぜひ今回紹介した方法をお試しください！