本記事は執筆時点(2024年04月12日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
XAMPPのサイトは別のPCやスマホから見れる?
XAMPPで制作中のサイトをスマホでデバッグしたり、社内で共有できたら便利ですよね?
先入観とは怖いもので今までレンタルサーバーにアップロードするまで実機によるレスポンシブ化などのサイトのチェックは行えないと思い込んでいたのですが、実は驚くほど簡単にローカルサーバーのサイトに別のデバイスからアクセスすることができたのです。
同一LAN内(同じWifi環境下)であれば各デバイスのブラウザでURLにIPアドレスを打ち込むだけでPCのXAMPPにあるサイトへアクセスすることが可能です。
検証環境 | Window10 | XAMPP 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フォルダまでのパスを正しく設定し直す必要があります。
localhostを先ほどのIPアドレスに書き換えます。
万が一IPアドレスが変わると、WordPressの管理画面にアクセスできなくなりURLも書き直せず手詰まりとなる恐れがありますが、phpMyAdminが開ければデータベースのoptions.phpからもURLは再設定できます。
未解決の課題【SSL化】
XAMPPの方でSSL化設定を行っても各デバイスに証明書をインストールできないため、どうしても非SSL(http)でのアクセスになってしまうという問題がいまだに解決できていません。
デバッグに使うだけなら良いのですが、XAMPPを利用してPHPのアプリケーションをローカルで運用するとなると、最初に警告画面が出たり、「保護されていない」と表示されるのは好ましくありません。
まとめ
以上がXAMPP(ローカルサーバー)で制作しているのサイトを別のPCやスマホで開く方法です。
SSL化などまだ未解決の課題はあるものの、社内での共有やスマホでのデバッグなどには十分活用できると思いますので知らなかった方は是非試しみてください。