notes

ルートパスをXAMPP(ローカル)環境で使う

更新日:

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:」)。

 

テキストエディタで開き、下記を追加します。

ひとつめのVirtualHostブロックはlocalhost用なのでそのままコピペしてください。

ふたつめのVirtualHostブロックのDocumentRootの最後とServerNameは任意の名前に変更してください。

 

▼ htdocs内の「development」フォルダをルートにする場合

 

Virtual hosts の設定

「Virtual hosts」でファイル内検索をして下記がコメントアウトされていたら、Include~の行のコメントアウトを外します。

#を削除すればコメントアウトが解除されます。

 

▼ 解除後

 

httpd.conf に追記

つづいて、

C:\xampp\apache\conf\httpd.conf

を修正します。

 

テキストエディタで開き、下記を追加します。

 

最初の行に任意のフォルダ名を追加してください。

 

▼ htdocs内の「development」フォルダをルートにする場合

 

hosts に追記

下記はWindows環境の手順です。

 

C:\Windows\System32\drivers\etc\hosts

の「hosts」ファイルをデスクトップなどにコピーし、テキストエディタで開きます。

バックアップは必ずとりましょう。

 

下記を追加します。

任意のサーバー名は、「httpd-vhosts.conf」内で指定したものです。

 

▼ developmentをルートにする場合

 

Apacheを再起動

Apacheを再起動すると、

http://development/

で表示されるようになります。

 

これで、ルートパスが使い放題ですね!

 

余談 - devが使えない?

当初サーバーネームを「dev」にしていたのですが、Chromeで警告が出てアクセスできず・・・。

「development」にリネームしたところ、無事に使えたので、devがだめだったようです。

その後戻してみたものの、やはりdevだけ弾かれる・・・

 

devが使いたいのにー!

ということで、皆さんもdevでエラーが出ても慌てずにリネームしましょう。

 

-notes
-,

Copyright© Webjo blog , 2020 All Rights Reserved.