サイトをたくさん作ってくると、ローカルで複数のサイトを管理したくなるかと思います。
MAMPのデフォルトの設定ですと、1サイトしか表示されない・・・。
それだと作業効率も悪いので、MAMPで複数のサイトを管理できる方法を紹介させていただきます。

では、トミーいきまーす！

MAMP のインストール方法はこちらにまとめてます。

MacにMAMP ver5をインストール

2020年6月17日

バーチャルホストのたて方について

バーチャルホストとは

簡単にですが、バーチャルホスト(Virtual Host)とは1つのサーバで複数のドメインを運用する技術のことで、Webサーバ、メールサーバなどで利用されます。

MAMPをインストールすると、初期状態は
/Applications/MAMP/htdocs/
がローカルディレクトリとして設定されてます。

ローカルディレクトリは、http://localhost:8888/ でブラウザで表示を確認することができます。

外部ディスクを準備

まず、外付けSSDかHDDを用意します。
お金に余裕があれば、SSDがいいですが、HDDでも問題ありません。

サムスン内蔵SSD［2.5インチ／1TB］MZ−76Q1T0B／IT

created by Rinker

• Amazon
• 楽天市場

Seagate ST8000VN004 IronWolf [3.5インチ 内蔵ハードディスク （8TB）]

created by Rinker

• Amazon
• 楽天市場

MAMPのWeb Serverを変更する

MAMPを起動します。
キーボードの「cmd + , 」設定を開きます。

①環境設定が表示されたら、ページ上部のタブ「Web Server」をクリックします。
②「Select」をクリックします。

「Select」をクリックすると、フォルダを選択する画面が表示され、WEBサイトを管理しているフォルダを選択します。
僕は、idocsというフォルダに各クライアント様のWEBサイトデータを管理しているので、idocsを選択します。

カケルデザインのサイトであれば「kakeru-d」フォルダ、すくのび日記であれば「sukunobi」といった感じです。

バーチャルホストの設定

続いてバーチャルホストの設定を行います。
設定ファイルは以下のフォルダ下にあります。

• /Applications/MAMP/conf/apache/httpd.conf
• /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

httpd.confの設定

httpd.confをテキストエディタ等で開き、578行目あたりに、下記のような記述があるはずです。

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

これを下記のとおり、変更します。（コメントアウトを外す）

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

引き続き、httpd-vhosts.confの設定を行います。

httpd-vhosts.confの設定

「httpd-vhosts.conf」以下にあります。
/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

ファイルを開くこと、こんな記述になってます。

#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn’t need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option ‘-S’ to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<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>

このファイルの追記を行い、作成したいバーチャルホストを作成していきます。
追記する場合は、一番下の文章から、追加していきます。

取り急ぎ、追加した内容を見てみましょう。

#すくのび日記
Listen 8711
<VirtualHost *:8711>
    ServerAdmin demo-sukunobi_wp
    DocumentRoot “/Volumes/HDD/Dropbox/idocs/sukunobi/“
</VirtualHost>

これで設定完了です。
MAMPを再起動させます。再起動しないと設定した内容が反映されません！

<?php
//絶対パス
echo __FILE__ . ‘<br />’;

//ディレクトリパス
echo dirname(__FILE__) . ‘<br />’;

//スクリプト名
echo basename(__FILE__) . ‘<br />’;

//指定した拡張子を取り除いたスクリプト名
echo basename(__FILE__, ‘.php’);
?>

httpd-vhosts.confの全体像

#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn’t need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.2/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option ‘-S’ to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<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>




#新規追加　WEBサイト
#すくのび日記
Listen 8711
<VirtualHost *:8711>
    ServerAdmin demo-sukunobi_wp
    DocumentRoot “/Volumes/HDD/Dropbox/idocs/sukunobi/“
</VirtualHost>

設定したホストにアクセスすると、WEBサイトが表示されれば成功です！お疲れ様でした。
僕の場合は、
http://llocalhost:8711/

で表示されました。

※あくまでデータベースの設定がない静的なサイトです。データベースが必要なサイトであれば、phpMyAdminでの設定が必要になります。

バーチャルホストにもう一つサイトを追加する場合

#新規追加　WEBサイト
#すくのび日記
Listen 8711
<VirtualHost *:8711>
    ServerAdmin demo-sukunobi_wp
    DocumentRoot “/Volumes/HDD/Dropbox/idocs/sukunobi/“
</VirtualHost>



#カケルデザイン
Listen 8712
<VirtualHost *:8712>
    ServerAdmin demo-kakeru-d
    DocumentRoot “/Volumes/HDD/Dropbox/idocs/kakeru-d/“
</VirtualHost>

Listen 8712でカケルデザインを追加。再度MAMPを再起動。

http://llocalhost:8712/

にアクセスすると、カケルデザインのサイトが表示されます。

上記のようにローカルホストの番号を変更し、WEBサイトフォルダを設定することで、複数のWEBサイトを表示させることができるようになります。

http://llocalhost:8711/ にアクセスすると
すくのび日記が表示されます。

http://llocalhost:8712/ にアクセスすると
カケルデザインが表示されます。

まとめ

いかがだったでしょうか？
説明が下手くそで分かりにくいところもあったかもですが、少しでもお役に立てれば幸いです。

頑張って、ローカル環境を構築して、どんどんサイトを作っていきたいですね！
最後まで、ご閲覧いただき、ありがとうございました。