WindowsにXAMPPをインストールすると、ウェブサイトの開発を行うことができます。
通常、ローカルサーバーはlocalhostと指定するとアクセスできます。
ですね。
今回は、もっとたくさんのドメインでウェブサイトをテストする方法を紹介します。
下図のように、URLに別々のドメイン名を入れても、ローカルパソコンでウェブページを表示することができます。複数案件の開発を継続して行っている場合に、必須になります。
Windows10とXAMPP環境で複数のウェブサイトをテストする方法
手順1.hostsファイルの編集
まずは、hostsファイルに好きなホスト名を登録しましょう。
hostsファイルはWindowsの設定になるので、XAMPPに関係なく使えます。
IPアドレスとホスト名を対応させるファイルとなります。
また、このファイルは、大事なファイルになるため、管理者権限がないと編集することができません。
好きなエディタを使ってよいのですが、ここでは、最初からついている「メモ帳」を使います。
スタートメニューの「Windowsアクセサリ」にある「メモ帳」を右クリックし、コンテキストメニューで「その他→管理者として実行」をクリックします。
メモ帳で、「C:\Windows\System32\drivers\etc\hosts」を開きます。
メニューから「ファイル→開く」で開けます。
下図のように追加します。
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」を作っておきます。
1 2 3 4 5 6 7 |
<html> <head> </head> <body> <p>test page. test1</p> </body> </html> |
test1 の部分は、フォルダごとに変更しておくと良いです。
手順3. バーチャルホストの設定
ホスト名ごとに違うフォルダの中身を表示させるために、XAMPPの apache の設定をします。
C:\xampp\apache\conf\extra\httpd-vhosts.conf
が該当のファイルになります。
開くと、最初はすべて # で始まっており、すべての行がコメントアウトされた状態です。
以下のように追加しましょう。
#で始まってる行は設定としては無効ですが、読む人(ほとんど自分)の為に書いておきましょう^^;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
# 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> |
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> タグでフォルダの設定を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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> |
上の設定のうち、
の設定が追加部分です。
Options はアクセスのオプションですが、 Indexes があると、ファイルが存在しないとき、フォルダの内容を表示してしまうので、なし(消しておく)の方がよいかもしれません。
c:\xampp\htdocs フォルダへのアクセス設定は、すでに
c:\xampp\apache\conf\httpd.conf
に、定義されているため、追加の必要がありません。
手順4. apacheの再起動
設定ファイルの変更・保存が終わったら、apacheを再起動しましょう。
XAMPPコントロールパネルから、ApacheのActionsにある、Stopボタン → Startボタンを押すことで再起動できます。
動作確認
今までアクセスできていたページの確認
まず、
http://localhost
にアクセスしてみましょう。
以下のように出れば、成功です。
ちなみに、
C:/xampp/htdocs/index.php
が以下のようになってるため、
http://localhost/dashboard/
にリダイレクトされています。
問題なければ、このサイトのメニューの右側からphpMyAdminや PHPInfoにもアクセスしてみてください。
追加したホスト名のアクセス
次に
http://test1.test
にアクセスしてみます。
OKですね。
http://test2
はどうでしょうか?
こちらも問題ないです。
としたときは、エラーになりました。
アクセスログの確認
以下のように、ホスト名に応じて設定したログファイルが生成されています。
test2-access.log は以下のようになっています。
まとめ
本記事では、Windows10とXAMPP を使って、複数のホスト名のサイトを開発する設定を説明しました。
私は実際にこれを使ってPHP案件のウェブ開発をしています。ぜひ使ってみましょう。
記事「Windowsにウェブ開発環境を入れよう:MySQL付きXAMPPのインストール手順」に、XAMPPのインストール方法を説明しています。合わせてご確認ください。
コメント