Windows10にXAMPPでサーバー開発。複数のウェブサイトのテスト方法

WindowsにXAMPPをインストールすると、ウェブサイトの開発を行うことができます。

通常、ローカルサーバーはlocalhostと指定するとアクセスできます。

無効なURLです

ですね。

今回は、もっとたくさんのドメインでウェブサイトをテストする方法を紹介します。

下図のように、URLに別々のドメイン名を入れても、ローカルパソコンでウェブページを表示することができます。複数案件の開発を継続して行っている場合に、必須になります。

Windows10とXAMPP環境で複数のウェブサイトをテストする方法
動作確認
- 今までアクセスできていたページの確認
  - 追加したホスト名のアクセス
  - アクセスログの確認
まとめ

Windows10とXAMPP環境で複数のウェブサイトをテストする方法

手順1.hostsファイルの編集

まずは、hostsファイルに好きなホスト名を登録しましょう。

hostsファイルはWindowsの設定になるので、XAMPPに関係なく使えます。
IPアドレスとホスト名を対応させるファイルとなります。

また、このファイルは、大事なファイルになるため、管理者権限がないと編集することができません。

好きなエディタを使ってよいのですが、ここでは、最初からついている「メモ帳」を使います。

スタートメニューの「Windowsアクセサリ」にある「メモ帳」を右クリックし、コンテキストメニューで「その他→管理者として実行」をクリックします。

メモ帳で、「C:\Windows\System32\drivers\etc\hosts」を開きます。

メニューから「ファイル→開く」で開けます。

下図のように追加します。

	127.0.0.1    test1.test
	127.0.0.1    test2

1 2	127.0.0.1 test1.test 127.0.0.1 test2

#で始まる行はコメント行であり、設定としては意味のない行になります。

127.0.0.1 というIPアドレスはローカルコンピュータを意味して、スペース文字のあと、好きなホスト名を設定することができます。

上記の例だと、ブラウザのURL入力ボックスに、
http://test1.test
http://test2

などと打ち込むと、IPアドレス127.0.0.1のサーバー、つまりローカルコンピュータにアクセスします。XAMPPのapacheサーバーを起動していれば、ウェブページを表示することができます。

手順2. 対象フォルダとテストファイルの作成

それぞれのホスト名ごとに別のページを表示させることができますので、ホスト名ごとにフォルダを作っておきます。例えば、下記のように、

C:\xampp\htdocs\test

に、それぞれ「test1.test」、「test2」を作ってみました。

それぞれのフォルダの中に、「index.html」を作っておきます。

<html>
<head>
</head>
<body>
<p>test page. test1</p>
</body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

test1 の部分は、フォルダごとに変更しておくと良いです。

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

ホスト名ごとに違うフォルダの中身を表示させるために、XAMPPの apache の設定をします。
C:\xampp\apache\conf\extra\httpd-vhosts.conf
が該当のファイルになります。

開くと、最初はすべて # で始まっており、すべての行がコメントアウトされた状態です。

以下のように追加しましょう。
#で始まってる行は設定としては無効ですが、読む人(ほとんど自分)の為に書いておきましょう^^;

# Use name-based virtual hosting.
NameVirtualHost *:80

#for other host
<VirtualHost *:80>
    ServerName defaulthost
    DocumentRoot "C:/xampp/htdocs"
    ErrorLog "logs/default-host-error.log"
    CustomLog "logs/default-host-access.log" common
</VirtualHost>

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

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

# Use name-based virtual hosting.

NameVirtualHost *:80

#for other host

ServerName defaulthost

DocumentRoot "C:/xampp/htdocs"

ErrorLog "logs/default-host-error.log"

CustomLog "logs/default-host-access.log" common

</VirtualHost>

ServerName test1.test

DocumentRoot "C:/xampp/htdocs/test/test1.test"

ErrorLog "logs/test1-error.log"

CustomLog "logs/test1-access.log" common

</VirtualHost>

ServerName test2

DocumentRoot "C:/xampp/htdocs/test/test2"

ErrorLog "logs/test2-error.log"

CustomLog "logs/test2-access.log" common

</VirtualHost>

VirtualHostタグ内がホスト名ごとの設定

NameVirtualHost は、「ホスト名ごとにアクセス先を変える」ことを指示しています。

VirtualHost タグで囲まれた領域が、それぞれのホスト名にアクセスされたときの設定になります。

ServerName でアクセスされたホスト名、
DocumentRoot でアクセス先のフォルダ名を設定します。

また、ErrorLog、CustomLog設定で、VirtualHostごとにログを出力するファイルを変更することができます。

ログファイルは、
C:\xampp\apache\logs
の中に作成されます。

デフォルトホスト設定について

一番最初のVirtualHost タグの中が、ServerName に defaulthost と設定されています。これは、該当するVirtualHostタグがないホスト名でアクセスされたときに、先頭のVirtualHostタグの設定で応答するという機能になってるため、必要な設定になります。

ホスト名の設定は、「test1.test」、「test2」の設定しかしてないため、例えば、「http://localhost」にアクセスされたときは、先頭VirtualHostタグである「defaulthost 」の記述のある設定に沿ってアクセスされます。

VirtualHostの設定が一つもないときには、別ファイル「httpd.conf」にある全体設定に沿ってアクセスされていたため、不要でした。

追加したファイルは以下のようになります。

補足. フォルダのアクセス権設定

バーチャルホストでフォルダを c:\xampp\htdocs のサブフォルダ以外にしたい場合、追加の設定が必要となります。

例えば、バーチャルホストのデータフォルダを c:\data\tk\work にする場合、
C:\xampp\apache\conf\extra\httpd-vhosts.conf
に以下のように <Directory></Directory> タグでフォルダの設定を追加します。

<Directory "C:\data\tk\work">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>


#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#

<VirtualHost *:80>
    ServerName defaulthost
    DocumentRoot "C:\xampp\htdocs"
    ErrorLog "logs/default-error.log"
    CustomLog "logs/default-access.log" common
</VirtualHost>

<VirtualHost *:80>
    ServerName work.localhost
    DocumentRoot "C:\data\tk\work"
    ErrorLog "logs/work-error.log"
    CustomLog "logs/work-access.log" common
</VirtualHost>