技術資料

Laravelの開発サーバーを同一LANのスマホから確認する方法

作成日:2026.08.24

Laravel PHP

Laravelの開発サーバーをPCのLAN内IPアドレスで起動し、同じWi-Fiに接続したスマートフォンから画面を確認する手順を説明します。開発PCのIPアドレス確認、php artisan serveの待受設定、npm run build後のCSS・JavaScript確認、Windows Defender FirewallやWi-Fiルーターによって接続できない場合の切り分けを扱います。

目次

Laravelで画面を作っていると、PCのブラウザだけでなく、スマートフォンの実機でも表示を確認したくなることがあります。

通常のphp artisan serveは、開発PC自身からアクセスするための待受設定になっています。そのままでは、同じWi-Fiに接続したスマートフォンからアクセスできません。

今回は、Laravelの開発サーバーを開発PCのLAN内IPアドレスで起動し、同じLANに接続したスマートフォンから画面を確認します。Viteについては、npm run buildでCSSやJavaScriptをビルドした後の成果物をLaravelから配信する構成にします。

なお、今回はViteの開発サーバーを起動していないため、HMR(Hot Module Replacement)の確認は扱いません。

前提

今回の確認では、次のネットワーク構成を使用します。

  • 開発PC: 192.168.0.2
  • スマートフォン: 192.168.0.3
  • Laravel開発サーバー: 192.168.0.2:8000

実際の環境ではIPアドレスが異なるため、以降の192.168.0.2は開発PCのIPアドレスへ置き換えてください。スマートフォンのIPアドレスは、同じLANに接続されていることを確認するために使用します。アクセス先のURLへ指定するのは、開発PCのIPアドレスです。

Laravelプロジェクトは作成済みで、PowerShellから次のコマンドを実行できる状態を前提にします。

php --version
php artisan --version
node --version
npm --version

LaravelのバージョンやNode.js、npmのバージョンは、実際に使用するプロジェクトの結果を記録してください。LaravelのVite連携では、Node.jsとnpmを使ってアセットをビルドします。詳しくはLaravel 13.xのVite公式ドキュメントを参照してください。

今回の構成

今回はViteの開発サーバーを起動せず、先にCSSとJavaScriptをビルドします。Laravelの開発サーバーが、ビルド済みのアセットを含む画面を返します。

スマートフォン
    |
    | 同じLAN / Wi-Fi
    v
開発PC 192.168.0.2:8000
    |
    v
Laravel開発サーバー
    |
    +-- Bladeで生成したHTML
    +-- npm run buildで生成したCSS
    `-- npm run buildで生成したJavaScript

Viteには、開発サーバーを起動して変更を反映する使い方と、アセットをビルドして配信する使い方があります。今回は後者を使うため、スマートフォンから確認できるのはビルド時点の内容です。ファイルを変更した場合は、再度npm run buildを実行します。

開発PCのIPアドレスを確認する

まず、PowerShellで開発PCのIPアドレスを確認します。

ipconfig

表示されたネットワークアダプターのうち、現在接続しているWi-Fiまたは有線LANの「IPv4 アドレス」を確認します。

IPv4 Address. . . . . . . . . . . : 192.168.0.2

複数のネットワークアダプターがある場合は、VPNや仮想ネットワークのIPアドレスではなく、スマートフォンと同じLANに接続しているアダプターのIPアドレスを使います。

スマートフォン側でもWi-Fiの接続先を確認し、今回の例では次のように同じネットワークのアドレスになっていることを確認します。

開発PC      : 192.168.0.2
スマートフォン: 192.168.0.3

IPアドレスの先頭3つが同じでも、必ず通信できるとは限りません。後述するWi-Fiルーターの端末間通信制限が有効な場合は、同じWi-Fiに接続していても相互にアクセスできないことがあります。

Viteのアセットをビルドする

LaravelのBladeで@viteを使ってCSSやJavaScriptを読み込んでいる場合は、まずプロジェクトのルートディレクトリでアセットをビルドします。

依存パッケージをまだインストールしていない場合は、先にnpm installを実行します。

npm install

続けて、ビルドを実行します。

npm run build

ビルドが成功すると、通常はpublic/build以下に、ハッシュ値を含むCSSやJavaScriptなどのファイルとマニフェストが生成されます。出力先を変更している場合は、プロジェクトのvite.config.jsとLaravelのVite設定を確認してください。

Bladeでは、例えば次のように@viteを記述します。

<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Laravelの@viteディレクティブは、開発サーバーが起動している場合は開発用のアセットを読み込み、ビルド後は生成されたアセットを読み込みます。今回はViteの開発サーバーを起動していないため、npm run buildで作成したファイルが使われます。

ビルド後にソースファイルを変更した場合は、変更内容をスマートフォンで確認する前に、もう一度npm run buildを実行してください。

Laravelの開発サーバーをLAN向けに起動する

Laravelプロジェクトのルートディレクトリで、開発PCのIPアドレスとポート番号を指定して起動します。

php artisan serve --host=192.168.0.2 --port=8000

ここでは、開発PCの192.168.0.2で待ち受けます。ポート番号を指定しない場合は、Laravelの既定値が使われますが、スマートフォンからアクセスするURLと合わせやすくするため、今回は8000を明示します。

まず、開発PCのブラウザでLAN内IPアドレスを使って確認します。

http://192.168.0.2:8000

開発PC上でこのURLへアクセスして画面が表示される場合、Laravelアプリケーション自体は起動しています。スマートフォンから接続できない場合は、Laravelの処理ではなく、Firewallやネットワークの問題である可能性が高くなります。

スマートフォンからアクセスする

スマートフォンを開発PCと同じWi-Fiへ接続し、ブラウザで次のURLを開きます。

http://192.168.0.2:8000

Laravelの画面が表示されれば、スマートフォンから開発PCのLaravel開発サーバーへ接続できています。

今回の確認では、npm run buildの実行後にスマートフォンから画面を開き、LaravelのHTML、CSS、JavaScriptが表示・動作することを確認しました。

ただし、今回はViteの開発サーバーを起動していません。したがって、ファイル変更を自動反映するHMRは確認していません。HMRをスマートフォンから確認する場合は、Viteの待受アドレスやHMRの接続先など、別の設定と検証が必要になります。

接続できない場合

Laravelの待受状態を確認する

Laravelを起動したPowerShellに、192.168.0.2:8000で待ち受けていることを示す表示があるか確認します。別のPowerShellから、TCPポートの待受状態を確認することもできます。

Get-NetTCPConnection -LocalPort 8000 -State Listen

何も表示されない場合は、Laravelの開発サーバーが停止しているか、別のポートで起動しています。起動コマンドと、ブラウザで開くURLのポート番号をそろえてください。

Windows Defender Firewallを確認する

開発PC自身では画面が表示できるのに、スマートフォンから接続できない場合は、Windows Defender Firewallの受信規則を確認します。

PowerShellから、開発PC自身のポートへ接続できるかを確認できます。

Test-NetConnection 192.168.0.2 -Port 8000

スマートフォンからの受信を許可する必要がある場合は、管理者権限のPowerShellで、プライベートネットワークかつローカルサブネットに限定した規則を作成します。

New-NetFirewallRule `
    -DisplayName "Laravel Dev Server 8000" `
    -Direction Inbound `
    -Protocol TCP `
    -LocalPort 8000 `
    -Action Allow `
    -Profile Private `
    -RemoteAddress LocalSubnet

このコマンドはWindows Firewallの設定を変更します。実行前に、現在のネットワークが信頼できるプライベートネットワークとして設定されていることを確認してください。

既存の規則を確認する場合は、次のコマンドを実行します。

Get-NetFirewallRule -DisplayName "Laravel Dev Server 8000"

確認が終わり、今後この規則を使わない場合は、対象を確認してから削除します。

Remove-NetFirewallRule -DisplayName "Laravel Dev Server 8000"

Firewallの規則を追加しても接続できない場合は、ネットワークプロファイルがPrivateではない、別のFirewall規則が優先されている、またはルーター側で端末間通信が制限されている可能性があります。

Wi-Fiルーターの端末間通信制限を確認する

Wi-Fiルーターやアクセスポイントには、同じWi-Fiへ接続した端末同士の通信を禁止する機能がある場合があります。

  • AP isolation
  • プライバシーセパレーター
  • 端末間通信禁止
  • ゲストネットワーク

スマートフォンがゲスト用のSSIDへ接続している場合、開発PCと同じインターネット回線を利用していても、LAN内の端末へ接続できないことがあります。開発PCとスマートフォンが同じ通常のネットワークへ接続されているか、ルーターの設定を確認してください。

0.0.0.0で起動する場合

特定のIPアドレスではなく、すべてのネットワークインターフェースで待ち受ける場合は、次のように起動できます。

php artisan serve --host=0.0.0.0 --port=8000

0.0.0.0はアクセス先として入力するアドレスではありません。スマートフォンからは、引き続き開発PCのIPアドレスを使います。

http://192.168.0.2:8000

ただし、0.0.0.0は特定のLAN側IPアドレスだけに限定する指定ではありません。今回のように同じLANのスマートフォンから確認するだけなら、まずは--host=192.168.0.2のように対象インターフェースを指定する方法を検討します。

注意点

  • php artisan serveは開発用のサーバーであり、本番環境のWebサーバーとして使用しない。
  • インターネットからアクセスできるように、ルーターのポートフォワーディングを設定しない。
  • LAN内であっても、機密情報や実在する個人情報を表示する画面の確認には注意する。
  • Firewallの許可範囲は必要最小限にし、確認後は不要な規則を削除する。
  • ソースファイルを変更した場合は、Viteの開発サーバーを使わない今回の構成では、再度npm run buildを実行する。

まとめ

Laravelの開発サーバーを同じLANのスマートフォンから確認する場合は、開発PCのLAN内IPアドレスを指定して起動します。

php artisan serve --host=192.168.0.2 --port=8000

スマートフォンからは、開発PCのIPアドレスを使って次のURLへアクセスします。

http://192.168.0.2:8000

Viteを使っている場合は、先にnpm run buildを実行しておくことで、Laravelからビルド済みのCSSやJavaScriptを配信できます。

PC上では表示できるのにスマートフォンから接続できない場合は、Laravelの待受状態、Windows Defender Firewall、Wi-Fiルーターの端末間通信制限を順番に確認します。

参考資料

この記事を書いた人

※上が私です。

奈良市を拠点に、27年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。

これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。

【制作会社・企業様向けサポート】
  • 専任エンジニアのいない企業様に対するシステム面の不安を解消
  • 柔軟な契約形態や短納期での対応により、急なニーズにも迅速にサポート
  • システムの企画段階から運用まで、ワンストップでのサービスを提供

Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。

ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。

mail ご相談・お問い合わせはこちらから 

関連記事一覧

Laravel 13をApache・XAMPPで動かす：VirtualHost・.htaccess・public_htmlの配置方法

2026.08.27

Laravel 13のプロジェクトをWindowsのXAMPP Apacheで動かすために、VirtualHostでpublicをDocumentRootに指定する方法、.htaccessでpublicへ振り分ける方法、public_htmlへpublicの中身を配置してindex.phpの参照先を変更する方法を解説します。.envやstorageなどを公開しないための注意点、Viteのビルド成果物、ApacheとLaravelのログを使ったトラブルシューティングも整理します。

.htaccess Apache Laravel PHP XAMPP

Laravel 13＋Vue.jsで登録・編集フォームを非同期化する：fetchとaxiosを比較

2026.08.26

Laravel 13のBlade画面にVue.jsを組み込み、membersテーブルのnameとemailを登録・編集するフォームを作ります。Vue.jsからLaravelのWebルートへJSONを送信し、CSRFトークン、バリデーションエラー、送信中・通信失敗の状態を扱います。リクエスト送信にはfetchとaxiosを使う方法を比較し、追加パッケージの有無やエラー処理の違いを整理します。

JavaScript Laravel PHP Vue.js

Windows 11のLaravel 13でcomposer devにMailpitを追加し、キュー化したメールを確認する

2026.08.22

Windows 11のLaravel 13開発環境で、composer.jsonのdevスクリプトにMailpit、Laravel開発サーバー、キューワーカー、Viteを登録し、composer devからまとめて起動する方法を紹介します。データベースキューへ登録したテキストメールをMailpitで確認する流れに加え、php artisan devとの違い、MailpitのSMTP・Web UI設定、SQLiteファイルをGit管理から除外する方法、起動時の切り分けも説明します。

Composer Laravel Mailpit PHP

Laravel 13でBladeの新規登録フォームを作成する：バリデーション・CSRF・入力値の再表示

2026.08.21

Laravel 13のBladeで、既存のmembersテーブルへnameとemailを登録する新規登録フォームを作成します。$request->validate()による入力値の検証、@csrfによるCSRF対策、@errorによるエラー表示、old()による入力値の再表示、登録後のリダイレクトメッセージまでを確認します。

Laravel PHP

阿部辰也へのお仕事の依頼・お問い合わせ

軽いご相談もお気軽にどうぞ！
個人情報の取り扱いについて *必須 プライバシーポリシーをご確認いただき、同意いただける場合は「同意する」にチェックをしてください。
keyboard_double_arrow_up
TOP