アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信！

XAMPPで別のPCからアクセスする方法＆ハマりがちなトラブル

   

Webサイト制作をしている人の大半が導入しているであろうXAMPPですが、少し設定に手間取った部分があったので共有したいと思います。

XAMPP上で動作しているWebサイトは、同じローカルネットワーク上にあるパソコンやスマートフォンからアクセスすることが可能です。

これを上手く活用することでローカル環境でも様々なデバイスで動作検証すること可能なので、まだ導入していない人はこの記事を参考に試してみてください(‘ω’)ノ

XAMPPで別のPCからアクセスする方法

XAMPPで別のPCからアクセスする手順は下記のとおりです。

1. コマンドプロンプトのipconfigでホストPCのローカルIPを確認しておく

コマンドプロンプトを起動して『ipconfig』と入力すると、ネットワーク情報が表示されます。

その中に【IPv4 アドレス】という項目があるので、その IPアドレスをコピーして控えておきます。

2. httpd-vhosts.conf を編集する

次に httpd-vhosts.conf を編集します。
このファイルはXAMPPディレクトリ内にあります。デフォルトだと下記に入っているかと思います。

C:\xampp\apache\conf\extra\httpd-vhosts.conf

このファイルをテキストエディタで開いて下記のように入力します。テキストの末尾に追加する形でOKです。

<VirtualHost *:80 192.168.100.32>
DocumentRoot "C:\xampp\htdocs\sample_site"
ServerName sample_site.local
</VirtualHost>

192.168.100.32 の部分はコマンドプロンプトでコピーしたIPアドレスを指定します。

DocumentRoot はあなたのサイトが置かれているディレクトリを指定します。

ServerName は任意の内容で良いですが、個人的には本番サイトが sample_site.com の場合は sample_site.local とすることが多いです。

3. xamppのコンパネからApacheを再起動

httpd-vhosts.conf の編集が終わったら、xamppコントロールパネルでApacheを再起動します。

これで設定したローカルIPで他のPC・スマートフォンから、XAMPP上のサイトにアクセスが出来るようになります。

4. 必要に応じてhostsファイルを編集

これは必須ではありませんが、hosts設定することで「http://sample_site.local」といった文字列でサイトにアクセス出来るようになります。

hostsファイルの場所は下記の通りです。

Windowsのhostsの場所

C:\Windows\System32\drivers\etc\hosts

Macのhostsの場所

/private/etc/hosts

hostsに記述する内容

hostsに記述する内容は下記のとおりです。

192.168.100.32 sample_site.local

別のPCではなく、サイトが設置されているPC自身でアクセスする場合は下記の記述でもOKです。

127.0.0.1 sample_site.local

これで「http://sample_site.local」とブラウザのアドレスバーに入力するだけでサイトにアクセスできます。

ハマりがちなトラブルと追加設定

XAMPPやローカルIPとは別に設定が必要になる場合があります。

私はこれにハマって時間を無駄にしました…( ;∀;)

Windowsはネットファイルプロファイルを設定する必要がある

Windowsを使っている場合『ネットファイルプロファイル』を【プライベート】にする必要があります。

詳しい手順は下記のとおりです（赤枠の部分をクリックしていってください）。

これで完了です。

要するにXAMPPを設定しただけでは、ローカルネットワーク上には公開されないということです（間違いやすいですが、パブリックではなくプライベートがネットワーク上に公開される設定になります）。

WordPressサイトの場合はパスに注意

一般的なサイトでは以上の設定で問題なく動作するかと思いますが、Wordpressサイトではうまく動かない可能性があります。

その原因はパスです。

一般的なサイトは相対パスで動作しますが、WordPressサイトは絶対URL（http://から始まる形式）が記述されます。

ここで想定されるトラブルが、XAMPPのデフォルトである 127.0.0.1 でWordpressサイトを動かしている場合で、これだと別のPCでは正しく動作しなくなるということです（127.0.0.1 というローカルIPは自分自身を指すので、他のPCからはアクセス出来ない為）。

なので、他のPCからアクセスする場合を想定して、127.0.0.1 という形式にはしないことが大切です。

AndroidやiPhoneではhostsの設定が出来ない（と思う）

説明した通り、hosts設定することで「http://sample_site.local」という形式でアクセス出来るようになります。

さらに下記のようにすると、1つのローカルIPで複数のサイトを管理できるようになります。

192.168.100.32 sample_site.local
192.168.100.32 sample_site2.local
192.168.100.32 sample_site3.local

非常に便利ですが、実はAndroidやiPhoneではhostsが設定できないみたいなんですよね…( ;∀;)

なので、私はホストPC以外ではhostsを使うのは諦めて、その都度 httpd-vhosts.conf の DocumentRoot と ServerNameを書き換えて、他のPC・スマートフォンで動作確認をしています。

何はともあれローカルで動作確認出来るのは便利

というわけでXAMPP上のサイトを他のPCで表示する方法を解説しました。

スマートフォンでの動作確認が若干不便ではあるものの、工夫をすればローカルでも十分検証できて、実用性も高く、時間短縮が可能です。

とても便利なので、ぜひ皆さんも試してみてください(‘ω’)ノ

 - Web制作テクニック