#目的
サーバーや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あたりがおすすめです。
ツールにはこだわりましょうね。
<?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
というファイルを開きます。
以下の通り変更してください。
Listen 8888
↓
Listen 80
ServerName localhost:8888
↓
ServerName localhost:80
Virtual Hostの設定を有効化
# 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行目から下の部分はダミーなので削除
<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の設定を書き込みます。
<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
)
##
# 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.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\
になるようです。