大家メモ/MAMP/Mac OSXローカルにMAMPでサイト制作環境を構築の編集

タイムスタンプを変更しない

#topicpath

*Mac OSXローカルにMAMPでサイト制作環境を構築 [#ze06d85c]

**目次 [#acd8c0b1]
#contents

**目的 [#i4a82398]
通常サイトを制作している中で困ることはいくつかありますが、ここでは以下のような点をローカルにMAMPで環境を用意して確認できるようしたい思います。

-ルートからのパスで記述されている場合でも、ローカルで意図したとおりの表示、あるいはリンクが確認できるようにしたい
-SSIを使用しているサイトもローカルで確認できるようにしておきたい。さらにSSIの拡張子もshtmlではなくhtmlでも確認できるようにしたい

また、上記とは別に問題となるのが、複数のサイト制作が同時に進行している場合に、サイトごとにルートからのパスで記述された内容を確認できる環境が欲しい、ということです。

デフォルトのままだとMAMPのDocument Rootは
 /Applications/MAMP/htdocs
のみとなっており、複数のサイト制作をしている場合、その都度Document Rootの設定を変更するのは面倒なことになってきます。
そこで

-Virtual Host（バーチャルホスト）を用いて複数のサイトを確認できるようにしたい

という点も解決したいと思います。

また、あわせて

-Movable Type（CMS）をローカルで確認したい
-Zen Cart（ショッピングカートシステム）をローカルで確認したい

という点も、MAMPというアプリケーションを用いて解決していこうと思います。

**MAMPのダウンロード [#f9b4bf20]
[[MAMPのサポートサイト:http://www.mamp.info/en/index.php]]よりMAMPを[[ダウンロード:http://www.mamp.info/en/download.html]]します。
なお、今回は ''Mac OS：OSX 10.5'' の環境にて作業を行ってます。

**MAMPのインストール [#xbf0d414]
ダウンロードしたmamp_1.7.1.dmgを展開してインストールします。

【画像：インストールキャプチャ】

次にMAMPフォルダをApplicationフォルダにドラック&ドロップします。これでMAMPのインストールは完了です。

***MAMPのアップグレード [#u2082a82]
インストールを行うと、以前にインストールしていたMAMPフォルダ内のデータは削除されてしまいます。
以下のステップの通りに行えばMAMPをアップグレードできます。
+Apache、MySQLを停止させます。
+MAMPを終了します。
+データベース、ウェブサイトデータおよび設定ファイルなどMAMPフォルダ内の重要なファイルをバックアップします。どれをバックアップすべきか分からない場合は、例えば「MAMP_old」など「MAMP」フォルダの名前を変えておきます。
+インストールディスクイメージより、ApplicationフォルダへMAMPフォルダをコピーします。
+バックアップデータからデータを元に戻します。きちんと動作することを確認するまで、バックアップしたファイルやリネームしたMAMPフォルダは保存しておきます。
+MAMPを起動します。
+設定を確認します。

**SSI関係の設定 [#u5a9ba0a]

SSIを使用可能にするため、まず
 /Application/MAMP/conf/apache/httpd.conf
を修正します。
※念のため修正前のファイルのバックアップをとっておきます。
httpd.confから「SSI」という記述を検索すると、以下のような記述がみつかります。

#AddType text/html .shtml
 #AddOutputFilter INCLUDES .shtml

なお、pache1.3でSSIを有効にするには、AddHandlerディレクティブを使用して設定してましたが、Apache2.0以降でSSIを有効にするには、AddOutputFilterディレクティブを使用します。
デフォルトのままですとコメントアウトされているので、以下のように追記しSSIを使用可能とします。

#AddType text/html .shtml
 #AddOutputFilter INCLUDES .shtml
 
 AddType text/html .shtml
 AddOutputFilter INCLUDES .shtml

拡張子が.htmlでもSSIが表示されるようにする
上記の設定でSSIを使用可能としました。続いて拡張子「.html」「.htm」でもSSIを使用可能に設定します。
その場合は以下のように拡張子を追記します。

AddType text/html .shtml .html .htm
 AddOutputFilter INCLUDES .shtml .html .htm

**Virtual Hostを用いてMAMPで複数サイトを管理する [#nb809e6f]

MAMPでのデフォルトのポート設定は以下のとおりとなっています。
-Apacheのポート：8888
-MySQLのポート：8889

また、MAMPのDocument Rootはデフォルトだと
 /Applications/MAMP/htdocs
となっており、ブラウザでアクセスする場合は
 http://localhost:8888
でアクセスします。

ここでは、複数サイトの制作を同時進行する場合に、サイト毎にディレクトリを分けて管理できるよう設定してみます。
これにより、各サイトのディレクトリごとにサイトルートが設定されるため、ルートからのパスも確認できるようになります。

今回は
 http://localhost:ポート番号（任意の数字）
でサイトを振り分けて表示できるように設定します。
仮に、
-サイト「projectA」を、ディレクトリ「/Applications/MAMP/htdocs/projectA」、ポート番号「8001」
-サイト「projectB」を、ディレクトリ「/Applications/MAMP/htdocs/projectB」、ポート番号「8002」
-サイト「projectC」を、ディレクトリ「/Applications/MAMP/htdocs/projectC」、ポート番号「8003」

で確認できるよう設定することを想定します。
※なお、ポート番号は他で利用しているサービスのポート番号と重複しないよう気をつけてください

まず、
 /Application/MAMP/conf/apache/httpd.conf
を修正します。
※念のため修正前のファイルのバックアップをとっておきましょう。

上記ファイルをエディタで開き、「Listen 8888」と記述されている箇所を見つけます。&br;
この後ろへ任意のポート番号の設定を記述します。

Listen 8888
 Listen 8001
 Listen 8002
 Listen 8003

さらにポート番号と各サイトのディレクトリを紐付けるため、以下の記述を追加します。

Listen 8888
 Listen 8001
 Listen 8002
 Listen 8003
 
 <virtualhost *:8001>
 DocumentRoot "/Applications/MAMP/htdocs/projectA"
 </virtualhost>
 
 <virtualhost *:8002>
 DocumentRoot "/Applications/MAMP/htdocs/projectB"
 </virtualhost>
 
 <virtualhost *:8003>
 DocumentRoot "/Applications/MAMP/htdocs/projectC"
 </virtualhost>

httpd.confを書き換えた際には、MAMPの管理画面にてApacheを再起動させる必要があります（「サーバを停止」ボタンを押下後、「サーバを起動」ボタンを押下）。

【画像：MAMP管理画面】

ブラウザでアクセスする場合、例えばprojectAのサイトを確認する場合は
 http://localhost:8001
で表示できます。
※ブラウザで
 http://localhost:8888/projectA/index.html
でアクセスしてしまうと、ルートへのパスなどが適切に処理されません

***メモ [#x1d501b6]
ポート番号と各サイトの関係が複数ある場合、覚えておくのは面倒です。
また/Applications/MAMP/htdocs/内の各サイトのディレクトリ名を各サイト名と紐付けたディレクトリ名としてしまうと、サイトの入れ替えの際にディレクトリ名も変更されてしまうため、その都度
 /Application/MAMP/conf/apache/httpd.conf
のファイルを修正する必要が生じてしまいます。

私の場合は

-「http://localhost:8001」に紐づくのは「project001」ディレクトリ
-「http://localhost:8002」に紐づくのは「project002」ディレクトリ
-「http://localhost:8003」に紐づくのは「project003」ディレクトリ

のようにしておき、サイトの入れ替えが生じた際にはディレクトリ名だけ変えれば済むようにしてます。

ただこのままですとポート番号に紐づくサイトを忘れてしまいがちという点は改善されません。
都度ディレクトリ内のファイルを確認するのもいいのですが、
 http://localhost:888
でアクセスされる
 /Applications/MAMP/htdocs/index.html
のファイルに各サイトとポート番号の関係をメモしておき、
 <a href="http://localhost:8001">サイト名</a>
 <a href="http://localhost:8001">サイト名</a>
 <a href="http://localhost:8001">サイト名</a>
のようにリンクの設定しておけば調べる手間が省けます。

【画像：サイトリストページのキャプチャ】

***備考 [#k3b697a0]
Virtual Hostの設定には、設定ファイルをエディタで開いて修正する必要があります。
Document Rootのディレクトリ変更はMAMPの管理画面の「環境設定」のApacheの項目から可能となってますので、面倒でなければ環境設定から都度Document Rootの変更も可能です。
その場合は各ディレクトリ名を各サイト名と紐づいた命名としておいたほうが分かりやすいと思います。

【画像：MAMPの環境設定画面】

***参考 [#m38df8a0]
-[[Macでローカル開発サーバ ( MAMP ＋バーチャルホスト) | TechGaga>http://www.techgaga.com/blog/2008/03/16/mac-local-development-server-with-mamp-and-virtual-host/]]

&color(#f00,){※};この記事はまだ書きかけです

#blikifooter(大家)

テキスト整形のルールを表示する

アークウェブWebデザインSandBox

アークウェブのサービスやソリューションはこちら