XAMPPなどのローカルサーバーで開発を行う時に、初期設定ではルートパスが使えないので本番との差異がでて不便ですよね。
ルートパスとは？
https://example.com/images/test.png
というURLの、https://example.com/を基点とするパス。「/」で表す。
ルートパスで画像を指定する場合、
<img src="/images/test.png">
と指定すればどの階層のフォルダからでも同じパスでアクセスできる。
相対パスだと、階層が変わるごとに
<img src="../../images/test.png">
と変更の必要があるが、ルートパスならば変更の必要がないのでメンテナンスが楽。
ただし、サーバー上でしか動作しない。
これまでphpで切り替えていましたが、localhostやIPでの振り分けが手間に感じることがあったので、サーバー設定を変更しました。
今回行った手順を残しておきます。
※チームや社内など、ローカル環境を統一して開発している方は怒られないように一度確認してくださいね～。
XAMPPでルートパスを使えるようにする手順
修正ファイルは3つです。
念の為バックアップは必ずとりましょう。
httpd-vhosts.conf に追記
C:\xampp\apache\conf\extra\httpd-vhosts.conf
を修正します。
C:の部分はインストールドライブに変更してください(Gドライブなら「G:」)。
テキストエディタで開き、下記を追加します。
1 2 3 4 5 6 7 8 9 | <VirtualHost *:80> DocumentRoot "C:/xampp/htdocs" ServerName localhost </VirtualHost> <VirtualHost *:80> DocumentRoot "C:/xampp/htdocs/任意のフォルダ名" ServerName 任意のサーバー名 </VirtualHost> |
ひとつめのVirtualHostブロックはlocalhost用なのでそのままコピペしてください。
ふたつめのVirtualHostブロックのDocumentRootの最後とServerNameは任意の名前に変更してください。
▼ htdocs内の「development」フォルダをルートにする場合
1 2 3 4 | <VirtualHost *:80> DocumentRoot "C:/xampp/htdocs/development" ServerName development </VirtualHost> |
Virtual hosts の設定
「Virtual hosts」でファイル内検索をして下記がコメントアウトされていたら、Include～の行のコメントアウトを外します。
1 2 | # Virtual hosts # Include conf/extra/httpd-vhosts.conf |
#を削除すればコメントアウトが解除されます。
▼ 解除後
1 2 | # Virtual hosts Include conf/extra/httpd-vhosts.conf |
httpd.conf に追記
つづいて、
C:\xampp\apache\conf\httpd.conf
を修正します。
テキストエディタで開き、下記を追加します。
1 2 3 4 5 6 | <Directory "C:/xampp/htdocs/任意のフォルダ名"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory> |
最初の行に任意のフォルダ名を追加してください。
▼ htdocs内の「development」フォルダをルートにする場合
1 2 3 4 5 6 | <Directory "C:/xampp/htdocs/development"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order allow,deny Allow from all </Directory> |
hosts に追記
下記はWindows環境の手順です。
C:\Windows\System32\drivers\etc\hosts
の「hosts」ファイルをデスクトップなどにコピーし、テキストエディタで開きます。
バックアップは必ずとりましょう。
下記を追加します。
1 | 127.0.0.1 任意のサーバー名 |
任意のサーバー名は、「httpd-vhosts.conf」内で指定したものです。
▼ developmentをルートにする場合
1 | 127.0.0.1 development |
Apacheを再起動
Apacheを再起動すると、
http://development/
で表示されるようになります。
これで、ルートパスが使い放題ですね！
余談 - devが使えない？
当初サーバーネームを「dev」にしていたのですが、Chromeで警告が出てアクセスできず･･･。
「development」にリネームしたところ、無事に使えたので、devがだめだったようです。
その後戻してみたものの、やはりdevだけ弾かれる･･･
devが使いたいのにー！
ということで、皆さんもdevでエラーが出ても慌てずにリネームしましょう。