技術資料

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 Pintの使い方：PHPコードの書式を整えてCIで検査する

2026.09.15

Laravel Pintを使ってPHPコードの書式を整える方法を紹介します。ローカルでの自動修正、CIで書式違反だけを検査する--test、対象範囲の指定、pint.jsonの設定、Bladeファイルを扱う際の注意点を整理し、Pintを導入する判断基準も説明します。

CI/CD Laravel PHP

GitHub ActionsでPHP・LaravelのCIを始める：テスト・Lint・ビルドを自動化するWorkflowの基本

2026.09.13

PHP・Laravelプロジェクトを対象に、GitHub ActionsのWorkflow、イベント、ジョブ、ステップの基本を説明します。Composerのテスト、npm ci、フロントエンドビルド、Laravel PintをCIへ組み込む方法に加え、featureブランチやPull Requestで実行される条件、失敗時のログ確認、Secrets・権限・Actionのバージョン管理についても整理します。

CI/CD GitHub Laravel PHP

Laravel 13でArtisanコマンドを作成する：引数・オプション・dry-runの基本

2026.09.10

Laravel 13でArtisanコマンドを作成する方法を、引数・オプション・コンソール出力・終了コードの基本から解説します。日時指定した記事を定期的に公開するDB更新処理を例に、--dry-runで対象を確認してから安全に実行する方法や、スケジューラー・cronでの定期実行についても紹介します。

Laravel PHP

LaravelのFeature Testで開発用DBを初期化してしまった：Codex運用で学ぶテストDBの多層防御

2026.09.07

CodexにLaravelのFeature Test実行を依頼した際、テスト用DBではなくローカルの開発用DBへ接続した状態でRefreshDatabaseが実行され、データが失われる事故が発生しました。この記事では、PHPUnitのforce="true"による環境変数固定、DB_URLの無効化、config:clearのComposer Script化、Laravel起動後のDB接続先ガード、通常テストとIntegration Testの分離など、テストDBの誤接続を防ぐ多層防御を紹介します。

Codex Laravel PHP

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

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