MAMPのバーチャルホストで複数プロジェクト管理

バーチャルホストとは？

MAMPで複数プロジェクトを管理している人（初心者限定？）によくあることですが、
「htdocsにindex.htmlやstyle.cssなんかをおいてホームページを仮想環境で制作しましょう！」
という初心者向きの記事を鵜呑みにすると、
「あれ？ということはmampで作れる（管理できる）プロジェクトは１つしか無理なの？」
という疑問に当たります。

そこから次に行く着くのが、
「htdocsの中にプロジェクトごとのフォルダを作って、その中にhtmlとかcssを置けば、localhost:8888/プロジェクト名でいくらでも管理できるじゃん！」
という考えです。

はい、間違いです。

正確には使い方がスマートじゃない、と言ったほうが正しいかもしれませんが、今すぐその認識を捨てましょう。

WordPressじゃなくても良いのですが、生のPHPで現在のURLを取得して、何かしらの判定処理をしようとしたとき、以下のようなコードを使った覚えないですか？

$url = $_SERVER['HTTP_HOST'];

このコード自体はホストwww.sample.comを取得するのですが、mamp上で実行すると、localhost:8888しか取得できないんです。

「ほしいのは“localhost:8888”じゃなくて“localhost:8888/example”なんだ！！！！」

まさに自分のことなんですが、こんなしょうもないことで躓いてほしくないので、備忘録も兼ねて、ちゃんとした複数プロジェクトの管理方法をここに残します。

MAMPのバーチャルホストを設定する

まずは/mamp/conf/apacheからhttpd.confとextra/httpsd-vhosts.confを開きましょう。

わざわざVSCodeとかで御大層にやる必要もないので、メインのエディターとは別に、軽量なエディターとかがあれば便利です。

自分の場合はCotEditorなるものを使ってますが、まじで起動が早いしメモリも圧迫しないので、普通に文章を書くときなんかはこちらを使ってます。

Mac：https://apps.apple.com/jp/app/coteditor/id1024640650?mt=12
Windows：https://coteditor.softonic.jp/mac

とりあえず、エディタは何でもいいので上記２つのファイルを開いてください。

※失敗するとMAMPが死ぬので、この２つのファイルは前もってバックアップしておくこと！！（そのときは再インストールすればOK！）

httpd.confの末尾くらいに、以下のような記述があるかと思います。

<VirtualHost *:80>
　以下略
</VirtualHost>

<VirtualHost *:80>
　以下略
</VirtualHost>

これを雛形にするので、<VirtualHost *:80> 〜 </VirtualHost>を末尾に１つ複製します。
複製した<VirtualHost *:80> 〜 </VirtualHost>の中で書き換えるのは、DocumentNameとServerName、オプションのErrorLogとCustomLogです。
ちなみにオプションは任意なので、いらないのであれば最初の2項目だけで大丈夫です。

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/project-name"
    ServerName project-name.local.com
    ErrorLog "logs/project-name-error_log"
    CustomLog "logs/project-name-access_log" common
</VirtualHost>

DocumentRoot

htdocs配下のプロジェクトフォルダを指定してください。

ServerName

「http://指定して文字列」と入力することでDocumentRootで指定したプロジェクトが表示されます。
ここでは「http://project-name.local.com」と入力することで、従来の「http://localhost:8888/project-name」と同じ様にアクセスできます。

ErrorLog、CustomLog

この2項目はオプションです。指定した場所（logsフォルダ以下）に、指定した名前でエラーログファイルが生成されます。

hostsファイルを編集

ここではターミナルを使って、hostsファイルを編集していきます。
ちなみにターミナルを使いたくない人は、private/etc/hostsにあります。

では、ターミナルを起動し、$ sudo vi /etc/hostsと打ち込んでエンターを押してください。
パスワードを求められるので、入力してエンター。

すると以下のような画面になるはずです。

##
# 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
~
~
~
~
~
"/etc/hosts" 12L, 275C

そのままキーボードのiを押すと、末尾が-- INSERT --となり、インサートモードに切り替わります。

そうしたら矢印キーとエンターで::1の次の行に移動して、127.0.0.1 test-project.local.comと打ち込みます。

test-project.local.comというのは、先程httpd-vhosts.confのServerNameで指定した文字列です。

もしhttpd-vhosts.confで複数追加したのであれば、その分だけ127.0.0.1 ▲▲▲▲と打ち込んでください。

今回は以下のように入力しました。

##
# 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 project-name.local.com
~
~
~
~
~
"/etc/hosts" 12L, 275C

入力したら、escキーを押して、そのまま:wqと入力してエンターで元のターミナルに戻ります。

MAMPのポート番号を変更

MAMPを起動させて、設定画面のPortsタブを開いて、80 & 3306を押してポート番号を80に変更してMAMPを再起動させます。

確認

先程のServerNameで指定した文字列をブラウザのアドレスバーに入力してアクセスして表示されていれば成功です。
時折、apacheの反映にタイムラグが発生する時があるので、他のポート番号にリダイレクトされたり、エラーが出たりしたら、MAMPを終了して1〜2分間を空けてから再起動させたり、$ sudo killall -HUP mDNSResponderでDNSキャッシュをクリアしたり、PCの再起動を試してみてください。

もちろんタイプミスも十分有りえるので、httpd.conf、httpd-vhosts.conf、hostsもしっかり確認してみましょう。