★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

XAMPPで複数サイトをローカル環境に立ち上げる手順まとめ

XAMPPは次の記事でも紹介したようにローカル環境(自分のPC)でサーバー環境を構築できる便利なソフトウェアです。

テスト環境でサイト構築をしてみたいという時にとても便利なのが「XAMPP」というソフトウェアです。本来サーバー環境をローカルに構築するには大変手間がかかりますが、XAMPPを使えばこれ1つだけで今使っているコンピュータ上で簡単に開発から運用ができてしまいます。そこでここではXAMPPをまだ使ったことがない人向けに一からインストールする手順について紹介します。

ただしローカル環境にサイトを複数作って運用したい場合、XAMPP自体にはそのような機能はありません。

ではどうすればいいかというとXAMPPに含まれるApacheというWebサーバーソフトの「バーチャルホスト機能」を利用します

バーチャルホスト機能と聞くとなんだか難しそうに感じますが、実際にやってみるとそんなことはありません。数十分でササッと作れてしまいます。

ただ手順は少し特殊なので、ここではバーチャルホスト機能で複数サイトを立ち上げる手順をなるべく分かりやすく解説していきます。

バーチャルホスト機能とは

バーチャルホストと聞くと難しそうな感じですが、これは一台のサーバー(ここではXAMPPをインストールしたPC)で複数のドメインを運用する技術のこと

例えば複数のドメインを使ってサイトを作りたい場合、基本的には1つのドメインが1つ以上のサーバーで運用されていることが多いです。

例えば次の図のように「xxx.com」というドメインをサーバーA・サーバーB・サーバーCの3つで管理していると考えると分かりやすいでしょう。

1つのドメインを複数サーバーで管理しているイメージ図

バーチャルホスト機能では逆に次の図のように1つのサーバーコンピューターに対して複数のドメインを割り当てることができます。

1つのサーバー(PC)で複数ドメインを管理しているイメージ図

上の図ではサーバーとなっていますが、XAMPPに含まれるApacheというソフトウェアを使えば普通のコンピューター上でも同じことが可能です。

ただこれはXAMPPの機能ではないので複数ドメインを作成したり、その複数ドメインを1つのIPアドレスに割り当てるという作業は全て自分で行わなくてはなりません。

と言っても機能を使うには決められたことをするだけでいいので、それほど面倒な手順でもありません。正しい手順を踏めば数十分ほどしかかからないと思います。

複数ドメインの追加手順

ではバーチャルホスト機能を使って複数ドメインを追加してみましょう。

XAMPPでは「localhost」が初期ドメイン名になっています。ここではこれに加えてexample.test」というドメイン(.testはテスト用のドメイン)を追加してみようと思います

その手順は次の4つです。

  1. 2つめのドメイン用のルートフォルダを作る
  2. httpd-vhosts.confでバーチャルホストを有効化
  3. httpd-vhosts.confにドメインを追加
  4. hostsファイルにドメインを追加

この4つの手順を順に説明していきます。

2つめのドメイン用のルートフォルダを作る

まず「localhost」とは別の2つめのドメイン(local.example)用のルートフォルダを作ります。

ではどこにフォルダを作ればいいかというXAMPPのインストールフォルダが「C:\xampp」だった場合「C:\xampp\htdocs」以下に新しいフォルダを作成してください。

C:\xampp\htdocs以下にドメイン用のフォルダを作る

ここでは作成するドメインに合わせてフォルダ名も「example.test」にしています。

必ずしもドメイン名と同じにする必要はなくフォルダ名は好きな名前でかまいません。ただ同じにしておくと後で管理しやすくなると思います。

httpd-vhosts.confでバーチャルホストを有効化

次にバーチャルホスト機能を有効にするためにhttpd-vhosts.conf」というファイルを開いて、機能をONにしましょう

httpd-vhosts.confはxamppのインストール先が「C:\xampp」だった場合、「C:\xampp\apache\conf\extra」フォルダ以下にあるので適当なエディタで開いてください。

httpd-vhosts.confを開く

開いたら次の行を探しましょう。20行目付近にあると思います。

##NameVirtualHost *:80

この行は最初に##がついてコメントアウトされているので、次のようにコメントアウトを解除しましょう

NameVirtualHost *:80

そしてファイルを保存すればバーチャルホスト機能が有効になります。

httpd-vhosts.confにドメインを追加

バーチャルホストを有効にしてもまだhttpd-vhosts.confは閉じないでください。

次にその中にドメイン情報を追加します。

ではhttpd-vhosts.confの最後に次のような内容を追加しましょう。

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</VirtualHost>
 
<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/example.test"
    ServerName example.test
</VirtualHost>

1~4行目では「localhost」用のドメイン情報、6~9行目では新しく追加したい「exampe.test」用のドメイン情報を追加しています。

各ドメイン情報は「VirtualHost」というタグで囲まれていて、その中で次の2つの情報を指定しています。

  • DocumentRoot
    ドメインの一番上のルートフォルダのパス
  • ServerName
    ルートフォルダに紐づけられるドメイン名

もしXAMPPのインストールが「C:\xampp」ならDocumentRootもServerNameも変更する必要はありませんが、もしそれ以外の場所にインストールしてあるならDocumentRootのパスは適切なものに変更してください

以上の内容を追加して保存すれば2つのドメインが使用可能になります。

hostsファイルにドメインを追加

ドメイン情報を追加しただけでは実際にドメインにはまだアクセスできません。

Windowsの場合は「hosts」ファイルというホスト名を管理するファイルがあり、その中にIPアドレスとホスト名(ここではドメイン名)の対応関係を知らせてあげなくてはなりません

hostsファイルは「C:\WINDOWS\system32\drivers\etc」フォルダ以下にあります

ただし、じゃあそれを開いて編集しようと思っても普通の方法では編集できません。次の手順でメモ帳に管理者権限を与えて開きましょう。

まず「Windowsキー + Rキー」を同時押しして次のような「ファイル名を指定して実行」ダイアログを開きます。

「Windowsキー + Rキー」を同時押しで「ファイル名を指定して実行」ダイアログを開く

そして「名前」の横にある欄に「cmd」と入力してOKボタンを押します。

「ファイル名を指定して実行」ダイアログに「cmd」を入力

するとコマンドプロンプト(背景が黒いウィンドウ)が出てくるので次のコマンドを入力してhostsファイルをメモ帳で開きましょう。

コマンドプロンプトから管理者権限でhostsファイルをメモ帳で開く

powershell -NoProfile -ExecutionPolicy unrestricted -Command "start notepad C:\Windows\System32\drivers\etc\hosts -verb runas"

メモ帳が起動したらファイルの最後に次の内容を追加します。

127.0.0.1 localhost
127.0.0.1 example.test

追加したらファイルを保存しましょう。

これでPC上で「localhost」と「example.test」の2つのドメインが利用できるようになります。

新しいサイトにアクセスしてみよう

これで新しいドメインが追加され「localhost」とは別のサイトができたはずなので、正しく追加できたか確かめるためにアクセスしてみましょう。

ただしその前にXAMPPを再起動しておきましょう。

ApacheとMySQLが次のように起動した状態ならどちらも「Stop」ボタンを押して一旦終了させた方がいいです。

XAMPPコントロールパネルでApacheとMySQLを再起動

どちらとも停止したらもう一度「Start」ボタンを押して再開させましょう。

再起動したら新しく作ったドメイン「example.test」が有効かどうかブラウザのURL欄にそのドメインを打ち込んで確かめます。

ローカルPC上で新しく作成したドメイン「example.test」にブラウザ上からアクセス

アクセスして次のようにエラーメッセージ(Error 404など)が表示されなければ成功です

ブラウザ上で404エラーなどが表示されなければXAMPPでのドメイン追加は成功

あとは同じ手順でいくらでもサイトを追加できます。お疲れ様でした。

まとめ

以上、XAMPPで複数サイトを立ち上げる手順についてでした。

「httpd-vhosts.conf」とか「hosts」ファイルとかを編集する手順がある分、少し難しいかもしれません。

でも手順は決まっていて一回大まかなやり方さえ覚えておけば後はいくらでもサイトを追加できます。とりあえず挑戦してみることが大事ですね。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press