第1回WordPressお茶会 – WordBench香川 – XAMPPの環境設定(ドキュメントルートの確認)

XAMPPのインストールが完了したのでローカルサーバ環境を構築できるようになりました。
実際にサーバを起動してサンプルを用い表示確認をしてみたいと思いますが、その前にドキュメントルートについて説明しておきます。

ドキュメントルート(Document Root)について

標準でHTMLやPHPファイルを入れる場所は C:¥xampp¥htdocs¥ となり(OSインストール先がcドライブの場合)、このフォルダを ドキュメントルート(Document Root)と呼びます。
レンタルサーバによって異なりますが “example.com/public_html/” や “www/htdocs/”に当たる部分と考えて頂ければいいと思います。
ドキュメントルートに保存したファイルへのアクセスはブラウザから http://localhost/ または http://127.0.0.1/ となります。

では実際に表示を確認したいと思います。
まずXAMPPコントロールパネルからApacheとMySQL(今は必要ありませんが後の作業の為)を開始します。

以下のソースをテキストエディタに入力し sample.php で C:¥xampp¥htdocs¥ に保存、http://localhost/sample.php にアクセスすると “Hello WordPress” の表示が確認できると思います。

[sample.php]

	<?php
		echo "Hello WordPress";
	

ドキュメントルートまとめ
ブラウザのリクエストURL http://localhost/sample.php
コンテンツの保存先 C:¥xampp¥htdocs¥sample.php

実習では C:¥xampp¥htdocs¥ 以下にフォルダを作成してそのフォルダを1つのウェブサイトとしてWordPressを構築していきます。
ただ、このままでは以下の様にサブディレクトリ形式となり、独自ドメインでの運用を想定した時に違和感を感じてしまいます。

ウェブサイトhoge http://localhost/hoge/
ウェブサイトhuga http://localhost/huga/

そこでバーチャルホストの設定をして以下の様に独自ドメインでの運用と同様のURLでアクセスできるようにしたいと思います。

ウェブサイトhoge http://hoge/
ウェブサイトhuga http://huga/

バーチャルホストの設定

バーチャルホストという用語は、1 台のマシン上で (www.company1.com and www.company2.com のような) 二つ以上のウェブサイトを扱う運用方法のことを指します。 バーチャルホストには、各ウェブサイトに違う IP アドレスがある 「IP ベース」と、それぞれの IP アドレスに 複数の名前がある「名前ベース」とがあります。 複数のサイトが物理的に同じサーバで扱われている、ということはエンドユーザには 明らかではありません。
Apache バーチャルホスト説明書

上記引用の通りバーチャルホストは1台のマシン上で複数のウェブサイトを扱う運用方法です。今回は「名前ベース」の手法を用い、127.0.0.1(ループバックアドレス:ネットワーク上における自分自身の仮想的なアドレス)に複数のホスト名を設定したいと思います。

編集が必要なファイルは以下2つ、hosts ファイル(IPアドレスとホスト名の対応を記述したテキストファイル)と httpd.conf(Apacheの設定ファイル)です。

  • C:¥Windows¥System32¥drivers¥etc¥hosts
  • C:¥xampp¥apache¥conf¥httpd.conf

また、前提として C:¥xampp¥htdocs¥ に wbkagawa フォルダを作成、先ほどの sample.php を index.php にリネームし wbkagawa フォルダに移動、http://wbkagawa/ でこれが閲覧できるように設定します。

hosts ファイル

Windows7 64bit環境(Vista環境)では hosts ファイル編集に管理者権限がとなります。hosts ファイルに関してはメモ帳で編集可能なのでメモ帳を使用します。

まず、”メモ帳アイコン上で右クリック > 管理者として実行”

ユーザーアカウント制御ダイアログが出るので「はい」をクリック。

“ファイル > 開く” から hosts ファイルがあるディレクトリまで辿り、「テキスト文書(*.txt)」を「すべてのファイル(*.*)」に変更。ファイル一覧が出てくるので hosts ファイルを選択し「開く」。

“127.0.0.1 wbkagawa”を追加して上書き保存で hosts ファイル編集完了です。

[hosts]

		127.0.0.1	localhost
		::1 		localhost
		127.0.0.1 	wbkagawa
		

httpd.conf

テキストエディタで httpd.conf を開き一番下に以下ソースを追加します。

[httpd.conf]

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

1行目の NameVirtualHost ディレクティブは名前ベースのバーチャルホストを用いる時に必要で、バーチャルホストのためのIPアドレスを指定しています。
今回はすべてのIPアドレスを受け入れ80ポートを指定しています。
NameVirtualHost ディレクティブ

3-6,8-11行目で、扱うホスト名に対して VirtualHost を作成しています。 VirtualHost ディレクティブの引数は NameVirtualHost ディレクティブで指定した引数 *:80 に正確に合っている必要があ ります。

そして VirtualHost の中に各ホスト名に関しての設定を記述しています。
設定項目は最低限必要な、どのホスト名が扱われるかを示す ServerName ディレクティブ(hosts ファイルで設定したホスト名)、そのホスト名のドキュメントルートの場所を示す DocumentRoot ディレクティブとなります。

また、既存サーバにバーチャルホストを設定するとメインホストがなくなるため、1つ目の VirtualHost で再定義しています。
名前ベースのバーチャルホスト

XAMPPコントロールパネルからApacheを再起動して、ブラウザで http://wbkagawa/ へアクセスすると “Hello WordPress” の表示が確認できると思います。

以上でローカル環境でサーバが動作しているのが確認できたと思います。
ただ、XAMPP環境設定がデフォルトのままだとセキュリティに問題があるので次はXAMPPの環境設定(セキュリティ設定)を行なっていきます。

第1回WordPressお茶会 – WordBench香川 – MAMPの環境設定(ドキュメントルートの確認)

MAMPのインストールが完了したのでローカルサーバ環境を構築できるようになりました。
実際にサーバを起動してサンプルを用い表示確認をしてみたいと思いますが、その前にドキュメントルートについて説明しておきます。

ドキュメントルート(Document Root)について

標準でHTMLやPHPファイルを入れる場所は /Applications/MAMP/htdocs となり、このフォルダを ドキュメントルート(Document Root)と呼びます。
レンタルサーバによって異なりますが “example.com/public_html/” や “www/htdocs/”に当たる部分と考えて頂ければいいと思います。
ドキュメントルートに保存したファイルへのアクセスはブラウザから http://localhost/ または http://127.0.0.1/ となります。

現在のドキュメントルートの場所は MAMPコントロールパネル > 環境設定 > Apacheタブ から確認できます。

では実際に表示を確認したいと思います。
以下のソースを /Applications/MAMP/htdocs/ に保存し、http://localhost/sample.php にアクセスすると “Hello WordPress” の表示が確認できると思います。

[sample.php]

	<?php
		echo "Hello WordPress";
	

ドキュメントルートまとめ
ブラウザのリクエストURL http://localhost/sample.php
コンテンツの保存先 /Applications/MAMP/htdocs/sample.php

実習では /Applications/MAMP/htdocs/ 以下にフォルダを作成してそのフォルダを1つのウェブサイトとしてWordPressを構築していきます。

ただ、このままでは以下の様にサブディレクトリ形式となり、独自ドメインでの運用を想定した時に違和感を感じてしまいます。

ウェブサイトhoge http://localhost/hoge/
ウェブサイトhuga http://localhost/huga/

そこでバーチャルホストの設定をして以下の様に独自ドメインでの運用と同様のURLでアクセスできるようにしたいと思います。

ウェブサイトhoge http://hoge/
ウェブサイトhuga http://huga/

バーチャルホストの設定

バーチャルホストという用語は、1 台のマシン上で (www.company1.com and www.company2.com のような) 二つ以上のウェブサイトを扱う運用方法のことを指します。 バーチャルホストには、各ウェブサイトに違う IP アドレスがある 「IP ベース」と、それぞれの IP アドレスに 複数の名前がある「名前ベース」とがあります。 複数のサイトが物理的に同じサーバで扱われている、ということはエンドユーザには 明らかではありません。
Apache バーチャルホスト説明書

上記引用の通りバーチャルホストは1台のマシン上で複数のウェブサイトを扱う運用方法です。今回は「名前ベース」の手法を用い、127.0.0.1(ループバックアドレス:ネットワーク上における自分自身の仮想的なアドレス)に複数のホスト名を設定したいと思います。

編集が必要なファイルは以下2つ、hosts ファイル(IPアドレスとホスト名の対応を記述したテキストファイル)と httpd.conf(Apacheの設定ファイル)です。

  • /private/etc/hosts
  • /Applications/MAMP/conf/apache/httpd.conf

また、前提として /Applications/MAMP/htdocs/ に wbkagawa フォルダを作成、先ほどの sample.php を index.php にリネームし wbkagawa フォルダに移動、http://wbkagawa/ でこれが閲覧できるように設定します。

hosts ファイル

“メニューバーの移動 > フォルダへ移動…”、 /etc/ と入力して「移動」をクリック。

etc フォルダ内に hosts ファイルがあるのでテキストエディタで開きます。
“127.0.0.1 wbkagawa”を追加して上書き保存で hosts ファイル編集完了です。

[hosts]

		127.0.0.1		localhost
		127.0.0.1 		wbkagawa
		255.255.255.255 broadcasthost
		::1 			localhost
		fe80::1%1o0 	localhost
		

httpd.conf

テキストエディタで httpd.conf を開き一番下に以下ソースを追加します。

[httpd.conf]

		NameVirtualHost *:80
	
		<VirtualHost *:80>
		DocumentRoot "/Applications/MAMP/htdocs/"
		ServerName localhost
		</VirtualHost>
		
		<VirtualHost *:80>
		DocumentRoot "/Applications/MAMP/htdocs/wbkagawa/"
		ServerName wbkagawa
		</VirtualHost>
		

1行目の NameVirtualHost ディレクティブは名前ベースのバーチャルホストを用いる時に必要で、バーチャルホストのためのIPアドレスを指定しています。
今回はすべてのIPアドレスを受け入れ80ポートを指定しています。
NameVirtualHost ディレクティブ

3-6,8-11行目で、扱うホスト名に対して VirtualHost を作成しています。 VirtualHost ディレクティブの引数は NameVirtualHost ディレクティブで指定した引数 *:80 に正確に合っている必要があ ります。

そして VirtualHost の中に各ホスト名に関しての設定を記述しています。
設定項目は最低限必要な、どのホスト名が扱われるかを示す ServerName ディレクティブ(hosts ファイルで設定したホスト名)、そのホスト名のドキュメントルートの場所を示す DocumentRoot ディレクティブとなります。

また、既存サーバにバーチャルホストを設定するとメインホストがなくなるため、1つ目の VirtualHost で再定義しています。
名前ベースのバーチャルホスト

MAMPコントロールパネルからサーバを再起動して、ブラウザで http://wbkagawa/ へアクセスすると “Hello WordPress” の表示が確認できると思います。

以上でサーバ環境は整いましたがデフォルトのMAMPの設定では外部からアクセス可能のままですので次はMAMPの環境設定(外部からのアクセス制限設定)を行なっていきます。

第1回WordPressお茶会 – WordBench香川 – MAMPの環境設定(使用ポートの変更)

MAMPのデフォルト設定ではApacheのポートが8888のためURLが以下のようになっているので、Apacheの標準ポートの80に変更することでポート番号の指定を省略することができます。


MAMPのコントロールパネルで「環境設定」をクリック。

「ポート」タブを開き「ApacheとMySQLの標準ポートに設定」をクリック。
Apacheのポート:80、MySQLのポート:3306に変更されるので「OK」をクリック。
自動的にサーバが再起動され「スタートページを開く」をクリックすると http://localhost/MAMP/ でスタートページが開きます。
※Apacheの使用ポートを1024以下にするとMAMP起動・終了時にroot権限のパスワードを求められるようになります。

※Mac OS XにはApacheがデフォルトで搭載されておりこちらが起動された状態だと80ポートが競合するので停止する必要があります。
システム環境設定 > インターネットとワイヤレス > 共有

「Web共有」にチェックが入っていたら外します。

また、自身でMySQLを導入して起動している場合も3306ポートが競合すると思いますので同様に システム環境設定 > MySQL より停止してください。

次はMAMPの環境設定(ドキュメントルートの確認)を行なってきます。