ローカル環境で開発やWordPressのテーマ構築なんかをする場合、MAMPとかXAMPPといったツールを使って、或いはMacならMacについてるApacheとかつかってサーバーを建てると思いますが、デフォルトのままだと、プロジェクトごとに

localhost/~username/project/wp/

みたいな感じにすると思いますが、これだとURLがアレな感じだったり、サイトルートからパスを指定するときに問題があったりします。

WordPressとかならそこまで影響はないかもしれませんが、例えば

localhost/~username/project/index.html

から

localhost/~username/project/img/logo.png

をサイトルート相対パスで指定しようとして、

と指定すると、

localhost/~username/img/logo.png

を参照しようとしてしまい、画像が表示されません。

相対パスを使えばまぁいいっちゃいいんですが、階層が複雑になってきて、

localhost/~username/project/contents/sidebars/sidebar.html

みたいな奥深くから

localhost/~username/project/img/logo.png

を呼ぼうとすると、上の階層に戻るための「../」がどんどん増えていって訳がわからなくなりますし、上の例だと本番と階層が異なることになりローカルではちゃんと見られたのにサーバーに入れたら見られなくなったー！の原因になりかねません。

ということで、プロジェクト単位でバーチャルホストを切ってプロジェクトフォルダからサイトルート相対パスを使えるようにしましょう、というお話です。

やりたいこと

前置きが長くなりましたが、今回やりたいことは簡単にいえばこういうことです

1. バーチャルホストを指定して、プロジェクトの階層に
   「localhost」のように「project.dev」みたいな感じでアクセスできるようにする
2. 上記の結果、サイトルート相対パスで画像やスタイルシートを呼べるようにする

ではさっそく指定していきます。

今回は XAMPP for Mac で設定を進めていきますが、MAMPとかでも同じようにできると思います。今回いじるファイルの位置とかは変わってきますが。

httpd.conf を編集

まずは、XAMPPのApacheでバーチャルホストを使えるようにするため、httpd.confファイルを編集します。

/Application/XAMPP/etc/httpd.conf を開き、470行目付近にある

という部分のコメント（#）を外し、

として保存します。

変更するにあたってパスワードを聞かれるので入力します。

これで httpd-vhosts.conf を読み込むようになりました。

httpd-vhosts.conf の編集

続きまして、今読み込むように設定した httpd-vhosts.conf を編集します。

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

を開きましょう。

はじめから色々とサンプルが書かれています。いらないなら消してもいいし、あとで参考にするためにコメントアウト（行頭に「#」をつける）しておいても良いと思います。

まずは、これまでと基本的な挙動は変わらないように、以下を追記します。

こうしておくことでこれまで通り「localhost」にアクセスすれば xampp のホームが表示されるようになります。

続いて、通常のドキュメントルートも設定しておきましょう。自分ははじめからある「サイト」ディレクトリを使ってるので、

としています。（usernameはMacのユーザー別ホームディレクトリ名です）

これで「サイト」以下に配置されてるファイルに「localhost/~username」でアクセスできるようになります。保存して（これもパスワード聞かれるのでパスワード入力し）設定を読み込ませるためにXAMPPのApacheを再起動します。

プロジェクトごとにバーチャルホストを切る

ようやく本題です。

もう気づいたかもしれませんが、「httpd-vhosts.conf」で設定した「ServerName」にアクセスすると「DocumentRoot」以下が表示されるようになります。（実際にはもう1ステップ必要なのですが）

ということで、今回の目標である「project.dev」にアクセスしたら「localhost/~username/project/」というか、「/Users/username/Sites/project/」のファイルが開くようにするためには、以下のようにかけばいいことになります。

パスワードを入力して保存したらこのファイルでの作業は終わりです。

因みに .com とかじゃなくてもOKです。また、自分が取得してるドメインである必要もありません。プロジェクト名だけでもまぁ構わないと思います。

hostsの設定をする

最後に hosts というファイルを修正します。これやらないといくらバーチャルホストを切っても表示できません。

これはこのMacが「project.dev」にアクセスしたらどこを表示すればいいのかわからないからです。DNS設定しないとドメイン名でアクセスしても表示されないのと似たような感じだと思います。多分。

hostsは、/private/etc にありますので、まずはファインダーを開きましょう。

そこで、「cmd + Shift + G」と押すと「フォルダの場所を入力」と言われるので「/etc/」と入力して「移動」を押せばOKです。

hostsファイルをエディタで開いて以下のように追記します。

これまた保存にはパスワードが必要なので入力してください。

これで、Macが「project.dev」にアクセスしたら「127.0.0.1」に接続するようになります。127.0.0.1というのはループバックアドレスといい、自分自身を指すIPアドレスです。127.0.0.0～127.255.255.255 が使えるらしいですが、通常は 127.0.0.1 を使うのが一般的です。

ここまで完了したら念のためもう一度サーバーを再起動してから、「project.dev」にアクセスしてみましょう。

localhost/~username/project/ にアクセスした時と同じサイトが表示されれば成功です。

※この行程の代わりに Hoster というアプリを使う方法もあります。

最後に

これはやらなくてもいいのですが、プロジェクトを作る度に「httpd-vhosts.conf」と「hosts」も修正する必要があるので自分はこの2個を sublime text2 のプロジェクトにしちゃってます。

ST2で新しいウィンドウを開き、この2つのファイルを開きます。

この状態で、メニューバーから「Project」→「Save ProjectAs…」 を選択し、適当に名前を付けて保存します。自分は「virtual-host-settings.sublime-project」としました。

これをどっか適当なところに保存すると、「virtual-host-settings.sublime-project」と「virtual-host-settings.sublime-workspace」という2つのファイルができるので、「virtual-host-settings.sublime-project」の方をDockにドラッグ・アンド・ドロップで入れておきます。

これでいつでもすぐにバーチャルホスト設定ができるようになります。

結構便利ですよ。

ちなみにプロジェクトファイルのアイコンこれを使わせてもらってます。