相対ルートパスのサイトをローカルで見る方法（バーチャルホスト設定）

配属最初の一週間が終わりました。

かなりお仕事を振っていただいて、楽しく作業をしている反面、
細かいミスが多くてげんなりしてしまいます。

当事者として仕事に関わることは楽しいけれど、
一歩引いて作業をしないと周りが見えなくなってしまうな、
とも感じている今日この頃です。

---

前置き長くなりましたが、今回は
「相対ルートパスのサイトをローカルで見る方法」（バーチャルホスト設定方法）のメモ。

なぜこれを設定するのかというと、
まずはWebサイトのリンクのパスからの話にさかのぼります。

パスの書き方には3種類あります。

絶対パス

http://granshe.blog.shinobi.jp/など、http://からパスを書くもの。
外部リンクを貼るときはこれ。

相対パス

../index.htmlや../company/about.htmlなど、記述してあるHTMLから見て、リンク先のHTMLがどのディレクトリにあるのかを指定。
同じサーバに上がっていないとできない。

ルート相対パス

/index.htmlや/company/about.htmlなど、はじめに「/」がつきます。
この/が、「ルート」を示します。すべてのページ共通でサイトのルートディレクトリからどこにリンクするのかを示します。
相対パスと書いてある通り、同じサーバに上がっていないとできません。

です。

大規模で、かつ階層が深いサイトの場合、
どのページに対しても同じパスでリンクを貼ることができるので、
相対ルートパスは本当に便利です（と、最近実感しました）。

しかし、この相対ルートパスは、
「ローカル上でサイトが確認できない

XAMPPを使ってローカルサーバを立ててこれを解消できるのですが、
自由にバーチャルホストの場所を指定する方法を知らなくて、
なんて自由度のないシステムなんだ！と思っていたのですが、
現場の先輩におしえていただきました！

これで、どこのフォルダにサイトを作っても、
ローカル上で動作確認、レンダリングチェックが可能に。

XAMPPが既にインストールされているものと仮定して、手順は2つだけ。

下記は、Cドライブ直下にXAMPPをインストールし、
Dドライブ直下の「sitemane」というフォルダに作ったサイトを
バーチャルホストとして指定する例です。

１．C:\xampp\apache\conf\extraの中にある「httpd-vhosts.conf」の最下部に下記コードを追加。

<VirtualHost *:80>
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@sitename
    DocumentRoot D:/sitename
    ServerName sitename
  <Directory "D:/sitename">
    Options Indexes FollowSymLinks Includes ExecCGI
    Order deny,allow
    Deny from All
    Allow from localhost 127.0.0.1
  </Directory>
</VirtualHost>


と入れる。

２．C:\WINDOWS\system32\drivers\etcの中にある「hosts」の最下行のlocalhostの後ろに半角スペースを空け、サーバ名を記入。

127.0.0.1       localhost sitemane

または、

127.0.0.1       localhost
127.0.0.1       sitemane

でもOKです。

これでローカル上で相対ルートパスサイトをきちんと見ることができます。
注意して欲しいのは、サイトのパスに半角スペースが入るとダメなようですので、
（たとえば「Program Files」など。）注意してください。

以上、メモ終わり。