XAMPPでlocalhostの表示を無くす方法を教えてほしい！
XAMPPで本番環境と同じドメインやアドレスで開発する環境を作りたい！
XAMPPでhtdocs以外のディレクトリでサイトの管理できないかな…。
このようなお悩みの方を解決したいと思います！
環境概要
この記事でご説明する方法は、以下のパソコンで進めた内容になります。
ご自身と環境が違うことで、挙動が変わる場合があります。
- OS：Windows 10 Home 64 ビット
- CPU：Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz (8 CPUs), ~2.0GHz
- GPU：Intel(R) UHD Graphics 620
- メモリー：16GB
また、この記事内容では以下の開発環境が前提となります。
- パソコンのCドライブに「XAMPP」をインストール済み
インストールがまだの場合は、以下からインストールをしましょう！
XAMPPのlocalhostのアドレスをドキュメントルート変更で非表示する方法
XAMPPをインストールしたままでは、http://localhost/...のようにホスト名が表示されてしまい、本番環境と異なることで開発がしづらい場合があります。
また、xamppのドキュメントルートがC:\xampp\htdocsディレクトリの中なので、複数のWebサイトやWebアプリケーションがわらわらと増えて管理しづらい場合や、「Cドライブ」にデータを置きたくない場合など、任意のディレクトリをドキュメントルートに設定したい場合があります。
上記の対策としては、XAMPPにある「バーチャルホスト機能」を設定することでかんたんに環境を構築できます。
では、さっそく手順を説明していきます！
URLのlocalhostを非表示にする実装手順
作業前の環境を以下の状態を前提とします。
C:\xampp\htdocsの中に、wp-blogのWordPressフォルダがある（C:\xampp\htdocs\wp-blog）http://localhost/wp-blog/のURLでトップページアクセス可能
実装後には、http://wp-blog/のURLでトップページにアクセスできるようにします。
バーチャルホスト機能の実装手順は以下になります。
- -1-httpd.confを編集する（XAMPP内のファイル）
C:\xampp\apache\confフォルダにあるhttpd.confファイルを編集 - -2-hostsを編集する（windows内のファイル）
C:\Windows\System32\drivers\etcフォルダにあるhostsファイルを編集
httpd.confを編集する（XAMPP内のファイル）
まず、XAMPPのApacheサーバを稼働させていれば Stop します。
C:\xampp\apache\confフォルダにあるhttpd.confファイルを編集する前に、バックアップファイルを作成し、万が一正しく表示されない時のために備えます。同じフォルダ内でhttpd.confファイルを複製して、ファイル名をhttpd.conf.orgにリネーム（ファイル名を変更）します。
httpd.confファイルを、メモ帳かVSCodeをインストール済みであればVSCodeで開き、以下のコードをファイル内の末尾の後に追加します。
｜省略｜
</IfModule>
</IfModule>
##この行の下からのコードを追加する
##デフォルトのlocalhostにアクセス可
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs"
ServerName localhost
</VirtualHost>
##localhostを非表示でwp-blogアクセス可
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/wp-blog"
ServerName wp-blog
</VirtualHost>従来通りのlocalhostでアクセスできるようにする記述用と、wp-blogでアクセスできるようにVirtualHostの記述を追加して保存します。
hostsを編集する（windows内のファイル）
C:\Windows\System32\drivers\etcフォルダにあるhostsファイルを編集する前に、バックアップファイルを作成し、万が一正しく表示されない時のために備えます。同じフォルダ内でhostsファイルを複製して、ファイル名をhosts.orgにリネーム（ファイル名を変更）します。
windowsキーまたは、ctrl + esc でスタートメニューを表示させ、notepadと入力して「メモ帳」にフォーカスしている状態で、ctrl + shift + Enter で管理者として起動させます。hostsファイルの変更後の保存は管理者権限でないとできないためです。
ctrl + O でファイルを開くウィンドを開き、C:\Windows\System32\drivers\etcフォルダにあるhostsファイルを開き、以下のコードをファイル内の末尾の後に追加します。
｜省略｜
# 127.0.0.1 localhost
# ::1 localhost
## バーチャルホストで指定したサーバー名（ServerName）の wp-blog と同じににする
127.0.0.1 wp-blog127.0.0.1はlocalhostのIPアドレスのことです。http://localhost/もhttp://127.0.0.1/も同じということになります。
wp-blogにアクセスすると、バーチャルホストで指定したサーバ名（ServerName<①>）と一致するwp-blog<②>のドキュメントルート、C:\xampp\htdocs\wp-blogディレクトリのWordPress内のファイルが表示されることになります。
[httpd.configファイル]
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/wp-blog"
ServerName wp-blog ←①
</VirtualHost>
[hostsファイル]
127.0.0.1 wp-blog ←②編集前に Stop したXAMPPのApacheサーバを稼働させて、http://wp-blog/でアクセスすると、WordPressのトップページが表示さていれば完了です。
ドキュメントルート以外のディレクトリを表示する実装手順
冒頭にも上げましたが、XAMPPのドキュメントルートがC:\xampp\htdocsディレクトリの中なので、複数の開発しているWordPressサイトが増え続けると管理が煩雑になってきます。ここでは、D:\development\wp-blogのディレクトリのWordPressサイトをバーチャルホスト機能で実装します。
実装手順は以下になります。
- -1-上記の「URLのlocalhostを非表示にする実装手順」を行う
上記の「URLのlocalhostを非表示にする実装手順」に沿って同じ状態に
- -2-シンボリックリンクを作成
「
コマンド プロンプト」を使ってシンボリックリンクを作成
上記の「URLのlocalhostを非表示にする実装手順」を行う
上記の「URLのlocalhostを非表示にする実装手順」を行った後から、実装手順の続きを説明します。既に実装している場合は、このまま次の項目に進んでください。
シンボリックリンクを作成
シンボリックリンクを作成して実装していきます。
シンボリックリンクとは、オペレーティングシステム（OS）のファイルシステムの機能のひとつで、特定のファイルやディレクトリを指し示す仮想的なファイルを作成し、それを通じて本体ディレクトリを参照できるようにする仕組みになります。
似ている機能として「ショートカット」がありますが、こちらでは実装できませんので「シンボリックリンク」を作成します。
wp-blogを任意のディレクトリに移動
今回は、任意のディレクトリをD:\development\wp-blogのWordPressサイトをドキュメントルートにしますので、wp-blogフォルダを移動してください。ここでいう「任意のディレクトリ」は、あなたの環境でWordPressサイトのフォルダを管理しやすい場所にすることになります。
C:\xampp\htdocs\wp-blog ←現在のディレクトリ階層
D:\development\wp-blog ←移動後のディレクトリ階層シンボリックリンクのコマンドを実行
windowsキーまたは、ctrl + esc でスタートメニューを表示させ、cmdと入力して「コマンド プロンプト」にフォーカスしている状態で、ctrl + shift + Enter で管理者として起動させます。
以下のコマンドを入力してシンボリックリンクを作成しましょう。
>mklink /D C:\xampp\htdocs\wp-blog D:\development\wp-blog
シンボリックリンクのコマンドは、mklink /D [ここに参照する仮想フォルダを配置するディレクトリ] [ここにWordPress本体のディレクトリ]と入力します。コマンドを実行する場合は、あたなの環境に合わせてパスを書き換えてください。
正常に実行できれば、以下の図のようになります。
C:\xampp\htdocsディレクトリの中を確認して、ショートカットアイコンの付いたwp-blogフォルダができていればOKです。
http://wp-blogにアクセスしてWordPressサイトが表示されていれば完了です！
まとめ
お疲れ様でした！無事に実装できましたでしょうか？
今回の手順で使用した２つのファイルは、変更しようと思った時に「何のファイルを変更するんだったけ…？」となりやすいので、このタイミングでURL変更用フォルダなど分かりやすいフォルダ名で作成して、その中に変更が必要なファイルをショートカットでまとめおくと、探す手間は省けて楽になります。
この記事で、あなたのお悩みが解決できれば幸いです。
