Xamppを使ってローカルでWebサイトの開発をしていた時に、
ローカルから複数のドメインを使用して、複数のWebサイトを同時に確認したいと思ったことはございませんか？
今回はApacheのバーチャルホスト機能を利用して、
Xamppで開発している複数のWebサイトを、
以下の複数のドメインでブラウザから表示させたいと思います！
「http://localhost」（プロジェクトAのWebサイト）
「http://localhost_dev1」（プロジェクトBのWebサイト）
「http://localhost_dev2」（プロジェクトCのWebサイト）
フォルダとindex.htmlファイルを作成しておく
以下のようにデスクトップに各Webサイトのソースを置いておきます。
「/Applications/XAMPP/xamppfiles/htdocs/localhost/index.html」
「/Applications/XAMPP/xamppfiles/htdocs/localhost_dev1/index.html」
「/Applications/XAMPP/xamppfiles/htdocs/localhost_dev2/index.html」
こんな感じ。
ブラウザで確認するため、
以下のようにそれぞれ「Hello World」が表示されるようにindex.htmlを編集しておきます。
「Hello World! from localhost :)」
「Hello World! from localhost_dev1 :)」
「Hello World! from localhost_dev2 :)」
こんな感じ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World! from localhost :)
</body>
</html>
httpd.confを編集する
Macの場合、以下に「httpd.conf」があります。
/Applications/XAMPP/xamppfiles/etc/httpd.conf
バーチャルホスト機能を使えるようにするために、以下の行をコメントアウトしてください。
# Virtual hosts
# Include etc/extra/httpd-vhosts.conf
↓
# Virtual hosts
Include etc/extra/httpd-vhosts.conf
バーチャルホスト機能が使えるようになると、
httpd.confで設定している「DocumentRoot」は無視され、
今の段階ではブラウザで「http://localhost」にアクセスしても何も表示されないと思います。
「http://localhost」でソースを表示されるためには次の手順が必要になります。
httpd-vhosts.confを編集する
Macの場合、以下に「httpd-vhosts.conf」があります。
/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf
一番後ろの行に以下を追加してください。
これで、
「ServerName」に設定した名前で、
「DocumentRoot」にアクセスすることができます。
（例: http://localhost → /Applications/XAMPP/xamppfiles/htdocs/localhost）
<VirtualHost *:80>
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/localhost"
ServerName localhost
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/localhost_dev1"
ServerName localhost_dev1
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/localhost_dev2"
ServerName localhost_dev2
</VirtualHost>
※デスクトップ配下に「DocumentRoot」を設定すると自分は以下のようなエラーが発生しました。
解決方法はあるみたいですが、今回は割愛させていただきます。
Access forbidden!
要求されたオブジェクトへのアクセス権がありません。 読み込みが許可されていないか、 サーバが読み込みに失敗したかでしょう。
サーバーの障害と思われる場合は、ウェブ管理者までご連絡ください。
最後にhostsを編集する
Macの場合、以下に「hosts」があります。
/private/etc/hosts
以下のように編集してください。
※重要なファイルなので気をつけて編集してください。
127.0.0.1 localhost
↓
127.0.0.1 localhost localhost_dev1 localhost_dev2
ちなみに以下のような編集もできるのですが、読み込みが遅くなることがあるそうなので、あまりおすすめしません。
127.0.0.1 localhost
↓
127.0.0.1 localhost
127.0.0.1 localhost_dev1
127.0.0.1 localhost_dev2
Macを再起動する
hostsを再度読み込むためにMacを再起動してください。
Apacheを再起動する
XamppのApacheを再起動してください。
ブラウザで確認してみましょう！
「http://localhost」（プロジェクトAのWebサイト）
「http://localhost_dev1」（プロジェクトBのWebサイト）
「http://localhost_dev2」（プロジェクトCのWebサイト）
以上、お疲れ様です！