XAMPPでバーチャルホストを設定し、複数サイトを楽に管理しよう

XAMPPでバーチャルホストを設定し、複数サイトを楽に管理しよう

前回の記事「WordPress開発・制作環境を作る最初のステップ~XAMPPをインストールしよう」では、自分のパソコン(以下「ローカル環境」と表記)でWordPressを動かすために必要な環境をXAMPPを使用して構築する方法を解説しました。

XAMPPをインストールが完了した初期状態でも、ローカル環境でサイトを作ったり、WordPressをインストールして実行することは可能です。しかし、ローカル環境で複数のサイトを管理する場合、初期状態のままでは面倒なことが生じます。

初期状態では「http://localhost」というアドレスしか有効でないため、一度に管理できるサイトは基本的に1つです。複数のローカル・サイトを切り替えようとすると、フォルダを切り替える等の操作が必要になります。

この記事で解説している「バーチャルホスト」の設定を行うと、複数サイトのそれぞれに専用のURLが設定できるので、管理がとても楽にできるようになります。

例えば、

  • http://site1.localhost
  • http://site2.localhost
  • http://site3.localhost

といった感じで、ローカル環境での管理サイトをどんどん増やしていくことが可能になります。サイトごとに設定したURLで即アクセスが可能になるわけです。

ローカル環境で複数のサイトやブログを管理する場合、この記事で解説しているバーチャルホストの設定を是非、行いましょう。

環境メモ

バーチャルホストの設定は、ウェブ・サーバーのソフトウェアである「Apache」の設定ファイルを操作します。そのため、Apacheのバージョンによって、設定の記述方法が多少異なるケースがあります。

この記事で使用しているApacheのバージョンは「2.4.41」です。

(参考)XAMPPでインストールしたApacheのバージョンの調べ方

XAMPPコントロールパネルの右側にある「Shell」をクリックします。

XAMPPコントロールパネルから「Shell」をクリック

シェルが起動しますので「httpd -v」と入力し「Enter」キーを押下すると、Apacheのバージョンが表示されます。

httpd -v

はじめに~用語「ドキュメントルート」について

バーチャルホストの設定を始める前に「ドキュメントルート」という用語について、ちょっと解説します。

ドキュメントルートとは、ドメインに紐づけられた、ローカル・フォルダです。

例えば、XAMPPの初期状態でのドメイン「localhost」のドキュメントルートは「c:\xampp/htdocs」です。

ブラウザから「http://localhost」でアクセスすると、「c:\xampp/htdocs」に設置した「index.html」や「index.php」が表示されます。

設定するドメインとドキュメントルート

この記事では、ローカル環境にドメイン「test.localhost」を追加し、ブラウザから「http://test.localhost」でアクセスできるようにします。

エクスプローラーで、以下のフォルダを作成しておいてください。

  • c:\www
  • c:\www/test/
  • c:\www/test/htdocs
  • c:\www/test/log

「c:\www/test/htdocs」が「test.localhost」のドキュメントルートになります。

「c:\www/test/log」には、Apacheのアクセスログが出力されるように設定していきます。

バーチャルホストが有効になっているかチェックする

Apacheのバージョンによっては、初期状態ではバーチャルホストが無効になっている場合があります。

念のため、次の手順でバーチャルホストが有効な設定になっているか確認します。ちなみに、私の「バージョン 2.4.41」では、初期状態で有効でした。

次のファイルを、エディタで開きます。

c:\xampp/apache/conf/httpd.conf
httpd.conf

バーチャルホストの設定がコメントアウトされていないことを確認します。次のキャプチャのようになっていたらOKです。
もし先頭に「#」が付いていたら、削除してください。

バーチャルホストが有効か確認

バーチャルホストの設定をする

次のファイルを、エディタで開きます。

c:\xampp/apache/conf/extra/httpd-vhosts.conf
バーチャルホストの設定ファイル

「NameVirtualHost *:80」の先頭にある「##」を削除します。

NameVirtualHost

以下の設定を追加してください。

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

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

設定の解説をちょっとします。

最初の、

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

は、「c:\www」全体に対し、アクセス制限を解除する設定です。この設定をしておかないと、ブラウザからアクセスしたときに「access forbidden(403エラー) 」になります。
ちなみに「c:\www」全体が対象というのは、かなり乱暴な設定で、公開サーバー上では禁物です。ローカル環境なので、こんな設定にしています。

次の、

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

この設定が、バーチャルホストの設定です。ドメイン名に「test.localhost」を設定、ドキュメントルートに「C:/www/test/htdocs」を設定しています。

バーチャルホストの設定はこれで終了です。保存してください。

設定確認

バーチャルホストの設定が終わったら、次の設定に進む前に、一度確認することをオススメします。

この状態では、まだ、ブラウザからの確認はできません。

XAMPPのコントロールパネルで、「Apache」を一度「STOP」し、再度「START」してください。
もし、エラー無く「STOP」と「START」ができたら、バーチャルホストの設定は正しくできています。
バーチャルホストの設定にミスがあると、エラーが発生します。

バーチャルホストの設定確認

「hosts」ファイルの設定をする

Windowsの「hosts」ファイルの設定を行います。

「hosts」ファイルは、ドメインとIPアドレスを紐づけるファイルです。
ここでは詳しい解説は省きますが、ローカル環境で運用するウェブサイトでは、「hosts」ファイルの設定が必ず必要です。

「hosts」ファイルの場所は、

c:\windows/system32/drivers/etc/hosts

です。

hostsファイルの場所
デスクトップなどにコピーして編集する

「hosts」ファイルは、ユーザー権限の問題で、そのまま編集せずに「デスクトップ」などにコピーして編集を行うことをオススメします。
編集が終わったら、元のフォルダに上書き保存してください。

hostsファイルは、デスクトップなどにコピーして編集

「hosts」ファイルに、以下の記述を追加してください。

127.0.0.1   test.localhost
hostsファイルの修正
デスクトップなどにコピーして編集する(2)

編集が終わったら、元のフォルダに上書き保存してください。その際に以下のようなダイアログが表示されたら、「続行」をクリックします。

hostsファイルを元のフォルダにコピー

テスト用HTMLファイルを用意

シンプルなテスト用HTMLファイルを用意し、「index.html」というファイル名で「test.localhost」のドキュメントルートである「C:/www/test/htdocs」に設置してください。

シンプルなテスト用HTMLファイルを用意

一連の設定は、これで終了です。次に動作テストを行います。

「Apache」を再起動し、ブラウザからテスト

XAMPPのコントロールパネルで、「Apache」を一度「STOP」し、再度「START」してください。
もし、上記「設定確認」を行っているなら、Apacheの再起動は行われているので、ここで改めて行う必要はありません。

Apacheの再起動

ブラウザで以下のURLにアクセスし、上記「テスト用HTML」の内容が表示されればOKです。

http://test.localhost
ブラウザから動作テスト
これで設定完了です

これでバーチャルホストの設定は完了です。
ローカル環境で管理するウェブサイトを増やしたいときは、バーチャルホストを使って増やしていくと、随時アクセスできるのでとても便利です。

おまけ

この記事で解説した設定だけだと、「localhost」へのアクセスが「test.localhost」に向いてしまうので、バーチャルホストに以下の設定も追加しておくことをオススメします。

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