【備忘録】Xamppで複数のドメインを作成

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」

こんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/c4fd7fb0-4510-0e1c-4a58-11a600aa5315.png)

ブラウザで確認するため、
以下のようにそれぞれ「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サイト）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/0c6f5765-c181-f7f8-44ca-52ec4b54fb7c.png)

「http://localhost_dev1」（プロジェクトBのWebサイト）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/39b9eeab-8eb6-f52b-ca7e-ea194dc48089.png)

「http://localhost_dev2」（プロジェクトCのWebサイト）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/bf2f0dc7-88e8-3906-d0d5-6336949b7825.png)

以上、お疲れ様です！