\ Pinterest はじめました /

XAMPPのlocalhostのアドレスをドキュメントルート変更で非表示する方法

XAMPPのlocalhostのアドレスをドキュメントルート変更で非表示する方法プログラミング

XAMPPでlocalhostの表示を無くす方法を教えてほしい!
XAMPPで本番環境と同じドメインやアドレスで開発する環境を作りたい!
XAMPPでhtdocs以外のディレクトリでサイトの管理できないかな…。

このようなお悩みの方を解決したいと思います!

環境概要

この記事でご説明する方法は、以下のパソコンで進めた内容になります。
ご自身と環境が違うことで、挙動が変わる場合があります。

PCスペック
  • 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でトップページアクセス可能
xampp初期URLとディレクトリ構造の図

実装後には、http://wp-blog/のURLでトップページにアクセスできるようにします。

xamppのバーチャルホスト設定後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 します。

XAMPPのApacheサーバを停止

C:\xampp\apache\confフォルダにあるhttpd.confファイルを編集する前に、バックアップファイルを作成し、万が一正しく表示されない時のために備えます。同じフォルダ内でhttpd.confファイルを複製して、ファイル名をhttpd.conf.orgにリネーム(ファイル名を変更)します。

httpd.confのバックアップファイルを作成

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にリネーム(ファイル名を変更)します。

hostsファイルのバックアップファイルを作成

windowsキーまたは、ctrl + esc でスタートメニューを表示させ、notepadと入力して「メモ帳」にフォーカスしている状態で、ctrl + shift + Enter で管理者として起動させます。hostsファイルの変更後の保存は管理者権限でないとできないためです。

Windowsメニューでメモ帳にフォーカス

ctrl + Oオー でファイルを開くウィンドを開き、C:\Windows\System32\drivers\etcフォルダにあるhostsファイルを開き、以下のコードをファイル内の末尾の後に追加します。

|省略|
#   127.0.0.1       localhost
#   ::1             localhost
## バーチャルホストで指定したサーバー名(ServerName)の wp-blog と同じににする
127.0.0.1 wp-blog

127.0.0.1localhostの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サイトが表示されていれば完了です!

まとめ

お疲れ様でした!無事に実装できましたでしょうか?

今回の手順で使用した2つのファイルは、変更しようと思った時に「何のファイルを変更するんだったけ…?」となりやすいので、このタイミングでURL変更用フォルダなど分かりやすいフォルダ名で作成して、その中に変更が必要なファイルをショートカットでまとめおくと、探す手間は省けて楽になります。

この記事で、あなたのお悩みが解決できれば幸いです。

ブログを始める人におすすめのレンタルサーバー!

ブログを始めようとお考えの人向けに、おトクなキャンペーン中のレンタルサーバーをご紹介します!

ConoHa WING(コノハウィング)

キャンペーン中!

「ConoHa WING」では、WINGパック「ベーシックプラン」新規でお申込みいただくと、ConoHa WING通常料金から最大36%OFFでご利用いただけます。36ヶ月契約なら月額836円からWINGパックをご利用いただけます。

さらに、初期費用無料で、初回お申込み月はご利用料金無料なので月初のお申込みで、最大31日間無料でご利用いただく事ができます!

また、WINGパックはレンタルサーバーと独自ドメインがセットになったおトクな長期利用割引プランです。お好きなレンタルサーバープランと独自ドメインが2つ永久無料でご利用いただけます。

詳細は、以下のリンクからご確認ください。
⇒Early Summer キャンペーン!

Xserver(エックスサーバー)

キャンペーン中!

「エックスサーバー」では、「独自ドメイン2つ永久無料&初期費用半額」と過去最大級にお得なキャンペーン開催中です!

さらに2021年6月17日(木)18時まで、キャンペーン期間中に新規でお申込みいただいた方は、通常3,300円の初期費用が半額!

さらに「.com」や「.net」などの人気独自ドメイン2つが永久無料と大変おトクです!

キャンペーンの詳細は、以下のリンクからご確認ください。
⇒独自ドメイン2つ永年無料&初期費用半額キャンペーン

ロリポップ!

ロリポップ!『ドメインずーっと無料』!

『ムームードメイン』の対象ドメインと、『ロリポップ!』のレンタルサーバーの両方を新規でご契約いただく場合、レンタルサーバーをご契約中はドメインを無料でご利用いただける『ドメインずっと無料』の提供を開始しました。

ロリポップ!でレンタルサーバーを契約期間中はずっと無料でドメインを利用することができます。

サービスの詳細は、以下のリンクからご確認ください。
⇒ドメインの新規取得・更新が無料になるサービス『ドメインずっと無料』

ボクがおすすめするレンタルサーバーの特徴や違い、選び方など知りたい方は、WordPressに最適なレンタルサーバーの選び方とおすすめサービス比較!の記事に詳しく解説してますのでご覧になってください!

プログラミング
スポンサーリンク
otsuをフォローする
スマライログ
タイトルとURLをコピーしました