XAMPPでローカルサーバーを利用する場合、htdocsの中に階層を分けて複数サイトを置いているとルートパス指定のサイトは階層がずれてしまいうまく表示されません。
例えばこんな感じでhtdocsの中に複数サイトを置いていて
C:\xampp\htdocs\siteA
C:\xampp\htdocs\siteB
C:\xampp\htdocs\siteC
表示させようとすると通常はこのように表示されてしまいます。
http://localhost/siteA/~
http://localhost/siteB/~
http://localhost/siteC/~
でもこのように表示できればルートパスが使用できるようになるので表示させたい!
C:\xampp\htdocs\siteA http://siteA
C:\xampp\htdocs\siteB http://siteB
C:\xampp\htdocs\siteC http://siteC
パスの簡単な説明
絶対パスとは?
http://~
ではじまるパス。
相対パスとは?
自分がいるところを基準に./
や../
で指定するパス。
同じ階層 | ./ファイル名 またはそのままファイル名 |
---|---|
下の階層 | ./フォルダ名/ファイル名 |
上の階層 | ../ファイル名 |
2階層上 | ../../ファイル名 |
ルートパスとは?
ルートから始まるパス。http://○○○.com /common/img/abc.jpg
/common/img/abc.jpg
←この部分
ルートパスにしておくと階層が変わったときやドメインが変わったときなど変更しなくていいので便利です。ただしサーバーに上がってないと表示できないのでローカル環境では表示できません。XAMPPなどのローカルサーバーを利用すれば使えるようになります。
XAMPPのファイル修正方法
こちらの階層に置いてあるサイトを今回表示させてみます。
C:\xampp\htdocs\siteA
1. httpd.confファイルに追加
C:\xampp\apache\conf\httpd.conf
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
</VirtualHost>
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/siteA
ServerName siteA
</VirtualHost>
今まで通りlocalhostで使用する用と新しくsiteAのVirtualHostを追加します。
※今回Dドライブなのでご自身のパスをはめてください。
2. hostsファイルに追加
C:\Windows\System32\drivers\etc\hosts
hostsファイルに以下一行を一番下に追加します。
127.0.0.1 siteA
3. xampp再起動
xamppのapacheを再起動します。
http://siteA
これで直接siteA
の階層を見るようになるので/common/img/~
などのルートパスで指定したファイルが表示されるようになりました。