XAMPPで複数のサイトのテストサーバーを作ってみました（バーチャルホスト）

仕事上、複数のサイトを管理しています。ほぼ独学でPHPを勉強して色々なページを作成しているのですが、PHPはサーバーサイド・スクリプト（webサーバー上で動作して、プログラムの実行が要求されるたびに、結果をウェブブラウザに送信するプログラム）なので、サーバーにファイルをアップロードしないと実行されているのかどうか確認できません。そこでローカルにテスト環境を構築して速やかにPHPで作ったプログラムを確認できるようにした方が仕事も捗ります。PHPの開発環境でよく使われるのは「XAMPP」という開発環境です。「XAMPP」のインストールや導入方法は色々なサイトで説明されていますので、ここでは書きません。

やりたいこと

複数のサイトのテストサーバーを別々に作成したい。例えばlocalhost、test1、test2というような別々のドメイン名でテストサーバーを作りたいということです。xamppフォルダの中のhtdocsに全部のサイトを入れてしまえば確認できないことも無いのですが、僕が作っているサイトにはサイトルート相対パスが含まれているページがあるので、htdocsの下層にサイト名のフォルダが入ってしまうと階層が異なってしまい、サイトルート相対パスで目的のファイルを参照することができなくなってしまいます。そういった理由で複数のサイトのテストサーバーを作成したいと考えました。

バーチャルホスト

XAMPPにはバーチャルホスト（VirtualHosts）という機能があります。このバーチャルホストを設定すれば複数のテストサーバーを構築できます。しかし、通常の方法でバーチャルホストを設定した時に少しやっかいだなと思う部分がありました。それはhostsファイルに修正を加えないといけないという部分です。このファイルはXAMPPのファイルではなくWindowsのファイルなので、LAN内の他のパソコンからテストサーバーを確認しようとするとそのパソコンのhostsファイルを修正しなければなりません。これがやっかいだなと感じて、他の方法は無いかと探してみたところバーチャルホストにポートを設定することによって実現できる方法があったので、この方法でやってみることにしました。

手順

3つのテストサーバーを作成してみます。
C:\xampp\htdocs\web\test1
C:\xampp\htdocs\web\test1
C:\xampp\htdocs\web\test1
上記の3つのフォルダに設定します。

httpd.confの編集

C:\XAMPP\apache\conf\httpd.conf このhttpd.confというファイルの中の

Listen 80

という部分を

Listen 8010  
Listen 8020  
Listen 8030  

といった感じでApacheが使うポートを設定します。

httpd-vhosts.confの編集

C:\xampp\apache\conf\extra\httpd-vhosts.conf このhttpd-vhosts.confというファイルの中の

##NameVirtualHost \*:80

という部分を

NameVirtualHost \*:8010  
NameVirtualHost \*:8020  
NameVirtualHost \*:8030  

といった感じでバーチャルホストのポートを設定します。 このファイルにはもう１か所設定するところがあります。

##<VirtualHost \*:80>
    ##ServerAdmin [email protected]
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

という部分を

<VirtualHost \*:8010>
    DocumentRoot "C:/xampp/htdocs/web/test1"
    ServerName localhost
</VirtualHost>

<VirtualHost \*:8020>
    DocumentRoot "C:/xampp/htdocs/web/test2"
    ServerName localhost
</VirtualHost>

<VirtualHost \*:8030>
    DocumentRoot "C:/xampp/htdocs/web/test3"
    ServerName localhost
</VirtualHost>

以上で設定は終了なので、XAMPPのコントロールパネルのApacheを再起動させます。

確認

ブラウザで
http://localhost:8010/
http://localhost:8020/
http://localhost:8030/
で別々のドメイン名を指定してサイトが開けるはずです。
またLAN内の他のパソコンからはXAMPPがインストールされている固定IP（例として192.168.1.10）の後にポート番号を
http://192.168.1.10:8010/
http://192.168.1.10:8020/
http://192.168.1.10:8030/
のように入力すれば確認できるはずです。

 

まとめてみると結構長くなりましたが、忘れないように書き留めておくことができました。