MacのXAMPPでバーチャルホストを設定する方法

前に書いた「SS | MacでXAMPPを入れたらやるべきローカルホストのセキュリティ設定」の続きです。

MacでXAMPPを入れた際にやっておいた方が良いかもしれないセキュリティの設定が終わったら、次はバーチャルホストの設定を行いましょう。

バーチャルホストとは

入れ立てのXAMPPでは、ドキュメントルートに設定されているフォルダが1つだけ(/Applications/XAMPP/htdocs/)なので、これじゃあ不便ですよね。いつまでも http://localhost/ 配下にディレクトリを追加したくないですよね。プロジェクトによってはドキュメントルートからにしないといけないこともおおいですよね。なので、ここらでよいっとやっちゃいましょう。

やること

• httpd.confの編集
• httpd-vhosts.confの編集
• hostsの編集

httpd.confの編集

まずはApacheの設定ファイルを編集します。XAMPPのApacheは初期設定ではバーチャルホストを許可していません。さ、許可しましょ。

/Application/XAMPP/etc/httpd.conf を開いて、460行目あたりの下記文言先頭にある「#」を外します

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

これを

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

こうします

これでバーチャルホストの設定ファイルを読み込むようになりました。

httpd-vhosts.confの編集

次は、さきほどのhttpd.confで読み込むように設定したバーチャルホストのファイルを編集します。

注意点としては、バーチャルホストを有効化したら今まで設定していた「http://localhost/」の設定ももう一度やり直さないと行けません。頑張って！

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

このファイルを編集します。

元々このファイルに書かれている下の部分はサンプルなので消すなりコメントアウト(全部の行頭に「#」を追加)するなりお好きなように。でもサンプルだしコメントアウトしておけば良いんじゃないかと思いますよ。

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

これをコメントアウト

# <VirtualHost *:80>
#     ServerAdmin webmaster@dummy-host.example.com
#     DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
#     ServerName dummy-host.example.com
#     ServerAlias www.dummy-host.example.com
#     ErrorLog "logs/dummy-host.example.com-error_log"
#     CustomLog "logs/dummy-host.example.com-access_log" common
# </VirtualHost>

# <VirtualHost *:80>
#     ServerAdmin webmaster@dummy-host2.example.com
#     DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host2.example.com"
#     ServerName dummy-host2.example.com
#     ErrorLog "logs/dummy-host2.example.com-error_log"
#     CustomLog "logs/dummy-host2.example.com-access_log" common
# </VirtualHost>

おっけー☆

今まで使ってたドキュメントルートを設定

次に、今までlocalhostでアクセスしていた箇所を記載します。

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

これを追加すれば今まで通り「http://localhost/」でXAMPPの設定画面にアクセスできます。

新しいドキュメントルートの追加

やっと新しいドキュメントルートを追加できます。以下のように記述しましょう。

<VirtualHost *:80>
    DocumentRoot "/Users/ユーザ名/YourDirectory/"
    ServerName osukinadomain
</VirtualHost>

DocumentRoot にはドキュメントルートにしたいフォルダを記述します。

ServerName にはブラウザでアクセスするURLを記述します。別に「.com」とかつけなくても問題ないですよ。僕は依頼を受けた仕事の制作環境としてローカル環境を作る場合は

ローカル

http://abc.l.com/

テスト

http://abc.domain.com/

本番

http://abc.com/

となるようにしてます。つまりまぁ、めんどくさくないようにあわせてるってだけです。

hostsの編集

最後はhostsファイルの編集です。hostsファイルとは「このマシンのブラウザでアクセスしたURLの飛び先を設定するファイル」です。分かりにくいですかね。まぁいつか分かるから気にしないで設定してしまいましょう。

ちなみに、Macの場合はHosterというアプリがあって、それだとGUIで編集できるので便利ですよ。

RedWinder::MacApp::Hoster

ダウンロードしたアプリを開いて、左上のプラスボタンで新規セットを作成します。

「ホスト名」にさっき入力した新しいドメイン(ServerNameに書いた文字)を入力して、「IP」には「127.0.0.1」を入力しましょう。

Apacheの再起動

これで全ての設定が完了しました。あとはApacheを再起動しましょう。XAMPPのControllアプリで一度Apacheを停止し、停止したら再度起動しましょう。

最後に

これで全ての肯定は完了です。ブラウザで先ほど入力したドメインでアクセスしたらちゃんとページが表示されるはずです。