• HOME > 
  • PHP > 
  • XAMPPのサイトを別のPCやスマホで開く方法【同一LAN内...

XAMPPのサイトを別のPCやスマホで開く方法【同一LAN内からアクセス】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

XAMPPのサイトは別のPCやスマホから見れる?

XAMPPで制作中のサイトをスマホでデバッグしたり、社内で共有できたら便利ですよね?

先入観とは怖いもので今までレンタルサーバーにアップロードするまで実機によるレスポンシブ化などのサイトのチェックは行えないと思い込んでいたのですが、実は驚くほど簡単にローカルサーバーのサイトに別のデバイスからアクセスすることができたのです。

同一LAN内(同じWifi環境下)であれば各デバイスのブラウザでURLにIPアドレスを打ち込むだけでPCのXAMPPにあるサイトへアクセスすることが可能です。

検証環境Window10XAMPP for Windows 8.2.4

XAMPPを使ってローカル環境にWordPressをインストールする方法について詳しくはこちらのページをご覧ください。

IPアドレスを確認する

まずは別のデバイスからアクセスするために、XAMPPを入れているPCのIPアドレスを調べます。

現在のPCのIPアドレスはコマンドプロンプトで以下のコマンドを入力すると確認できます。

ipconfig

WindowsのIP構成が表示されるので「IPv4」に書かれている数字(XXX.XXX.XX.XXX)を控えておきます。

同一LAN内のデバイスのブラウザからアクセスする

IPアドレスがわかったら、同じLANに繋がっているスマホや別のPCなどのデバイスのブラウザのURLに「http://IPアドレス」を入力すればOKです(IPv4が123.456.78.910だったらhttp://123.456.78.910)。※XAMPPの方はコントロールパネルでApacheとMySQLを起動させておく。

ブラウザにXAMPPのダッシュボードが表示されれば成功です。

XAMPPのhtdocs以下に複数のWordPressがインストールされている場合は、「http://IPアドレス/ディレクトリ名」という形で各サイトにアクセスすることができます。

うまくアクセスできないときは…

基本的にはアクセスするだけであれば特に設定の変更は必要ないはずですが(IPアドレスではなく任意のドメインに置き換える場合は設定を修正する必要あり)、もしうまくアクセスできない場合はWindowsのネットワーク設定に問題がある可能性が高いです。

Windowsのネットワーク設定を変更する

今回ご紹介した方法は、XAMPPをインストールしてあるPC自体が別PCからのアクセスを許可していることが前提になりますので、以下の手順でWindowsの設定を確認してみてください。

スタートメニューからWindowsの設定を開き、「ネットワークとインターネット」をクリックします。

ネットワークとインターネット

イーサネットを開きます。

イーサネット

接続済みのネットワークをクリックします。

接続済のネットワーク

ネットワークプロファイルを「プライベート」にします。

ネットワークプロファイル

WordPressサイトがうまく表示されない場合

IPアドレスを打ち込んでアクセスはできたもののWordPressサイトの表示がおかしいという場合は、WordPressのURL設定に問題がある可能性が高いです。

通常XAMPPでWordPressサイトを構築しているとURL設定は「http://localhost/XXX」となっているはずです。

WordPressのサイトURL設定

別のデバイスから見れるようにする場合はWordPressフォルダまでのパスを正しく設定し直す必要があります。

localhostを先ほどのIPアドレスに書き換えます。

WordPressのサイトURL設定

万が一IPアドレスが変わると、WordPressの管理画面にアクセスできなくなりURLも書き直せず手詰まりとなる恐れがありますが、phpMyAdminが開ければデータベースのoptions.phpからもURLは再設定できます。

未解決の課題【SSL化】

XAMPPの方でSSL化設定を行っても各デバイスに証明書をインストールできないため、どうしても非SSL(http)でのアクセスになってしまうという問題がいまだに解決できていません。

デバッグに使うだけなら良いのですが、XAMPPを利用してPHPのアプリケーションをローカルで運用するとなると、最初に警告画面が出たり、「保護されていない」と表示されるのは好ましくありません。

まとめ

以上がXAMPP(ローカルサーバー)で制作しているのサイトを別のPCやスマホで開く方法です。

SSL化などまだ未解決の課題はあるものの、社内での共有やスマホでのデバッグなどには十分活用できると思いますので知らなかった方は是非試しみてください。

関連する記事

サムネイル

XAMPPでSSLを有効にする方法【httpsでアクセスでき……

2024年04月12日
XAMPPをSSL化してhttpsでアクセスできるようにするには、設定ファイルの変更と証明書の作成が必要です。
サムネイル

XAMPPでPHPのOPcacheの有効化を検証【備忘録】

2024年02月01日
XAMPPでOPcacheの有効化を行ってみたので、その時の手順を備忘録として残しておきます。「OPcache」は、PHPの初回実行時のキャッシュを2回目以降のアクセス時に利用することで、CPU負荷を軽減したり、PHPの高速化を実現するものです。
サムネイル

Laravelのプロジェクトでファビコンを設定する【favi……

2023年11月21日
Laravelのプロジェクトにおいても同様にHTMLのlinkタグを使用してWebサイトにファビコンを設定します。あらかじめLaravelプロジェクト内のディレクトリにアップロードしたファビコンデータをlinkタグのパスをhref属性に設定すればファビコンが表示されます。
サムネイル

Laravel Breezeでログイン認証機能を実装する手順……

2023年08月08日
Laravel BreezeはLaravelのプロジェクトにログイン認証機能を実装することができるパッケージです。登録・ログイン・メール認証・パスワードリセット・登録内容の変更といった一通りの機能がコマンドだけで簡単に導入できます。
サムネイル

Laravelをインストールして開発環境構築する手順【Win……

2023年08月08日
LaravelはPHPのフレームワークの中でも特に人気のあるものの一つです。今回はWindowsPC(ローカル環境)にLaravelをインストールして開発環境を構築する手順を解説します。
サムネイル

【PHP】Composerをインストールする方法(Windo……

2023年03月15日
Composerとは? Composer(コンポーザー)とは、PHPのパッケージ(ライブラリ)依存管理ツールです。 PHPによる開発に必要なフレームワークやパッ […]