https://souiunogaii.hatenablog.com/entry/xampp-virtualhost

・XAMPPで任意のフォルダをドキュメントルートに変更したい。
・複数のフォルダでバーチャルホストに設定したい。
・具体的な手順を教えてほしい。

こういった疑問に答えます。

本記事の内容

XAMPPのドキュメントルートを任意のフォルダに変更する手順
複数フォルダでバーチャルホストで別々のURLでアクセス可能にする手順

この記事を書いている私は、某SIerに勤務しながら、
WEB系エンジニア・インフラエンジニアに憧れて、プログラミングおよびインフラ技術の勉強をしています。

こういった私が、解説していきます。

私が実機で試したコマンドや画像を載せて書いています。
記事の信頼性担保に繋がると思います。

XAMPPのドキュメントルートを任意のフォルダに変更して、複数フォルダでバーチャルホストで別々のURLでアクセスできるようにしたい

XAMPPをインストールしたWindows10の開発PC上にある別々のフォルダを、
バーチャルホストに設定して、それぞれ別々のURLでアクセスできるようにします。

前回の記事

souiunogaii.hatenablog.com

手順①：XAMPPのデフォルトのドキュメントルートの確認

Apacheの設定は下記ファイルに書かれています。

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

ServerName localhost:80
DocumentRoot "C:/xampp/htdocs"
<Directory />
    AllowOverride none
    Require all denied
</Directory>
<Directory "C:/xampp/htdocs">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>

デフォルトのドキュメントルートがC:/xampp/htdocsであることが分かります。

手順②：バーチャルホスト用の設定ファイルの編集

バーチャルホスト用の下記のファイルを編集します。
（元のファイルはリネームしてバックアップしておきます。）

C:\xampp\apache\conf\extra\httpd-vhosts.conf

バーチャルホストの有効化

20行目あたりの部分のコメント「##」を外して有効化します。

NameVirtualHost *:80

バーチャルホストでないアクセスの拒否

バーチャルホストでないアクセスを拒否するために、下記を追記します。

<VirtualHost _default_:80>
    ServerName any
    <Location />
        Require all denied
    </Location>
</VirtualHost>

これで、http://localhostでのアクセスは拒否するようになります。

XAMPPダッシュボード用のURLのバーチャルホスト

元のドキュメントルートは、XAMPPダッシュボードへのアクセス用のページになっていたので、
以下の記載を追記して、XAMPPダッシュボードのページ用のバーチャルホストURLを設定します。

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs"
    ServerName xampp.pc-ganymede.planet.space.com
    ServerAlias www.xampp.pc-ganymede.planet.space.com
    ErrorLog "logs/xampp.pc-ganymede.planet.space.com-error.log"
    CustomLog "logs/xampp.pc-ganymede.planet.space.com-access.log" common
</VirtualHost>
<Directory "C:\xampp\htdocs">
    Options Indexes
    AllowOverride All
    Require all granted
</Directory>

hostsに追記

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

127.0.0.1           xampp.pc-ganymede.planet.space.com

これで、バーチャルホストのURLでXAMPPダッシュボードのページが表示できるようになりました。

ローカル開発で使うフォルダをバーチャルホストのドキュメントルートに設定

今回は、下記のローカル開発でVSCodeでソースを編集している下記フォルダを、
ドキュメントルートに設定します。

D:\Users\satonaka\Documents\701_VSCode\green

C:\xampp\apache\conf\extra\httpd-vhosts.confに下記を追記します。

<VirtualHost *:80>
    DocumentRoot "D:\Users\satonaka\Documents\701_VSCode\green"
    ServerName green.pc-ganymede.planet.space.com
    ServerAlias www.green.pc-ganymede.planet.space.com
    ErrorLog "logs/green.pc-ganymede.planet.space.com-error.log"
    CustomLog "logs/green.pc-ganymede.planet.space.com-access.log" common
</VirtualHost>
<Directory "D:\Users\satonaka\Documents\701_VSCode\green">
    Options Indexes
    AllowOverride All
    Require all granted
</Directory>

hostsに追記

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

127.0.0.1           green.pc-ganymede.planet.space.com

設定したバーチャルホストのURLで、テスト用ページが表示できるようになりました。

「C:\xampp\apache\conf\httpd.conf」を編集した内容は、
XAMPPコントロールパネル画面で、Apacheを一度、停止して再起動したときに反映されます。

参考サイト

programming-selfstudy.hatenablog.com

qiita.com