トワイライツ・ノーツ

読書感想と自転車と雑記

トップ > Web > 【Mac：MAMP】バーチャルホストを複数追加し、ドメイン形式のアドレスで表示する方法

【Mac：MAMP】バーチャルホストを複数追加し、ドメイン形式のアドレスで表示する方法

Web TIPS 環境構築

こんにちは、柊クイチです。

今回はMacのMAMPを使って、ローカルサーバーをドメイン形式で、複数立てる方法です。
バーチャルホスト（Virtual Host）という機能を使います。
こういった環境構築は結構手間なので、インストール時最初にやっておくことをおすすめします。

このページの内容

通常のローカルホストのアドレスは下で、しかも初期ではひとつだけです。
http://localhost:8888/

これを、下のようなバーチャルホストを追加して、ドメイン形式でアクセスできるようにします。
http://vhostalpha.local.com/
http://vhostbravo.local.com
http://vhostcharlie.local.com
…（マシンの性能が足りる限りは何個でも追加できる）

このページで取り扱わないこと

下記についてはこのページでは省いています。

  • MAMPのインストール方法
  • ローカルホストの説明
  • バーチャルホストの説明
  • サーバーの説明
  • ドメインの説明
  • htmlの説明
  • PHPの説明
  • WordPressの説明
  • .htaccessの説明
  • hostsファイルの説明
  • Windowsでの設定方法

設定方法

1.MAMPの設定

MAMPを停止した状態で、httpd.confの内容を修正します。ファイルの場所はこちら。

/Applications/MAMP/conf/apache/httpd.conf
編集箇所1
# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

↓下記に変更↓

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
編集箇所2
Listen 8888

↓下記に変更↓

Listen 80
編集箇所3
# ServerName localhost:8888

↓下記に変更↓

ServerName localhost:80

内容解説
●ポート番号80
省略可能なポート番号。
80以外の8888や8080といったポート番号は省略できず『localhost:8888』といった表示になる。

編集箇所4

これはバーチャルホストに直接関係ありませんが、htaccessも有効にする設定です。特に必要がなければ有効にしなくても良いです。

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

↓下記に変更↓

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
</Directory>

2.バーチャルホスト用のルートディレクトリとテスト用のファイルを作成

ルートディレクトリを作成

MAMPのhtdocs内に、ルート用のディレクトリとして『vhost_alpha』ディレクトリを作成します*1。

作成後ディレクトリ構造

/Applications/MAMP/htdocs/vhost_alpha
index.htmlを作成

下記の内容でhtmlファイルを作成し、vhost_alphaフォルダ直下に置きます。
PHPの動作確認用の記述もありますが、不要であれば該当箇所を削除しても問題ありません。

<!DOCTYPE HTML>
<meta charset="utf-8">
<html lang="ja">
<head>
<title>バーチャルホストアクセス確認</title>
</head>

<body>
<h1>バーチャルホスト動作確認</h1>
<?php echo 'PHPは動作しています'; ?>
</body>
</html>
.htaccessを作成

下記の内容で.htaccessを作成し、vhost_alphaフォルダ直下に置きます。
PHPが使えるように設定しています。不要であれば該当箇所を削除しても問題ありません。

# デフォルトの文字コードをUTF-8に設定
AddDefaultCharset utf-8

# PHP設定
AddType application/x-httpd-php .php .html .htm

3.MAMPにバーチャルホストを追加する設定

MAMPのhttpd-vhosts.confファイルに追記します。ファイルの場所はこちら。

/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
追記内容
<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_alpha"
    ServerName vhostalpha.local.com
</VirtualHost>

内容解説
● DocumentRoot
ルートディレクトリのパスです。作成したルートディレクトリのパスを入れます。

● ServerName
バーチャルホストで使いたいドメインです。
あまり一般的でないトップレベルドメインを使うと、アドレスバーに打ち込んだ時に『用語検索』されてしまうこともあるので、『.com』が無難です。
（ドメイン名にアンダーバーが入ると動作しないという話がありますが、これは未確認）

4.Macのhostsファイルにドメインを登録

Mac側のhostsファイルに追記します。hostsファイルの場所は一般的には下記です。

/private/etc/hosts
追記内容
127.0.0.1 vhostalpha.local.com

内容解説
●127.0.0.1
ローカル・ループバック・アドレスと呼ばれ、自分自身を指す特別なIPアドレスで、localhostと同じ意味を持ちます。

●vhostalpha.local.com
MAMPのhttpd-vhosts.confファイルのServerNameに追記したものと同じものを書きます。

5.アクセス確認

MAMPを再起動し、ブラウザのアドレスバーに『vhostalpha.local.com』と打ち込んで、表示できていれば設定完了です。
お疲れさまでした。

バーチャルホストを増やしたいとき

MAMPを停止させてから上記2～5の作業を追加したいだけ行います。
DocumentRoot（ルートディレクトリ名）とServerName（アクセスしたいドメイン）を変えればいくつでもドメイン形式でバーチャルホストを追加できます。

設定例（コピペ用）

中身は好みで書き換えてください。

ルートディレクトリ構造例
/Applications/MAMP/htdocs/vhost_alpha
/Applications/MAMP/htdocs/vhost_bravo
/Applications/MAMP/htdocs/vhost_charlie
/Applications/MAMP/htdocs/vhost_delta
/Applications/MAMP/htdocs/vhost_echo
/Applications/MAMP/htdocs/vhost_foxtrot
/Applications/MAMP/htdocs/vhost_golf
/Applications/MAMP/htdocs/vhost_hotel
/Applications/MAMP/htdocs/vhost_india
/Applications/MAMP/htdocs/vhost_juliet
httpd-vhosts.conf追記例
<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_alpha"
    ServerName vhostalpha.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_bravo"
    ServerName vhostbravo.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_charlie"
    ServerName vhostcharlie.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_delta"
    ServerName vhostdelta.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_echo"
    ServerName vhostecho.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_foxtrot"
    ServerName vhostfoxtrot.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_golf"
    ServerName vhostgolf.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_hotel"
    ServerName vhosthotel.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_india"
    ServerName vhostindia.local.com
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/vhost_juliet"
    ServerName vhostjuliet.local.com
</VirtualHost>
hostsファイル追記例
127.0.0.1 vhostalpha.local.com
127.0.0.1 vhostbravo.local.com
127.0.0.1 vhostcharlie.local.com
127.0.0.1 vhostdelta.local.com
127.0.0.1 vhostecho.local.com
127.0.0.1 vhostfoxtrot.local.com
127.0.0.1 vhostgolf.local.com
127.0.0.1 vhosthotel.local.com
127.0.0.1 vhostindia.local.com
127.0.0.1 vhostjuliet.local.com

個人的運用の話

私はフォネティックコード準拠で、あらかじめ設定例のようにバーチャルホストを10個程準備しています。

案件毎に用意しておいたバーチャルホストを割り当てて、納品完了したら使っていたルートディレクトリの中身を空にして終わりです。
事前に作成しておいた数で足りている限りは、新しくバーチャルホストの追加を行いません。既存のバーチャルホストを使いまわします。

こういう運用をしている理由は、仕事がWeb制作だからです。
Web制作は複数案件平行は当たり前で、それも数日～数か月程度で納品することがほとんど。
案件ごとにバーチャルホストを追加・削除するのはちょっと面倒に感じるので、このような運用にしています。

もちろん案件ごとに、それに合わせたバーチャルホストを追加するのもありだと思います。

設定がうまくいかなかったら

上記の設定を行ってもうまくいかなかった場合、MAMPを再インストールしてから行うとできる場合があるようです。

設定をリセットするという意味でも、一旦MAMPのディレクトリ毎削除してしまう方が良いかもしれません。

まとめ

  • MAMPでバーチャルホストを複数追加する方法
  • MAMPでドメイン形式で表示する方法
  • 表示確認用のファイル一式

これらを一緒に扱っているサイトがどうも見つからず（そしてあっても書いてあることが結構まちまちで）、試行錯誤の末成功した方法をまとめてみました。

何故このような設定が必要になったかというと、WordPressのマルチサイト*2をローカルで開発するためです。
マルチサイトは通常のローカルホストの『http://localhost:8888/』というポート番号がついたアドレス形式を受け付けないため、単純なバーチャルホストの追加ではローカルでの開発は不可能でした。
しかし、既に追加していたバーチャルホストで、他にも開発中の案件があった訳で。

そうなると、この機にドメイン形式で複数バーチャルホストを立てられるように環境構築し直そう、という動機。
実際便利なので、やってよかったです。

*1:ディレクトリの名前は好みで変えても構わない

*2:WordPressで、複数のサイトを作るための手法のひとつ