Kinchan's Blog

Nov 10th, 2016 - About XAMPP - Written by

XAMPP バーチャルホスト設定 -Mac-

xamppロゴ

今回は、XAMPP for Mac でのバーチャルホスト設定についてわかり易く手順を記載して行きたいと思います。

WindowsでもMacでもXAMPPを使用してローカル環境でphpファイルなどを動かす場合には、htdocsと言うフォルダの中にプロジェクトを作らなければなりません。

趣味で使う範囲であったり、仕事でもローカル環境であまりテストをすることがないのであれば、htdocsフォルダだけで、困ることも無いと思いますが、htdocsフォルダの中にはXAMPPのダッシュボード(Apache起動させて、ブラウザにhttp://localhost/と打ち込むと表示される画面)表示用のフォルダなどが入っていて、少々ごちゃごちゃしていたり、複数のサイトをローカルで管理/テストしたりしているとドキュメントルートがhtdocs1つしか無いと、不便に感じたりするモノです。

特にルート相対パス(ファイルパスが「/images/◯◯◯.jpg」のようにスラッシュから始まるパス)で作られているサイトをテストする時などは、ドキュメントルートがいくつかあったほうが便利なモノです。

１．httpd.conf ファイルの編集

ローカル環境：iMac OS X El Capitan(10.11.6)
　　　　　　　XAMPP 7.0.4

httpd.confファイルを開きます。

Applications/XAMPP/xamppfiles/etc/httpd.conf

487行目辺りに

# Virtual hosts
#Include etc/extra/httpd-vhosts.conf

とありますので、

# Virtual hosts
Include etc/extra/httpd-vhosts.conf

と言った感じに、先頭の#を消して上書き保存してください。

２．httpd-vhosts.conf ファイルの編集

httpd-vhosts.confファイルを開きます。

Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

とりあえず、そこに記載されているコード、全ての行の頭に#を付けてあげてください。
大体の先頭には最初から#は付いていると思います。

次に下の方に、

<VirtualHost *:80>
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
ServerName localhost
</VirtualHost>

を書き足します。(コピペで良いです。)
これは、今まで通りhttp://localhost/にアクセスした時にDashboardが表示されるようにする為の設定です。

次に、

<VirtualHost *:80>
DocumentRoot "/Users/◯◯◯(自分のユーザー名)/root_folder"
ServerName root_folder
</VirtualHost>

と書き足します。(中身は書き換えて下さい。)
これが新しいドキュメントルートになるフォルダの設定になります。
この設定では、ユーザーフォルダ(Finder開いて左側、よく使う項目の家のアイコンが表示されているフォルダ)の中にroot_folderと言うフォルダを作り、そこをドキュメントルートとする場合の設定です。
ServerNameも好きに決めて良いのですが、フォルダ名と同じしておいた方がわかりやすいと思います。
※デスクトップ上に制作したフォルダだと上手く行きません。

３．hosts ファイルの編集

hostsファイルを開きます。

これはXAMPPフォルダの中ではなく、Macのシステムファイルの中にあります。
/private/etc にあるのですが、隠しファイルとなっていますので、 Finderを起動させた後、「command」+「shift」+「G」を押し、検索窓が出たら、「/etc/」と打ち込みましょう。
その中にhostsファイルはあります。

hostsファイルを開いたら下部に、

127.0.0.1   root_folder

と、２．のhttpd-vhosts.confファイルの編集の際に決めたServerNameを書き込んで上書き保存。
ここではシステムファイルの変更になるので、パスワードを求められます。

これで「root_folderフォルダ」の中に、index.phpやら、index.htmlファイルを入れて、XAMPPを、Apacheを起動させていつも使用してるブラウザのアドレスバーにhttp://root_folder/と打ち込めば、ファイルの中身が表示されるはずです。

４．403エラーになる

上記の手順で設定したが、Access forbidden!と403エラーが出てしまう。
これはアクセス権が与えられていないので、起きてしまうエラーです。

２．httpd-vhosts.conf ファイルの編集に戻って、

<VirtualHost *:80>
DocumentRoot "/Users/◯◯◯(自分のユーザー名)/root_folder"
ServerName root_folder
</VirtualHost>

の下に、

<Directory "/Users/◯◯◯(自分のユーザー名)/root_folder">
AllowOverride All
Require all granted
</Directory>

と追加して上書き保存してください。

これをしたのち、XAMPPを再起動させて再びhttp://root_folder/にアクセスしてみてください。
無事に表示されるはずです。

Categories: XAMPP