【LOCAL】MAMPでバーチャルホスト

こんにちは（・∀・）

自分のMac(ローカル環境)にアプリケーションのMAMPで仮想Webサーバを構築しました。

今回はそのWebサーバで複数のプロジェクトを運用することができるようになるよう設定を変更します。

Web系のお仕事をしていればいくつもの案件を同時期に受けることがあると思いますが、そういう時に仮想サーバで複数のプロジェクトを運用できるようにしておくと便利です。

バーチャルホストの設定をしよう

編集するファイルは、
「/アプリケーション/MAMP/conf/apache」にあるhttpd.confファイルと、
「/アプリケーション/MAMP/conf/apache/extra」にあるhttpd-vhosts.confファイルと、
「/private/etc」にあるhostsファイル
の３ファイルです。

これらファイルは編集する前にオリジナルをコピーしてバックアップをとっておきましょう。

ドキュメントルートにフォルダを設定

ファイルの編集をする前に下準備として作業用フォルダの設定をしておきます。

MAMPのデフォルトのドキュメントルートは「/アプリケーション/MAMP/htdocs」です。MAMPをインストールした時に変更していなければそこにプロジェクトごとのフォルダを作っていきます。

htdocsフォルダにプロジェクトごとにフォルダを増やしていきます。

/アプリケーション/MAMP/htdocs
/アプリケーション/MAMP/htdocs/test
/アプリケーション/MAMP/htdocs/test2

今回、元のhtdocsフォルダに加えてtestフォルダ、test2フォルダの3つの作業用フォルダができたことになります。

URLは次のようになります。

http://localhost/
http://test.localhost/
http://test2.localhost/

ドキュメントルートを変更している場合の例

ドキュメントルートを変更している場合は、同じように変更したフォルダにプロジェクトごとのフォルダを作ってください。

この例ではUSBメモリにドキュメントルートのフォルダを作っているのでパスもそれに合わせて変更します。

/Transcend/_Web_Local_/www
/Transcend/_Web_Local_/www/test
/Transcend/_Web_Local_/www/test2

この場合も同じくwwwフォルダに加えて、testフォルダ、test2フォルダの3つの作業用フォルダができたことになります。

ファイルの編集

それではいよいよファイルの編集をしていきましょう。

1. httpd.confの編集

まずは「/アプリケーション/MAMP/conf/apache」にあるhttpd.confファイルを編集します。

585行目あたりにある1行を次のように変更します(行先頭の#を削除)。

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

これでapacheの起動時にバーチャルホストの設定に必要なhttpd-vhosts.confファイルを読み込むようになります。httpd.confファイルの編集は以上です。

2. httpd-vhosts.confの編集

次に「/アプリケーション/MAMP/conf/apache/extra」にあるhttpd-vhosts.confファイルを編集します。

27行目あたりに次のようなブロックがあります。

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
    ServerName dummy-host2.example.com
    ErrorLog "logs/dummy-host2.example.com-error_log"
    CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

それを削除して次のように変更します。

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/test"
    ServerName test.localhost
</VirtualHost>

あとは増やしたい分だけ追加していきます。

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/test2"
    ServerName test2.localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/hoge"
    ServerName hoge.localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/hoge2"
    ServerName hoge2.localhost
</VirtualHost>

ドキュメントルートを変更している場合の例

ドキュメントルートを変更してある場合の例です。USBメモリやSDカードなどにフォルダを作ってドキュメントルートを変更している場合は次のようになります。

<VirtualHost *:80>
    DocumentRoot "/Volumes/Transcend/_Web_Local_/www"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Volumes/Transcend/_Web_Local_/www/test"
    ServerName test.localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "/Volumes/Transcend/_Web_Local_/www/test2"
    ServerName test2.localhost
</VirtualHost>

以上でhttpd-vhosts.confファイルの編集は終了です。

3. hostsファイルの編集

最後に「/private/etc」にあるhostsファイルを編集します。

hostsファイルはシステムファイルなので編集する前にオリジナルの状態のバックアップはとっておきましょう。

そのhostsファイルのある場所ですが、「Finder → メニューバーにある移動 → フォルダを移動」をクリック。「フォルダの場所を入力:」とプロンプトが表示されたら「/private/etc」と入力して「移動」をクリックします。「etc」フォルダ内にhostsファイルがありますのでファイルをコピーしてバックアップを取っておきましょう。

なお、hostsファイルをテキストエディタで編集するには、管理者アカウントよりも上のroot userでなくては編集することはできません。ターミナルを使用すれば管理者アカウントでの編集が可能になりますのでここではターミナルを使ってhostsファイルを編集していきます。

Finderを開いて「アプリケーション → ユーティリティ → ターミナル」をクリックして、ターミナルを起動します。

ターミナルが起動したら次のコマンドを入力して「リターン」キーを押します。

sudo vi /private/etc/hosts

パスワードを聞いてくるのでMacのパスワードを入力して「リターン」キーを押します。この時、キーを入力してもカーソルは動きません。

Macのパスワードが未設定でパスワードを空欄にするとエラーになる場合、一旦パスワードを設定してやり直してみてください。

システム環境設定の「ユーザとグループ」か「セキュリティとプライバシー」でパスワードの設定ができます。

hostsファイルの内容が表示されたら「a」キーを入力してINSERTモードにします。

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

INSERTモードになったら「127.0.0.1 localhost」の次の行、または行の最後のどちらでもいいので、追加するipアドレスとドメイン名を入力してください。サンプルでは最後の行に入力しました。ipアドレスとドメイン名の間のスペースはタブでも半角スペースのどちらでも構いません。

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

127.0.0.1       test.localhost
127.0.0.1       test2.localhost

入力が終わったら「esc」キーを押してINSERTモードを終了します。

「:w!」と入力して「リターン」キーを押して変更を保存します。

「:q」と入力して「リターン」キーを押してhostsファイルを終了させます。

最後に「exit」と入力して「リターン」キーを押してターミナルからログアウトして終了します。

以上でhostsファイルの設定は終了です。

MAMPを再起動して変更を反映させてください。

設定した各フォルダにindex.htmlファイルを保存してブラウザで表示されるか確認します。

ブラウザのアドレスバーに
「http://localhost/」
「http://test.localhost/」
「http://test2.localhost/」
「http://test3.localhost/」
と入力して「index.html」ファイルにアクセスできるか確認してください。

関連リンク

【MAMP】MacにMAMPをインストール