バーチャルホストを別フォルダに構築する

2014/2/6 XAMPP

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0

この記事のタイトルは、最初は「XAMPPで複数のサイトを構築①」でした。しかし、当初考えていたXAMPPによるバーチャルホストでのサイト構築に成功したものの、自分で利用する気にならない体裁のものになってしまいました。ですのでタイトルを改めて一部書き直しました。そして自分が利用している方法については、改めて別の記事にしたいと思います。

7月にXAMPPを導入して自分のパソコンにWordPressのテスト環境を構築した。最初はデフォルトで設定された方法で導入したのだが、私が管理している二つのサイトをそのままの形でXAMPPに持ってくることにした。そのためには、まずXAMPPをバーチャルホストに対応させる必要があることが判明した。従って、取り敢えずバーチャルホスト機能を導入することにチャレンジしてみた。

「二つのサイトをそのままの形」とさりげなく書いたが、実はかなり苦労した（する：現在進行形）作業である。今回はXAMPPにバーチャルホスト機能を導入するという作業だが、それがうまく行ったら今度は二つのサイトのバックアップデータをXAMPP内にリストアする必要がある。これを書いている時点ではそのことに成功していないが、バーチャルホストの導入でリストアも成功する可能性が見えてきた。従って、バーチャルホストの導入について先に記事にすることとした。

XAMPPへのバーチャルホスト機能導入

xampp-logo

XAMPP LOGO

バーチャルホストとは何か

バーチャルホストは実際のディレクトリー構造とは別に仮想的なディレクトリー構成とする手法である。・・・という説明は専門家が見るとけちをつけられそうだが、当方はまったくの素人であり、ところどころ間違ったことを記述するかもしれないことを先に申し上げておく。ただ、この記事は素人が素人なりに取り組んできた結果を記しており、素人が素人であるがゆえに躓いたところを明らかにすることを目指している。

さて、本題に戻ると、バーチャルホスト構築について書いている殆どの記事は、WAMPPディレクトリー直下にドキュメントルートを置くものであった。ドキュメントルートとはサイト（ホスト）のコンテンツを置いてあるディレクトリーである。デフォルトではホスト名がlocalhost、そのドキュメントルートは「c:/xampp/htdocs」となっている。ブラウザで「http://localhost/index.html」と打ち込むと、「It works!」と表示されるはずである。つまり、localhostがxampp/htdocs/に置き換えられて処理されているのである。

バーチャルホストの構築環境

バーチャルホストを導入する私のシステム環境は以下の通り。

  • パソコンのOS：Windows 7
  • WordPress：3.6.1
  • XAMPP：3.2.1
  • XAMPPのインストール先：c:/xampp

バーチャルホストとドキュメントルートの関係は下記の通り。

  • localhostはデフォルトのまま残す
  • ホスト名はlocalhost1とlocalhost2
  • ドキュメントルートのディレクトリー名はtest1とtest2

準備作業①

まず、ドキュメントルートとなるディレクトリーを作成し、表示テスト用のindex.htmlをその中に用意しておく。ここでポイントとなるのは、ドキュメントルートの直下にhtdocsというホルダを作成し、その中に用意したindex.htmlを入れておくことである。この部分を明示的に説明した記事がなく、素人であるが故に躓いた部分であった。具体的には以下のようにする。

  • localhost1のindex.htmlを置く場所⇒c:/xampp-t/test1/htdocs/（ここに置く）
  • localhost2のindex.htmlを置く場所⇒c:/xampp-t/test2/htdocs/(ここに置く)

index.htmlは、上の説明で使用した「It works!」と表示されるものを利用する。c:/xampp/htdocsの中にあるindex.htmlをテキストエディッタで開き、置いてあるディレクトリーが明示されるような文面に変更して使用する。

バーチャルホスト導入の記事の中には、実際には成功していない方法を記述したものがあった。確認作業で「http://localhost1」と打ち込んでも「It Works!」しか表示されず、成功したかのように見えても実際はデフォルトのlocalhostのドキュメントルートを表示していたのである。従って、どうでも良いと思われがちな確認用のindex.htmlだが、上記のようにしておくことをお勧めする。

準備作業②

次に修正するファイルをテキストエディターで開き、デスクトップあたりに保存しておく。修正対象となるファイルは、以下の場所にある3つのファイル。XAMPPをCドライブ直下にインストールいた場合を例にしている。

  1. c:/examp/apache/conf/httpd.conf
  2. c:/exampp/appache/conf/extra/httpd-vhosts.conf
  3. c:/windows/system32/drivers/etc/hosts

ここで注意しなければならないのは3のファイルはシステムファイルであり、管理者権限がないと修正できないことである、使用しているテキストエディターの管理者権限の持たせ方は、別途調べて対応願いたく。

3つのファイルをデスクトップなどに残しておくのは、問題があったときに直ぐに元に戻すことができるからである。また、ファイルを修正する場合はバックアップしたファイルではなく、本来のファイルに対して行うほうが良い。「上書き保存」で簡単に修正ファイルと置き換えることが可能である。同じような作業を繰り返すことから、何が何だか分からなくなることが多かったことによる。

XAMPPを停止する

ここからファイルの編集に入るが、作業はTeraPad（他のテキストエディターでも可）で直接ファイルを書き換えることになる。従って、XAMPPを起動しておく必要はなく、起動している場合は終了させて作業を行うこととする。

XAMPPを起動したままで修正作業を行っても良い。但し、ファイル修正後に必ず再起動する必要がある。場合によっては再起動しないことがあるらしく、私の場合はXAMPPは起動しないまま、もしくは終了させて以下の作業を行った。

httpd.confの編集

httpd.confの修正は、バーチャルホストの機能を有効にする作業である（と思う）。httpd.confをテキストエディタで開き、以下の記述を探す。

#LoadModule vhost_alias_module modules/mod_vhost_alias.so

そして文頭にある#を削除する。

LoadModule vhost_alias_module modules/mod_vhost_alias.so

として上書き保存する。

文頭にある#はコメントアウトする記号。コメントアウトとはそこにあるプログラムの構文を無効にするものであり、この後の作業でも一杯出てくる。XAMPPは、デフォルトではバーチャルホストの機能は停止されていることから、その機能を有効にして自分の設定に合わせるというのが今回の作業になる。

httpd-vhosts.confの編集

httpd-vhosts.confの修正は、以下の二つの作業を行うことになる。

  1. バーチャルホストの自分用の設定
  2. バーチャルホストへのアクセス許可

httpd-vhosts.confのファイルはあまり大きくないことから、以下に全文をコピーして表示する。

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
##NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ##ServerName or ##ServerAlias in any <VirtualHost> block.
#
##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host.example.com"
    ##ServerName dummy-host.example.com
    ##ServerAlias www.dummy-host.example.com
    ##ErrorLog "logs/dummy-host.example.com-error.log"
    ##CustomLog "logs/dummy-host.example.com-access.log" common
##</VirtualHost>

##<VirtualHost *:80>
    ##ServerAdmin webmaster@dummy-host2.example.com
    ##DocumentRoot "C:/xampp/htdocs/dummy-host2.example.com"
    ##ServerName dummy-host2.example.com
    ##ErrorLog "logs/dummy-host2.example.com-error.log"
    ##CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>

1の作業は、20行目にある「##NameVirtualHost *:80」の頭にある##を削除してバーチャルホストの自分の設定が有効になるようにする。

NameVirtualHost *:80

そして、その下にある例文に従って、自分が設定したホスト名とドキュメントルートを記述する。デフォルトで設定したlocalhostも新たにバーチャルホストとして設定しなおすことから、localhostについても以下のような記述とする。例文のうちの2構文しか使用していないが、それで問題ないようである。

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

localhost1の場合は、以下のような構文となる。localhost2の記述も基本は同じ。

<VirtualHost *:80>
    DocumentRoot "C:/xampp-t/test1/htdocs"
    ServerName localhost1
</VirtualHost>

そして2の作業は、二つのバーチャルホストへのアクセスを許可する記述を付け加える。その例文は最初のhttpd-vhosts.confの中にあるのだが、不要な例文が大量にあるので必要な部分を抜き出したものが下記の構文である。

<Directory "C:/xampp-t/test1/htdocs">
        ##Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
</Directory>

この設定はlocalhost1とlocalhost2の双方について行うことから、localhost1の場合は以下のように記述する。

<VirtualHost *:80>
    DocumentRoot "C:/xampp-t/test1/htdocs"
    ServerName apple
    <Directory "C:/xampp-t/test1/htdocs">
        ##Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

この構文の追加はlocalhost2にも行うが、デフォルトのlocalhostには必要ない。例文としてhttpd-vhosts.confから持ってきた構文がlocalhost用の記述である（らしい）。

以上、詳しく述べてきたが、XAMPPの仕組みを理解することはインターネットやネットワークの仕組みを理解することに繋がるのではないかと思うようになった。従って、少しくどいかも知れないが、作業の流れを説明させてもらった。最終的にはこの後に掲載した構文をコピペし、自分の設定に合わせることで問題ないと思われる。

以下、これまでの記述をまとめたものである。私の場合、修正前のhttpd-vhosts.confの# Use name-based virtual hosting.以降を削除し、以下の記述を追加した。

NameVirtualHost *:80

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

<VirtualHost *:80>
    DocumentRoot "C:/xampp-t/test1/htdocs"
    ServerName localhost1
    <Directory "C:/xampp-t/test1/htdocs">
        ##Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "C:/xampp-t/test2/htdocs"
    ServerName localhost2
    <Directory "C:/xampp-t/test2/htdocs">
        ##Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

hostsの編集

最後にhostsファイルの修正であるが、hostsはインターネット上のDNS（Domain Name System）と同じ働きをいている（らしい）。ブラウザに打ち込まれたホストの行き先をここで指定している。と言いつつも、指定する先は自分のPCである。hostsを管理者権限を持ったテキストエディターで開くと、以下のようになっている。

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#	127.0.0.1       localhost
#	::1             localhost

最後の部分を以下のように書き換えて上書き保存するだけでこの作業は終わりとなる。

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.

127.0.0.1       localhost
127.0.0.1       localhost1
127.0.0.1       localhost2

最終確認

停止していたXAMPPを起動させ、バーチャルホストの設定が正しくされたか否かを確認するためにブラウザで以下のように打ち込んで夫夫のドキュメントルートにおいたindex.htmlが表示されることを確認する。

  • http://localhost/index.html⇒XAMPPが用意している「It works!」表示
  • http://localhost1/index.html⇒test1/htdocs下に置いたindex.html
  • http://localhost2/index.html⇒test1/htdocs下に置いたindex.html

その後、test1とtest2の下にあるhtdocsに、デフォルトで作成したhtdocs内のフォルダやファイルをごっそりコピーする。そうすることでデフォルトのhtdocs内で行ったことをtest1/htdocsやtest2/htdocsでも行えるようになる。

この後バーチャルホスト内でバックアップデータをリストアしたのですが、この方法だとtest1とtest2の下にそれぞれhtdocsがぶら下がることになり、デフォルトのものを加えて同じようなフォルダ/ファイルが詰まったものが3つになってしまいます。私の場合はそこにWordPressのフォルダ/ファイルも詰め込んでいることから、逆にXAMPPのバックアップデータをサイト上でリストアする場合、フォルダ/ファイルの切り分けが非常に難しくなることが予想されます。そこで現在、そうしなくて良い方法がないか、鋭意努力中です。見つかり次第、記事にしたいと思っております。

広告
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

管理者

広告

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>