MAMPで複数サイトをルートパスから管理したい場合はバーチャルホストを使う

※この方法はポート番号でサイト管理をさせます。ドメインネームで管理する方法ではありません。

MAMPを使うとローカルでPHPなどを仮想的に動かすことができ、本番サーバーにファイルをアップロードしなくともプレビューすることができます。
ただデフォルトの状態で複数のディレクトリを作り、サイト管理するとサイトアドレスが以下のようになってしまいます。
http://localhost:8888/test-site01/
http://localhost:8888/test-site02/

別に静的なHTMLサイトであればこれで特に問題ありませんが、PHPやルートパス指定の「/」で弊害が出てきます。
例えば「/」で画像を指定すると下記になります。

実際のサイト：<img src="/images/sample.jpg">
MAMPだと：<img src="/test-site01/images/sample.jpg">

これだとアップロードするたびにパスを変更しなければなりません・・・
これを回避します。

バーチャルホストを使い、htdocsに入れたディレクトリをルート・ディレクトリにする

バーチャルホストを使えば以下のようにできます。

ディレクトリ「test-site01」http://localhost:8888/test-site01/を
バーチャルホストでhttp://localhost:8888/で読み込むようにする。

では実際に設定させていきます。
変更箇所は
MAMP/conf/apache/httpd.conf
MAMP/conf/apache/extra/httpd-vhosts.conf
この２ファイルです。

httpd.confでバーチャルホストを有効に、そして利用ポートを増やす

まずはバーチャルホストを有効にします。
MAMP/conf/apache/httpd.confを開き下記項目の#を消します。

httpd.confの580行目くらい

# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

		↓に変更

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

http.confの48行目くらい

Listen 8888

		↓利用する分だけ増やす

Listen 8888
Listen 8001
Listen 8002
Listen 8003
Listen 8004
Listen 8005
Listen 8006
Listen 8007
Listen 8008
Listen 8009
Listen 8010

この「Listen 8888」はhttp://localhost:8888/の数字の部分です。増やした分だけ使えるようになります。
※注意点としてこのポートは別アプリや機器で使用している場合があります。 例）80とかはMacデフォルトapacheのポート番号。

httpd-vhosts.confで作業中のディレクトリにポートを割り振る

httpd-vhosts.confで8888番はこのディレクトリ！と指示することで「http://localhost:なんちゃら/」でアクセスできるようになります。

httpd-vhosts.confの最後にサイト分だけ追記する

8888は変更しないでとっておきましょう。僕は8001から始めました。

# 下記を追記test-site01は実際の作業ディレクトリ名にしてください。

<VirtualHost *:8001>
  DocumentRoot "/Applications/MAMP/htdocs/test-site01"
</VirtualHost>
<VirtualHost *:8002>
  DocumentRoot "/Applications/MAMP/htdocs/test-site02"
</VirtualHost>

これで「http://localhost:8001/」にアクセスすると「htdocs/test-site01」へアクセス、8002はtest-site02へとなります。

以上です。
これにより「/」ルートパス指定ができるようになるので共有ヘッダーの読み込みとかのパスのズレとか回避できるようになると思います。

パス指定の色々

ルートパス、絶対パス、相対パスというものがあります。
ルートパス：「/」を記述
例)<a href="/">サイトトップ</a>どこの階層に書いてもhttp://example.com/

絶対パス：ドメイン名から記述
例)<a href="http://example.com/">サイトトップ</a>絶対にhttp://example.com/

相対パス：「../」を記述
例)<a href="../../../index.html">サイトトップ</a>上の階層へ3回移動する(index.htmlは無くて良し)