最近WordPressなどCMSのテーマを作ったりする機会が増えてきました。CMSはサーバーにインストールしないと動作しないのでテーマ作りはもちろん、プラグインのテストなどすることもできずローカルマシンに作業環境を作る必要がでてきました。
そんなときはローカルマシンにサーバーを⽴てて作業をするのですが、弊社の作業環境がWindowsなので、いままではXAMPPを使っていました。最近新しいマシンになったタイミングでWindows版のMAMPに乗り換えてみました。
MAMPはもともとはMacのアプリケーションだったので、Windows環境での情報が少なく、またMac版とWindows版の情報では少し違うところがあったり、また情報⾃体が少なくて探してもあまり⾒つけることができなかったので、今回はWindows版MAMPでhostsファイルを使わない（ポート番号で）ルートパスのサイトを複数管理する⽅法をご紹介しようと思います。
ルートパスってなに︖
WEB制作をおこなう時に画像やCSSなどのファイルを指定する⽅法のひとつで、名前の通りルート（⼀番上の階層）からのパスの記述の仕⽅になります。
書き⽅は以下のようにパスの最初が「/」から始まるように書きます。
<img src="/img/sample.jpg">
この記述の仕⽅だとひと⽬でどの階層に何があるのかわかりやすいというメリットがあるのですが、ローカルでの開発環境や本番環境と階層が違うテスト環境では画像やCSSが反映されないというデメリットがあります。
例︓http://example.com/test-site/
テスト環境が『test-site』の中にあるとルートパスで記述されたサイトは、『http://example.com/』からのパスになっているので画像やCSSがリンク切れを起こしてきちんと表⽰することができないってことですね。
そんな時にXAMMPやMAMPのアプリケーションを⽤いてローカル環境にテストサーバーを⽴てて、本番と同じ階層の環境を作ります。
MAMPでのルートパスでの複数サイトの管理の仕⽅
MAMPをWindowsマシンにインストールした後に
\MAMP\conf\apache\httpd.conf
\MAMP\bin\apache\conf\extra\httpd-vhosts.conf
上記の2ファイルを変更します。
httpd.confの設定
バーチャルホストを有効にします
\MAMP\conf\apache\httpd.conf のファイルをエディタ開いてバーチャルホストを有効にする箇所の[#]を削除します。
該当の箇所は、httpd.conf の564⾏⽬あたり
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf
上記の下の⾏頭の＃を削除して以下のように変更し保存します。
# Virtual hosts
Include conf/extra/httpd-vhosts.conf
これでバーチャルホストが有効になりました。
利⽤ポートを増やす
httpd.conf の46⾏⽬あたり
Listen 80
と、すでに記述があるのでその下の⾏に利⽤したいだけの数のポート番号を追加します。
Listen 81
Listen 82
Listen 83
Listen 84
httpd-vhosts.confの設定
追加したポートの設定
上記で複数のサイトを管理するために追加したポートを割り振ります。
\MAMP\bin\apache\conf\extra\httpd-vhosts.conf をエディタ開いて各ポートに管理したいサイトディレクトリーを設定します。
<VirtualHost *:81>
DDocumentRoot "C:\MAMP\htdocs\test_01"
</VirtualHost>
<VirtualHost *:82>
DocumentRoot "C:\MAMP\htdocs\test_02"
</VirtualHost>
<VirtualHost *:83>
DocumentRoot "C:\MAMP\htdocs\test_03"
</VirtualHost>
<VirtualHost *:84>
DocumentRoot "C:\MAMP\htdocs\test_04"
</VirtualHost>
http://localhost:81 でアクセスすると「test_01」のディレクトリーのサイトがhttp://localhost:82 では「test_02」のディレクトリーのサイトが設定したURLとポートで表⽰されるようになりました。
まとめ
⼤規模サイト制作の場合だとヘッダーやフッターなどを共通化させたりして作業をする場合があります。その時には今回のようなやり⽅で簡単にローカル環境を作り作業をすると、サーバーにアップする前に読み込みや動作の確認ができて効率がアップだし、とても便利だと思いました。
