この記事は最終更新日から2年以上経過しており、内容が古くなっている可能性があります。
ご理解の上、記事を閲覧いただければと思います。

XAMPPなどを使ってローカル開発環境を構築する場合、“特定のドメインにアクセスした際、ローカル開発環境を参照する”ようドメインを割り当て、作業を効率化をすることができます。

今回は、それを行うための「hostsファイル」と「XAMPPのhttpd-vhosts.confファイル」の設置場所および、修正方法を紹介します。

※事前準備として、以下のように「隠しファイル」を表示しておくと良いでしょう。

エクスプローラメニューの「表示」→「隠しファイル」にチェックを入れておきます。

「隠しファイル」を表示

windows10のスタートアップフォルダの場所とフォルダへのショートカットをつくる方法

hostsファイルの場所と書き方

hostsファイルの場所（Windows10の場合）

Windows10の場合、hostsファイルは以下の場所にあります。

C:\Windows\System32\drivers\etc

hostsファイルの場所

hostsファイルに追記する

  1. hostsファイルをバックアップのためにコピーしておき、管理者権限で実行した「メモ帳」で開きます。（hostsファイルは管理者権限でしか書き込み出来ないため）
    メモ帳を管理者で実行

  2. hostsファイルの最終行に、下記のように記載して保存します。
    以下例は、特定のドメイン（web-generalist.com）にアクセスした際、アドレス「127.0.0.1」（自分のローカルPCのIP）を参照するように記載しています。

    127.0.0.1 web-generalist.com

続いて、XAMPP側の設定変更を行います。

XAMPPのhttpd-vhosts.confファイルの場所と書き方

XAMPPインストールの初期状態では、「http://loalhost」にブラウザでアクセスすると、以下のように 「C:\xampp\htdocs\dashboard」を参照するようになっています。

localhost初期設定

これをhttpd-vhosts.confファイルを編集することで変更します。

XAMPPのhttpd-vhosts.confファイルの場所

httpd.confファイルは、「XAMPPのインストール方法を紹介した記事」の手順に従ってインストールした場合、以下の場所にあります。

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

httpd-vhosts.confの場所

これをメモ帳や、TeraPadなどのテキストエディタで開きます。

httpd-vhosts.confファイルを編集・追記

  1. httpd-vhosts.confファイルを開くと20行目付近に以下の記述があるため、「##NameVirtualHost *:80」の先頭にある「##」のコメントアウトを外して以下のように記載します。 
    # Use name-based virtual hosting.
#
NameVirtualHost *:80
  2. 続いて、下記のように表示したいフォルダを「DocumentRoot 」に続いて記載し、ドメインを「ServerName 」に続いて記載します。 
    <VirtualHost *:80>
DocumentRoot C:/xampp/htdocs/web-gene
ServerName web-generalist.com
</VirtualHost>

最後に、XAMPPコントローラーからApacheとMySQLを起動して該当のドメインにアクセスし、XAMPP内のサイトが表示されれば完了です。

XAMPPを再起動

参考にさせていただいた記事