XAMPPでバーチャルホスト – 複数のドキュメントルートで複数サイトの管理を楽にする

当ページのリンクには広告が含まれています。

XAMPPで複数のウェブサイトやシステムを扱おうとした場合に問題になるのが、「通常、ドキュメントルートは一つしか設定できない」ことです。そんなときは「バーチャルホスト」機能を使用することをオススメします。この記事では、XAMPPでバーチャルホストを設定する方法を解説します。

この記事の実行環境
  • Windows11 Home (23H2)
  • XAMPP 8.2.12
  • テキストエディタ : VSCode
目次

バーチャルホストで出来ること

例えば、1つのXAMPPで、

  • http://localhost
  • http://test1.localhost
  • http://test2.localhost

という複数のウェブサイトを管理したい、とします。この場合、バーチャルホストの設定をすることで、

  • “http://localhost”のドキュメントルートは「C:¥www¥localhost¥htdocs」
  • “http://test1.localhost”のドキュメントルートは「C:¥www¥test1¥htdocs」
  • “http://test2.localhost”のドキュメントルートは「C:¥www¥test2¥htdocs」

という感じで、管理したいサイト毎に、ドキュメントルートを設定できるようになります。つまり、1つのXAMPPで、複数のドキュメントルートを同時に設定できるイメージです。

バーチャルホストの設定後は、

  • ブラウザから”http://localhost”にアクセスしたら、「C:¥www¥localhost¥htdocs」が表示される。
  • ブラウザから”http://test1.localhost”にアクセスしたら、「C:¥www¥test1¥htdocs」が表示される。
  • ブラウザから”http://test2.localhost”にアクセスしたら、「C:¥www¥test2¥htdocs」が表示される。

という感じで、複数のサイトを同時に管理できるようになります。バーチャルホストの数に制限はありませんし、ドキュメントルートのフォルダをどこに設定するかも自由です。

設定手順の解説前に前提の話し

これからXAMPPでバーチャルホストを設定する手順を解説していきますが、その前に、解説の前提となる条件のお話しを簡単にします。

設定するバーチャルホストは、

  • http://localhost
  • http://test1.localhost
  • http://test2.localhost

の3つとします。

XAMPPのバージョンは、この記事の執筆時点で最新版の「8.2.12(PHP 8.2.12)」を使用していますが、基本的に、どのバージョンのXAMPPでも同じ手順で可能です。

バーチャルホストの設定手順

それでは、設定を行っていきましょう。

サイトのフォルダを作成する

今回作成する、

  • http://localhost
  • http://test1.localhost
  • http://test2.localhost

上記3サイトのフォルダを作成します。

まず、Cドライブの直下に「www」というフォルダを作成します。

Cドライブの直下に「www」というフォルダを作成
Cドライブの直下に「www」というフォルダを作成

次に「www」の下に「localhost」「test1」「test2」の3つのフォルダを作ります。

「www」の下に「localhost」「test1」「test2」の3つのフォルダを作成
「www」の下に「localhost」「test1」「test2」の3つのフォルダを作成

作成した3つのフォルダそれぞれの下に、「htdocs」というフォルダと「log」というフォルダを作ります。

作成した3つのフォルダそれぞれの下に、「htdocs」というフォルダと「log」というフォルダを作成
作成した3つのフォルダそれぞれの下に、「htdocs」というフォルダと「log」というフォルダを作成

フォルダの作成は以上です。「htdocs」というフォルダが、各サイトのドキュメントルートになります。「log」というフォルダは、各サイトについて「Apache」が出力するログ、エラーログを格納するフォルダになります。

バーチャルホストの設定ファイルを編集

バーチャルホストの設定を行う「設定ファイル」は、デフォルトで「C:¥xampp¥apache¥conf¥extra¥httpd-vhosts.conf」です。

バーチャルホストの設定ファイル
バーチャルホストの設定ファイル

このファイルをテキスト・エディタで開いてください。

権原設定の記述を追加

“httpd-vhosts.conf”に、次の記述を追加してください。

<Directory "c:/www">
    AllowOverride All
    Require all granted
</Directory>

この記述は、先ほど作成した「C:¥www」以下のフォルダについて、すべてのアクセスを許可する設定です。この設定は、バーチャルホストの数にかかわらず、1回だけ記述を追加すればOKです。

この権限設定は、いささか乱暴です。ネットに公開されているウェブ・サーバーでは、こんな乱暴な権限設定は行ってはいけません(もっと細かく設定しなければならない)。今回はパソコン上の設定なので、これで良しとします。

“http://localhost”のバーチャルホスト設定を追加

上で追加した権原設定の下に、”http://localhost”のバーチャルホスト設定を追加します。

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "c:/www/localhost/htdocs"
    ErrorLog "c:/www/localhost/log/error.log"
    CustomLog "c:/www/localhost/log/access.log" common
</VirtualHost>

“http://test1.localhost”のバーチャルホスト設定を追加

次に、”http://test1.localhost”のバーチャルホスト設定を追加します。

<VirtualHost *:80>
    ServerName test1.localhost
    DocumentRoot "c:/www/test1/htdocs"
    ErrorLog "c:/www/test1/log/error.log"
    CustomLog "c:/www/test1/log/access.log" common
</VirtualHost>

“http://test2.localhost”のバーチャルホスト設定を追加

次に、”http://test2.localhost”のバーチャルホスト設定を追加します。

<VirtualHost *:80>
    ServerName test2.localhost
    DocumentRoot "c:/www/test2/htdocs"
    ErrorLog "c:/www/test2/log/error.log"
    CustomLog "c:/www/test2/log/access.log" common
</VirtualHost>

“httpd-vhosts.conf”の設定は以上で完了です。追加した部分の全体のイメージは、次のスクリーンショットのようになっているハズです。

追加した設定の全体のイメージ
追加した設定の全体イメージ

“httpd-vhosts.conf”を保存してください。

“hosts”ファイルを編集

設定は、これが最後です。Windowsの”hosts”ファイルに、バーチャルホストの設定を追加します。テキスト・エディタで”hosts”ファイルを開き、以下の記述を追加してください。

Windowsの"hosts"ファイル
Windowsの”hosts”ファイル
127.0.0.1 test1.localhost
127.0.0.1 test2.localhost

“localhost”の設定は、追加する必要はありません。

次のスクリーンショットは、追加後のイメージです。

記述追加後のイメージ
記述追加後のイメージ

動作確認

それでは、バーチャルホストの設定がちゃんとできたか、テストをしていきましょう。

Apacheの起動・再起動

XAMPPのApacheを起動してください。起動中の場合は再起動(一度”Stop”し、”Start”)してください。MySQLは停止していても構いません。

各バーチャルホストに、テスト用ページを追加

追加した各サイトのドキュメントルートに、テスト表示用のページを追加します。例えば、以下のようなテストページです。

■ “http://localhost”用

以下を「C:¥www¥localhost¥htdocs¥index.php」として保存します。

<?php
echo 'localhostのバーチャルホスト';

■ “http://test1.localhost”用

以下を「C:¥www¥test1¥htdocs¥index.php」として保存します。

<?php
echo 'test1.localhostのバーチャルホスト';

■ “http://test2.localhost”用

以下を「C:¥www¥test2¥htdocs¥index.php」として保存します。

<?php
echo 'test2.localhostのバーチャルホスト';

ブラウザでアクセスしてみる

各バーチャルホストに、ブラウザでアクセスしてみます。

“http://localhost”にアクセス

"http://localhost"にアクセス
“http://localhost”にアクセス

“http://test1.localhost”にアクセス

"http://test1.localhost"にアクセス
“http://test1.localhost”にアクセス

“http://test2.localhost”にアクセス

"http://test2.localhost"にアクセス
“http://test2.localhost”にアクセス

各バーチャルホストとも、設置したテスト用ページが表示されましたので、OKです。

これで、XAMPPでバーチャルホストを設定することができました。このように、バーチャルホストを使用することで、複数のサイトを同時に管理することができます。そのようなニーズがある場合は、是非、使ってみてください。

参考・補足

“phpMyAdmin”の使用について

バーチャルホストを設定しても、”http://localhost/phpmyadmin/”にアクセスすれば、”phpMyAdmin”を使用できます。

Apacheのログの出力について

上記のバーチャルホスト設定では、各バーチャルホスト毎に、Apacheのログを出力するようにしています。たとえば、”http://test1.localhost”のログは、「C:¥www¥test1¥log」下に出力されています。

"http://test1.localhost"のログフォルダ
“http://test1.localhost”のログフォルダ

“httpd.conf”と設定が競合した場合の優先はどっち?

別の記事「XAMPPのドキュメントルートを変更してみよう」では、”httpd.conf”を使用したドキュメントルートの変更方法を紹介しています。

では、もし、”http://localhost”のドキュメントルートについて、”httpd.conf”と”httpd-vhosts.conf”で、別の場所を指定していたら、どうなるでしょうか?

例えば、

  • “httpd.conf”の設定 …「C:¥www¥aaa¥htdocs¥」
  • “httpd-vhosts.conf”の設定 …「C:¥www¥bbb¥htdocs¥」

などと設定した場合です。この場合は、バーチャルホストの設定が優先されます。つまり、ブラウザからアクセスすると、「C:¥www¥bbb¥htdocs¥」の内容が表示されます。

よかったらシェアしてね!
  • URLをコピーしました!
目次