hostsとhttpd-vhosts.confを変更してローカル開発環境にドメインを割り当てる方法

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

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

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

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

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

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

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

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

C:\Windows\System32\drivers\etc

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」を参照するようになっています。

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

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

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

C:\xampp\apache\conf\extra\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で任意のディレクトリをバーチャルホストにする方法 – Qiita
• windows7のXAMPPでバーチャルホストの設定をする – YATのBLOG