🔗

wifi経由でローカル開発中の React をモバイル端末から確認

に公開
React
Wi-Fi
IP
Vite
tech

はじめに

React での開発中にモバイル端末からUIやインタラクションを確認したい状況があると思います。
特に、ブラウザ別に挙動が異なることもあって開発時にそれらを確認・修正および調整できるとすごく楽です。

本記事では React / Vite をユースケースに、ローカル開発中の React プロジェクトをモバイル端末から確認できる方法を書いていきます。

仕組みとしては「PCのローカルIPアドレスにモバイル端末からアクセスする」ことで閲覧できるようになります。

結論

  1. ※Viteの場合： 設定ファイル（vite.config.ts）を変更して外部からアクセス可能にする
  2. 開発中のPCとモバイル端末を同じWiFiネットワークに接続する
  3. PCのローカルIPアドレスを確認する
  4. モバイル端末のブラウザでPCのIPアドレスにアクセスする

以上のステップで実現できます。
順に見ていきましょう。

0. Viteの設定を変更する

Viteはデフォルトでlocalhostのみをリッスン（リクエスト待ち受け）するため、外部デバイスからアクセスできません。
host: '0.0.0.0'を設定することで、同じネットワーク上のすべてのデバイスからアクセス可能になります。

vite.config.js（またはvite.config.ts）を編集：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
   plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+  }
})

または起動時にオプション指定

npm run dev -- --host

表示された以下ターミナル内のNetworkアドレス（http://192.168.~）に接続することでモバイル閲覧が可能。

  VITE v7.3.1  ready in 171 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.xxx:5173/
  ➜  press h + enter to show help

1. 開発中のPCとモバイル端末を同じWiFiネットワークに接続する

これは文字通りです。開発に使うPCとモバイル端末を、同じWiFiネットワークに接続してください。
例：自宅のWiFiルーターに両方を接続

2. PCのローカルIPアドレスを確認する

モバイル端末からアクセスするためのURLアドレスを確認・取得していきますが、OSごとに確認コマンドが異なります。

Windows

ipconfig
  • 出力結果から「イーサネット アダプター」または「ワイヤレス LAN アダプター」のセクションを探す
    • ※イーサネット：主に有線LANで使われる通信規格
  • IPv4 アドレスを確認（例：192.168.1.10）

Mac

ifconfig
  • WiFi接続の場合、通常はen0セクションを確認
  • inetの後ろのアドレスを確認（例：192.168.1.10）
簡易確認コマンド
ifconfig | grep "inet " | grep -v 127.0.0.1

Linux

ip addr

# または以下（※Macと同じコマンド）
# ifconfig
  • WiFi接続の場合、wlan0またはwlpで始まるインターフェースを確認
  • inetの後ろのアドレスを確認

3. モバイル端末のブラウザでPCのIPアドレスにアクセスする

  • 開発サーバーを起動（または再起動）
npm run dev

起動時に以下のように表示されます。

...
..
.
➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.10:5173/

このNetworkのURLが目的のアドレスになります。
ここにアクセスすることで、モバイル端末からも閲覧可能となります。

セキュリティ上の注意

  • host: '0.0.0.0'は開発環境でのみ使用する
    • 開発が終わったら設定を元に戻すことを忘れないよう注意
  • 信頼できるネットワーク（自宅のWiFiなど）でのみ実施する
    • 公共のWiFiや不特定多数がアクセス可能なネットワークでは使用しない

さいごに

デプロイしてスマホでの実機確認時に初めてUIの崩れや挙動の違いに気づくことはよくあります。
その都度、修正してまたデプロイして…を繰り返すのは非常に面倒です。

本記事がそうした面倒事を減らす一助になれましたら幸いです。
ここまで読んでいただきありがとうございました。

Discussion