XAMPPでVirtualHostを設定

いいやん

はじめに


システム開発やWEBの仕事をしていると、自分のPC内でサイトを表示できるようにしたいことがあります。例えば、一般に公開する前に問題なく動くかを確認したいような場合です。WEB系のシステム開発の現場では、あるあるの状況ですね。
もちろん、レンタルサーバーやVPCを契約していれば、そのサーバーにアップしてしまうという手もあります。ただし、この場合は（見せない方法はありますが）基本的に誰でもアクセスできてしまいます。
仕事で開発していれば、クラウド上にプライベートな環境を作ってそこでテストするということもあるのですが、個人的に、学習のために、のようなちょっとした目的でわざわざサーバーを契約するのはちょっとなあという感じですね。

私の場合、以下のサイトをずっと運用（というほどではないですが）しているのですが、公開する前に動作を確認しておきたいというような場合があります。

そこで、Windowsの場合によく使われる環境がXAMPPです。
XAMPPについては、https://www.apachefriends.org/jp/index.html をご覧ください。
ここでは、環境を作ったときのメモを書き残しておきます。何度も同じことをやっているのですが、毎回同じところを忘れているんですよね。
今回は、2023/02/25にダウンロードした版をもとに説明しています。

XAMPPのインストール

インストールについては、説明を省略します。
Windows版のインストーラをダウンロードし、実行すると、指示に従っていくだけでインストールできます。
インストール後に、コントロールパネルを実行すると以下の画面が表示されます。

XAMPPコントロールパネルの起動直後

Startボタンを押せば、それぞれのソフトが実行されます。WordPressなどPHP系のものを動かしたいのであれば、Apache（WEBサーバー）とMySQL（データベース）のみ起動すればよいです。

ApacheとMySQLを起動した状態

起動に成功すると、Moduleの欄の背景色が緑色になります。
この時、自分のパソコン上ではWEBサーバーApacheとデータベースMySQLが動いている状態になっています。Chromeなどのブラウザで、http://localhost/にアクセスすると以下のようなXAMPPの管理者画面が表示されます。

XAMPPの管理者画面

PHPの情報については、メニューのエリアにあるPHPInfoを選択すると表示されます。今回の版ではPHP8.2が入っています。

XAMPPをインストールしただけで、すでにPHPの動く環境が出来上がってしまっているのは非常に簡単ですね。XAMPPが出る前は、ApacheとMySQLをそれぞれインストールして、設定ファイルを色々とこねくり回していましたが・・・

バーチャルホストの設定

ここまでの内容は、単なるご紹介なので非常に簡単ですね。
ここからが本題です。
バーチャルホスト用のモジュールの有効化など、実行環境はすでに出来上がっています。（デフォルトで有効になっています）
では、ここでは　一例として　logs.internal　というURLでアクセスできるようにしていきます。あくまでもメモということで、ポイントだけを記載します。
以下の2点の対応を行います。

  • Apacheに、バーチャルホストの設定

  • Windowsのhosts設定

Apacheに、バーチャルホストの設定

C:\xampp\apache\conf\extra\httpd-vhosts.conf を編集。パスは自身の環境に置き換えて理解してください。
ここでは、logs.internalに80ポートでアクセスした場合の設定をしています。DocumentRootには、Windows上のパスを設定します。ファイル内には、サンプル実装がコメントアウトされていますので、それを参考にしましょう。また、アクセス権に関するエラーが出る場合には、そのディレクトリへの権限を与えます。

<VirtualHost *:80>
    DocumentRoot "C:/dev/workspace/sweet"
    ServerName logs.internal
    ErrorLog "logs/sweet-error.log"
    CustomLog "logs/sweet-access.log" common
    <Directory C:/dev/workspace/sweet>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

Windowsのhosts設定

C:\Windows\System32\drivers\etc\hosts に以下の設定を追加

127.0.0.1 logs.internal

目的のドメインでアクセスした場合に、ローカルホストのポート80に繋ぎます。httpsでアクセスする場合は、httpd-ssl.conf　に同様の定義が必要です。既に1件設定されているので、参考にしましょう。

XAMPPのコントロールパネルでApacheを再起動（StopしてStart）すれば、このURLで自分のPC上のサイトにアクセスできるようになります。

https://logs.internal でアクセスした例

複数のバーチャルホストを設定したい場合は、これらの設定をそれぞれ行えばよいということになります。
ただし、これだけだとXAMPPの管理者画面にアクセスできなくなりますので、注意しましょう。これを有効にするために、以下のような設定も必要です。

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
	ServerName localhost
</VirtualHost>

Apacheの説明（https://httpd.apache.org/docs/2.4/ja/vhosts/examples.html）によると、ServerName にマッチするものがない場合は、最初の設定が適用されるようですね。

以上により、自分のPC上で目的のサイトを実行できるようになりました。
別途設定すれば、VSCodeなどを使ってdebugすることも可能です。しっかりとバグを解消して目的のサイトをリリースするようにしましょう。

おまけ

XAMPPコントロールパネルを終了したときにiniファイルが作れない旨のエラーになることがあります。その場合は強制終了させるしかないようです。
アクセス権がないために発生するので、コントロールパネルを起動する際に管理者モードで起動すれば製常習できるようになると思います。


この記事が気に入ったらサポートをしてみませんか？