MAMPを利用してVirtual Hostでローカル開発環境構築

目的

サーバーやPHPなどてんでわからないという人のPCに、MAMPを利用し、webアプリケーションのローカル開発環境を構築する。

ローカル環境

• Mac OS Sierra (10.12.5)

MAMPインストール

インストール

以下よりMAMP（無料版）をダウンロード。
MAMP PRO（有料版）も一緒にダウンロードされますが今回は使いません。

.pkgファイルがダウンロードされますので開いてインストーラーを起動します。
インストールが完了すると、/Applications/MAMPというディレクトリが出来ています。

起動

/Applications/MAMP/MAMP.appを開き、MAMPを起動します。
PASSWORDを聞かれますので、普段Macにログインしているパスワードを入力してください。
※以後、MAMP内のサーバーの起動・停止の際に聞かれます。

上の画像のようなウィンドウが開かれ、右の電源ボタンが緑になっている状態になっていればOKです。
ついでに右上の[apacheサーバー],[MySQL Server]も緑のランプが点灯していることを確認してください。

この状態でChromeなどのブラウザでhttp://localhost:8888にアクセスしてみて下さい。
Index Of /
と表示されていれば起動完了です。

PHPを動かしてみる

MAMPのデフォルトでのドキュメントルート（アクセス時に参照するディレクトリ）は/Applications/MAMP/htdocsです。
本ディレクトリにindex.phpというファイルを作成しましょう。
内容は以下の通り入力してください。
自分の好きなエディタで作成してもらってかまいません。
個人的にはSublimeText,CotEditor,Atom,VisualStudioCodeあたりがおすすめです。
ツールにはこだわりましょうね。

index.php

<?php

echo 'It Works!';

?>

再びhttp://localhost:8888にブラウザからアクセスしてみて下さい。
It Works!と表示されていればOKです。

Virtual Hostの設定

Virtual Hostとは

そもそもHostとはqiita.comのようなドメインの部分と考えてもらって大丈夫です。
このHost毎にどのサーバーにアクセスするかが決定します。
qiita.comにアクセスすれば、キータのサーバーにアクセスするというようなことです。

しばしばweb開発では、複数のprojectを担当することがあります。
そのproject毎に開発環境を用意するわけですが、
project毎のドメインをproject1.com, project2.comのように分けたいタイミングが出てきます。

しかしローカル環境はサーバーが自分（ローカル）自身であるため、サーバーを別の物にすることはできないので、
違うドメインで同じサーバーへアクセスしたくなります。

そこで登場するのがVirtual Host機能です。
違うドメインで同じサーバーにアクセスした場合、そのドメイン毎にドキュメントルートを設定することが出来ます。
MAMPを例にして考えます。
ディレクトリ構成を一旦確認してください。

ディレクトリ構成

htdocs/
    - project1/
        - index.php <- 「こんにちは」と出力される
    - project2/
        - index.php <- 「Hello world」と出力される

Virtual Host機能を用いて以下のようにドキュメントルートの振り分けを設定します。

• project1.com → htdocs/project1
• project2.com → htdocs/project2

以下のような動きをします。

• project1.comにアクセス → 「こんにちは」と出力される
• project2.comにアクセス → 「Hello world」と出力される

Virtual Hostは平易な言葉で言うと、
同じサーバーにありながら、アクセスするドメインによって違うサイトを表示する機能
ということになります。

実際に設定してみる

いよいよMAMPに実際に設定していきます。

目標

test.local.comにアクセス → htdocs/testが参照される

Document Rootの準備

/Applications/MAMP/htdocsにtestというディレクトリを作成する。
その中に/Applications/MAMP/htdocs/index.phpを移動する。
http://localhost:8888/test/へアクセスし、It works!が表示することを確認してください。

httpd.confの設定

/Applications/MAMP/conf/apache/httpd.confというファイルを開きます。
以下の通り変更してください。

httpd.conf48行目

Listen 8888
    ↓
Listen 80

httpd.conf186行目

ServerName localhost:8888
    ↓
ServerName localhost:80

Virtual Hostの設定を有効化

httpd.conf585行目

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

httpd-vhost.confの設定

/Applications/MAMP/conf/apache/extra/httpd-vhosts.confというファイルを開きます。
27行目から下の部分はダミーなので削除

httpd-vhosts.conf27行目移行

<VirtualHost *:80>
    ServerAdmin [e-mail]
    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 [e-mail]
    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>

次に自分が欲しいVirtual Hostの設定を書き込みます。

httpd-vhosts.confへ追記

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

まずDocumentRootには文字通りドキュメントルートに指定したいディレクトリのパスを指定します。
今回は先程作成したtestです。

次にServerNameは利用したいドメインです。ほぼなんでもいいのですが、~.comや~.co.jpなど
現実に使用するドメインに近いほうが色々と便利です。
実際の本番用サイトのドメインを模したものがわかりやすいかと思います。
例えば...
qiita.comであれば、qiita.local.comに設定するなど良いかもです。

hostsの設定

ここまでで、MAMP側の設定は完了しました。
ただこのままでは、test.local.comにアクセスしたところでローカルのサーバーまでたどり着けません。
というのも、このドメインがローカルサーバーに紐付けられていないからです。
通常はDNSサーバーがこの仕事を任されていて、ドメインとサーバーの紐付けを行っています。

一方でDNSを通さずにドメインとサーバーの設定を書き換える方法があります。
/private/etc/hostsというファイルを開きます。
(windowsの場合C:\Windows\System32\drivers\etc\hosts)

/private/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

この最後に以下を追記してください。

/private/etc/hosts追記

127.0.0.1       test.local.com

このファイルは保存する時にパスワードをきかれますので、Macへログインするときのパスワードを入力してください。
一行が一単位になっていて、サーバーのIPアドレスとドメインが対応しています。

対応

サーバーIPアドレス    ドメイン

127.0.0.1はローカルを表しています。
よって、意味としては「test.local.comにアクセスしたらば、ローカルを見に行く」ということになります。

動作確認

サーバーの設定はサーバーを再起動しないと反映されないので再起動してあげます。
MAMPのウィンドウを表示し、右の電源ボタンを押してサーバーを停止してください。
しばらくして、停止したら再度ボタンを押して起動してください。
※MAMP自体の停止ではないのでご注意ください。

http://test.local.comへアクセスし、It works!が表示されれば成功です。

注意事項

MAMPのバージョンによって、設定ファイルの行数などが変わってしまっている可能性はありますが、大体書かれていることは同じなのでがんばってください。
windowsの場合/Applications/MAMPはC:\MAMP\になるようです。