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

6874 ワード
Apache xampp Apache テキストリンク

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サイト）

以上、お疲れ様です！