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

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

#ローカル環境
- Mac OS Sierra (10.12.5)

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

https://www.mamp.info/en/

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

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

<img width="270" alt="スクリーンショット 2017-06-16 13.44.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/184387/eac93410-fc4e-4490-301f-455a3c47bd9c.png">

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

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

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

```ruby: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を例にして考えます。
ディレクトリ構成を一旦確認してください。

```ruby:ディレクトリ構成
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`というファイルを開きます。
以下の通り変更してください。

```ruby:httpd.conf48行目
Listen 8888
    ↓
Listen 80
```
```ruby:httpd.conf186行目
ServerName localhost:8888
    ↓
ServerName localhost:80
```
Virtual Hostの設定を有効化

```ruby: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行目から下の部分はダミーなので削除

```ruby:httpd-vhosts.conf27行目移行
<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>
```

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

```ruby: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`)

```ruby:/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
```

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

```ruby:/private/etc/hosts追記
127.0.0.1       test.local.com
```

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

```ruby:対応
サーバーIPアドレス    ドメイン
```
`127.0.0.1`はローカルを表しています。
よって、意味としては「test.local.comにアクセスしたらば、ローカルを見に行く」ということになります。

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

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

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