スマホからローカル開発環境に接続する2つの方法

2025.10.13

ローカルで開発中のWebサイトをスマホの実機で確認したい場合、主に2つの方法があります。この記事では、WiFi経由でIPアドレスから接続する方法と、ngrokを使った方法の両方を解説します。

方法1: WiFi経由でIPアドレスから接続

同じWiFiネットワークに接続されている場合、MacのローカルIPアドレスを使ってスマホからアクセスできます。

ステップ1: ローカルIPアドレスを確認

ターミナルで以下のコマンドを実行：

ipconfig getifaddr en0

実行結果の例：

192.168.2.191

このIPアドレスをメモしておきます。

ステップ2: 開発サーバーを適切なホストで起動

Next.jsの開発サーバーを外部からアクセス可能な設定で起動する必要があります。package.jsonに以下の設定を追加：

{
  "scripts": {
    "dev": "next dev --turbopack --hostname 0.0.0.0"
  }
}

--hostname 0.0.0.0を指定することで、すべてのネットワークインターフェースからアクセスできるようになります。

ステップ3: 開発サーバーを起動

npm run dev

サーバーが起動すると、以下のようなメッセージが表示されます：

  ▲ Next.js 15.x.x
  - Local:        http://localhost:3000
  - Network:      http://192.168.2.191:3000

ステップ4: WiFi接続の確認

スマホのブラウザで以下のURLにアクセス：

http://192.168.2.191:3000

※ IPアドレスは手順1で確認したものを使用してください。

トラブルシューティング

接続できない場合の確認事項

1. ファイアウォールの確認

macOSのファイアウォールがブロックしている可能性があります：

システム環境設定（設定） > ネットワーク > ファイアウォール

ファイアウォールが有効な場合、「ファイアウォールオプション」から「Nodeまたはnextの着信接続を許可」を追加
テスト時は一時的にファイアウォールをオフにして確認することもできます

2. Macとスマホが同じWiFiに接続されているか確認

2.4GHzと5GHzのWiFiが別のSSIDになっている場合、同じSSIDに接続する必要があります
ゲストネットワーク（来客用WiFi）を使用している場合、デバイス間通信が制限されている可能性があります

3. WiFiルーターの設定確認

WiFiルーターに「AP分離（クライアント分離）」機能が有効になっている場合、デバイス間の通信がブロックされます。

ルーターの管理画面にアクセス：

# ルーターのIPアドレスを確認
netstat -nr | grep default

表示されたIPアドレス（例：192.168.2.254）をブラウザで開き、以下の設定を確認：

無線LAN設定 > 詳細設定 > 「AP分離」を無効化
英語表記の場合：Wireless > Advanced > "Enable AP Isolation"のチェックを外す

4. 開発サーバーが正しく起動しているか確認

# ポート3000が使用されているか確認
lsof -i :3000
 
# Mac自身からアクセスできるか確認
curl -I http://192.168.2.191:3000

WiFi接続のメリット・デメリット

メリット：

追加のツール不要
高速な接続
ローカルネットワーク内で完結

デメリット：

同じWiFiネットワークに接続する必要がある
WiFiルーターやファイアウォールの設定が必要な場合がある
マンション等の共用WiFiでは設定変更できない場合がある

方法2: ngrokを使った方法（推奨）

ngrokを使用すると、WiFi設定を変更せずにスマホから簡単にアクセスできます。さらに、4G/5G回線からもアクセス可能になります。

ステップ1: ngrokのインストール

Homebrewを使ってngrokをインストール：

brew install ngrok/ngrok/ngrok

ステップ2: ngrokアカウントの作成と設定

1. アカウント作成

ngrokの公式サイトでアカウントを作成： https://dashboard.ngrok.com/signup

無料プランで十分です。

2. Authtokenの取得と設定

ログイン後、ダッシュボードに表示される「Authtoken」をコピーして、以下のコマンドを実行：

ngrok config add-authtoken YOUR_TOKEN_HERE

※ YOUR_TOKEN_HEREを実際のトークンに置き換えてください。

ステップ3: 開発サーバーとngrokを起動

ターミナル1：開発サーバーを起動

npm run dev

ターミナル2：ngrokでトンネルを作成

ngrok http 3000

ngrokが起動すると、以下のような画面が表示されます：

ngrok

Session Status                online
Account                       your-account (Plan: Free)
Version                       3.x.x
Region                        Japan (jp)
Latency                       -
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://xxxx-xxxx-xxxx.ngrok-free.app -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

ステップ4: ngrok URLへのアクセス

「Forwarding」に表示されているHTTPSのURL（https://xxxx-xxxx-xxxx.ngrok-free.app）をスマホのブラウザで開きます。

初回アクセス時、ngrokの警告ページが表示される場合がありますが、「Visit Site」ボタンをクリックすれば進めます。

ngrok使用時の注意点

無料プランの制限：

URLがセッションごとにランダムに変わる（固定URLは有料プランのみ）
同時接続数に制限がある
帯域幅に制限がある

セキュリティ：

生成されたURLは誰でもアクセス可能なので、本番環境の機密情報は扱わない
テストが終わったらngrokを停止する（Ctrl+C）

ngrokの便利な機能

Web Interface（管理画面）

ngrok起動中に以下のURLにアクセスすると、リクエストの詳細を確認できます：

http://127.0.0.1:4040

この画面では以下の情報が確認できます：

受信したHTTPリクエストの詳細
レスポンスの内容
リクエスト/レスポンスの時間

Basic認証の追加

URLを知っている人だけがアクセスできるよう、Basic認証を追加できます：

ngrok http 3000 --basic-auth="username:password"

ngrokのメリット・デメリット