XAMPPでローカル環境から架空のドメイン名でアクセスする方法

サーバー関連
この記事は約8分で読めます。

はじめに

この記事は、4年前に書かれました。

前回、XAMPPでPHPバージョンの異なる環境を複数構築する方法をご紹介しました。
今回は、引き続いてローカルの開発環境にて、独自に好きなドメイン名を設定してアクセスする方法をご紹介します。
通常、XAMPP環境を構築した場合、localhostや127.0.0.1でブラウザからアクセスするのが一般的です。今回は好きなドメイン名を設定してアクセスする方法を説明します。
CSSや画像ヘのパスが/から始まる絶対パスになっていたり、PHPでセッション管理をおこなっている場合、本番環境とほぼ同じディレクトリ階層で開発を進める場合などに便利です。

目的

ブラウザから以下のドメイン名でXAMPPへアクセスできるようにすることが最終目的です。
http://local.testxampp.jp

※注意
実在するドメイン名ではないものを指定してください。

Apacheのコンフィグ周りを変更する

Apacheのコンフィグを触ります。Linuxの場合だとviの操作が必要となりますが、Windows環境ではメモ帳などで編集できます。
XAMPPをインストールしたディレクトリから辿って、以下のファイルがコンフィグファイルとなります。修正前に、念のためhttpd_copy.confなどと名前を変えてバックアップを取っておきましょう。

xampp715\apache\conf\httpd.conf

テキストエディタなどでこのファイルを開きます。メモ帳でも構いません。
文字列検索でvhostsと検索します。httpd-vhosts.confの箇所がヒットすると思いますので、行頭に#が入っていないか確認します。#はコメント行となるため、#が入った状態だとその行は無効となります。＃が無ければ有効です。
問題なければ一度このファイルを閉じてください。

次に以下のファイルを開きます。こちらはバーチャルホストの設定ファイルになります。

xampp715\apache\conf\extra\httpd-vhosts.conf

以下のオレンジの部分を丸ごとコピーして、最下部にペーストします。

行頭の##のコメントを削除します。以下のようにServerAdmin、CustomLogについては特に不要ですので、コメントは外さないままにしています。

<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "D:/xampp7031/htdocs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

http://local.testxampp.jpでアクセスできるように設定をしていきましょう。
まずはドキュメントルートを設定します。ドキュメントルートとは、ドメインでアクセスされた時にサーバー内のどのディレクトリを読みにいくかというものになります。
デフォルトで指定されている内容を変更しますが、/htdocsの直下にtestxamppというディレクトリを作る想定としますので、以下のように変更します。
これで、local.testxampp.jpでアクセスされた場合はtestxamppの中を見に行くことになります。

DocumentRoot "D:/xampp7031/htdocs/testxampp"

次にサーバーネームを変更します。local.testxampp.jpでアクセスしますので、以下のように設定します。

 ServerName local.testxampp.jp

エラーログについては、複数の案件を同時に設置した場合、個別に確認できたほうが便利ですので以下のように設定します。ドメイン名＋error.logとしています。特に決まりはありませんので分かりやすい名称で問題ありません。logs/の直下に保存されます。

ErrorLog "logs/local.testxampp.jp-error.log"

最終的に以下のようになりました。

<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "D:/xampp7031/htdocs/testxampp"
    ServerName local.testxampp.jp
    ErrorLog "logs/local.testxampp.jp-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
</VirtualHost>

次に、さきほどドキュメントルートに設定したディレクトリを新規作成します。私はDドライブに設置していますが、Cドライブの場合は適宜置き換えてください。
/xampp/htdocs/の下に作成します。私はxampp7031ですが。
先に設定済みのDocumentRootの値と同じ名称で作成してください。

新規作成したディレクトリの中に入り確認用としてindex.htmlを作成します。

index.htmlの中に、適当にテキストを入れておきます。私はとりあえず以下のように入れました。

hostsファイルの設定

ひとまず、Apacheの設定は完了しましたが、これだけではロカール環境からドメイン名でアクセスできません。
Windowsのhostsファイルを修正します。Windows10でしたら、大体以下の場所にあると思います。

C:\windows\system32\drivers\etc\hosts

hostsファイルをテキストエディタで開きます。メモ帳でも構いません。
そして、以下のように最下部あたりに追記します。127.0.0.1というのはローカルホストのIPアドレスです。半角空けてその後ろにApacheで設定したドメイン名を入力します。

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost


127.0.0.1 local.testxampp.jp

これで保存をおこないますが、以下のようなエラーが表示されて保存されない場合があります。これは権限の設定が書き込み許可されていないためです。

先ほどのhostsファイルを右クリックしてプロパティを選択します。セキュリティのタブを開いて編集ボタンをクリックします。

おそらく、Usersでログインしているのが一般的かと思いますので、Usersをクリックしてください。すると、その下にアクセス許可が表示されます。

フルコントロールにチェックを入れて「適用」をクリックします。すると、警告ダイアログが表示されますが、気にせず「はい」をクリックします。

これで、再度hostsファイルの保存をおこなうと、問題なく保存されるはずです。無事に保存できましたら、先程のhostsファイルの書き込み権限を元にもどしておきます。これを忘れると、セキュリティ的に大変危険です。
以下のように読み取りと実行のみの状態に戻しておきましょう。

XAMPPの起動

設定これで以上です。早速XAMPPを起動してみます。

それでは、ブラウザから設定したドメイン名でアクセスしてみましょう。
http://local.testxampp.jp

以下のように、index.htmlの内容が表示されればＯＫです。

まとめ

XAMPPで好きなドメイン名にて開発環境へアクセスする方法をご紹介しました。
最近はSSL環境が増えていますので、https://~でアクセスしたい場合もあると思います。これについてもOpenSSLを設定することで可能となります。ローカルでアクセスするためだけにSSLを構築するだけですので、証明書は無くても問題ありません。
これについては、また機会があれば記事に書きたいと思います。

Linuxサーバーをローカルで立ち上げて開発環境を構築してい時は、named.confを触ったり、正引き、逆引きの設定をおこなったり、ローカルのDNSサーバーを再起動したりと、いろいろ面倒なことをしていましたが、Windows内だけで完結できるこの方法は楽です。