プラカンブログSTAFF BLOG

2017.05.30

WindowsのMAMPでバーチャルホストを設定してみた

最近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とポートで表示されるようになりました。

まとめ

大規模サイト制作の場合だとヘッダーやフッターなどを共通化させたりして作業をする場合があります。その時には今回のようなやり方で簡単にローカル環境を作り作業をすると、サーバーにアップする前に読み込みや動作の確認ができて効率がアップだし、とても便利だと思いました。

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc(な)

この記事は、NAGATOMI が書きました。