Tokyo O life – ずばぴたテック

MacでWeb開発-(6) XAMPP for MacでWebサイトを運営（VirtualHost）

5月 3rd, 2008

　XAMPPでブログ、Wiki、SNSなど複数のサービスを運用したい場合は、「VirtualHost」の設定が必要になる。
「VirtualHost」とは、1台のWebサーバで複数のWebサイトを運用するためのApacheの機能だ。
運用する各Webサイトは、ドメイン名が異なっていればIPアドレスは1つでいい。これを「名前ベースのVirtualHost」という。
（iモードなどケータイ電話のブラウザは名前ベースのVirtualHostに対応しておらず、個別のIPアドレスが必要なものもある）

ここでは、仮に以下のような構成で複数のWebサイトを運用する設定を紹介する。
なお、各ドメイン名は、XAMPPが動作しているMacのIPアドレスに割り当てられていることが前提だ。
トップページとブログのDocumentRootは、自分の（下記の例ではユーザー「tomoyun」）のホームディレクトリの下に置くことにする。

Webサイト	ドメイン名	URL	DocumentRoot
トップページ	www.mydomain.jp	http://www.mydomain.jp/	/Users/tomoyun/Web/www
ブログ	blog.mydomain.jp	http://blog.mydomain.jp/	/Users/tomoyun/Web/blog
XAMPP管理ページ	localhost	http://localhost/	/Applications/xampp/xamppfiles/htdocs
ユーザーページ	www.mydomain.jp	http://www.mydomain.jp/~（ユーザー名）/	/Users/（ユーザー名）/Sites

「トップページ」「ブログ」と便宜的に名前は付けているが、実際にコンテンツやサービスを作るわけではない。

今回は、動作確認用の簡単なHTMLを表示するだけだ。

修正する設定ファイル

VirtualHostの設定は、Apacheの設定ファイル「httpd.conf」に書き込む。最近のApacheでは、メンテナンスしやすいようにVirtualHostを別のファイルで設定し、httpd.confのInclude命令で読み込むようになっている。
XAMPP for MacOS X の場合は、VirtualHostを利用するために下記の2つのファイルを書き換える。

Apapcheの設定ファイル	/Applications/xampp/etc/httpd.conf
VirtualHostの設定ファイル	/Applications/xampp/etc/extra/httpd-vhosts.conf

各DocumentRootフォルダとHTMLの準備

各WebサイトのDocumentRootフォルダを作成する。
——————————————–
$ mkdir /Users/tomoyun/Web
$ mkdir /Users/tomoyun/Web/www
$ mkdir /Users/tomoyun/Web/blog
——————————————–

実行例）

動作確認用にダミーのHTMLをテキストエディタで作って、各DocumentRoot内に保存する。

・トップページ用確認HTML
ファイル名：/Users/tomoyun/Web/www/index.html

・ブログ用確認HTML
ファイル名：/Users/tomoyun/Web/blog/index.html

httpd.confの修正

httpd-vhosts.confのInclude（読み込み）は、httpd.confの482行目にある（インストール直後の場合）。

行頭のコメントマーク「#」を削除すれば、httpd-vhosts.confが読み込まれるようになる。
————————————————————————————-
# Virtual hosts
#Include /Applications/xampp/etc/extra/httpd-vhosts.conf
↓
# Virtual hosts
Include /Applications/xampp/etc/extra/httpd-vhosts.conf
————————————————————————————-

修正結果

httpd-vhosts.confの修正

インストール直後のhttpd-vhosts.confには、VirtualHostの設定例書かれている。

VirtualHostの設定の基本は、下記のようになっている。
————————————————————————————-
<VirtualHost *:80>
ServerAdmin Webサイト管理者のメールアドレス
DocumentRoot “DocumentRootのフォルダ”
ServerName Webサイトのドメイン名
ErrorLog “エラーログのファイル名”
CustomLog “アクセスログのファイル名” ログのフォーマット名
</VirtualHost>
————————————————————————————-

これを運用するWebサイトの数だけ書き並べる。
サーバのドメイン名ではなくIPアドレスでアクセスされた場合は、一番最初のVirtualHostが使用される。

————————————————————————————-
<VirtualHost *:80>
ServerAdmin tomoyun@mydomain.jp
DocumentRoot /Users/tomoyun/Web/www
ServerName www.mydomain.jp
ErrorLog logs/www.mydomain.jp-error_log
CustomLog logs/www.mydomain.jp-access_log common

</VirtualHost>

<VirtualHost *:80>
ServerAdmin tomoyun@mydomain.jp
DocumentRoot /Users/tomoyun/Web/blog
ServerName blog.mydomain.jp
ErrorLog logs/blog.mydomain.jp-error_log
CustomLog logs/blog.mydomain.jp-access_log common

</VirtualHost>

<VirtualHost *:80>
ServerAdmin tomoyun@mydomain.jp
DocumentRoot /Applications/xampp/xamppfiles/htdocs
ServerName localhost
ErrorLog logs/localhost-error_log
CustomLog logs/localhost-access_log common

</VirtualHost>

————————————————————————————-

さらに「/Users/tomoyun/Web」以下への外部からのアクセスを許可する。
————————————————————————————-
<Directory “/Users/tomoyun/Web”>
AllowOverride None
Options None
Order allow,deny
Allow from all
</Directory>
————————————————————————————-

設定例）

設定を保存できたら、ターミナルで下記のように入力して、問題がないか確認する。
————————————————————————————-
$ /Applications/xampp/xamppfiles/bin/apachectl configtest
————————————————————————————-

実行例）

XAMPP Control PanelでApacheをリロードする。

動作確認

外部からWebブラウザでアクセスして、動作を確認する。

http://www.mydomain.jp/

http://blog.mydomain.jp/

http://localhost/

（管理ページ）

http://www.mydomain.jp/~tomoyun/

（ユーザーページ）

これで、VirtualHostによるWebサイトの運営が可能になった。
あとは、各DocumentRoot内にコンテンツやサービスを置くだけだ。

以上。

関連記事

• MacでWeb開発-(1) XAMPP for Macの環境設置
• MacでWeb開発-(2) XAMPP for MacにPostgreSQLを追加
• MacでWeb開発-(3) XAMPP for MacのPHPの環境設定
• MacでWeb開発-(4) XAMPP for MacのApacheの設定確認
• MacでWeb開発-(5) XAMPP for Macの管理画面へのアクセス制限
• MacでWeb開発-(6) XAMPP for MacでWebサイトを運営（VirtualHost）
• MacでWeb開発-(7) XAMPP for Macでブログを運営（WordPress）
• MacでWeb開発-(8) XAMPP for MacでWikiを運営（PukiWiki）
• MacでWeb開発-(9) XAMPP for MacでSNSを運営（OpenPNE）
• MacでWeb開発-(10) XAMPPにQuictyフレームワークを設置
• Macを買ったら入れるソフト- (5) UNIX環境編
• MacPortsの使い方

関連記事

• MacでWeb開発-(4) XAMPP for MacのApacheの設定確認
• MacでWeb開発-(5) XAMPP for Macの管理画面へのアクセス制限
• MacでWeb開発-(8) XAMPP for MacでWikiを運営（PukiWiki）
• MacでWeb開発-(7) XAMPP for Macでブログを運営（WordPress）
• MacでWeb開発-(10) XAMPPにQuictyフレームワークを設置

カテゴリー: Apapche, Mac, XAMPP

コメントをどうぞ