27 4月 2015

Mac ローカルでWEB開発！「MAMP」と「Hoster」で簡単設定

Posted in 便利ツール for WEB制作, 制作メモ On 4月 27, 2015

どういうわけか近頃Wordpressのテンプレート開発とか、共通部分はSSIでお願い…とかいう案件が増えてきて、その都度テストサーバーにアップして確認するのが面倒になったので、ローカルで確認できるように設定してみました。

でもね、htmlとcssとちょっとしたJSの知識しかない自分にとって、Macのターミナル立ちあげて、apache起動とかって、難易度が高いというか、抵抗があるわけです。それに、作業フォルダも案件毎に管理しているので、html部分だけ別になると困る。

というわけで、案件毎に好きなフォルダでSSIとかWordpressが確認できるようにテスト環境を構築したい！

ググってみたら「MAMP」と「Hoster」を使うことで意外と簡単に設定できました。
Mac ローカルでWEB開発！「MAMP」と「Hoster」で簡単設定

この2つのソフトをインストールすれば、通常の作業は
①Hosterでホスト名有効
②MAMPでサーバー起動
で作業開始できます。

MAMPを設定

こちらを参考にしました。ありがとうございます。
MAMPにWordPressのテスト環境を構築する手順（Mac OSX）

まずはMAMPをダウンロード

MAMP & MAMP PRO

MAMP
「FREE!」のほうでOK。
ダウンロードされたMAMP_MAMP_PRO_3.2.1.pkgを開いて、
以下6ステップ進めます。
MAMPをインストール
（⑥のインストールの前に、「カスタマイズ」からMAMP PROを外すこともできます）

「MAMP」がインストールされました。
MAMPインストール

グレーのほうのアイコンをクリックすると「MAMP」が立ち上がるので、
MAMP初期設定
Apacheポート：80
Nginxポート：7888（Apacheとかぶらない別の番号）
MySQLポート：3306

に設定し「OK」

「サーバを起動」をクリックすると、右上の「Apacheサーバ」「MySQLサーバ」が緑の■に変わり、スイッチマークも緑になってサーバーが起動します。
MAMP初期設定

勝手にブラウザが↓こんなページを開いてくれますが、開かなかったら上記画面の「オープンwebStartの」という変な日本語をクリックで開きます。
MAMP初期設定完了

これで、ヘッダーメニューの「私のウェブサイト」をクリックすると「index of/」と表示されるはずです。このindex of/は、
/Macintosh HD/アプリケーション/MAMP/htdocs/
以下なので、htdocs に適当なファイルを入れ、
http://localhost/
で、そのファイルが確認できます。

SSIを有効にする

次にSSIを有効にします。

/アプリケーション/MAMP/conf/apache/httpd.conf のソース514行目あたり

#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml

↓

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml .html

頭の「#」を外して、.html も追加します（ほとんどのインクルードファイルが.shtmlではなく.htmlのため）。

さらに、204行目あたり

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

↓

<Directory />
    Options Indexes FollowSymLinks ExecCGI Includes
    AllowOverride None
</Directory>

と変更してCGIとSSIを許可します。

これで、SSIでの作業が可能になりました。

しかし、htdocsフォルダだけでは複数案件の管理ができないし、作業の度にこのフォルダを開くのはスマートじゃない。
そこで、任意のフォルダで作業できるように、バーチャルホストを設定します。

バーチャルホストの設定

設定するファイルはhttpd.conf と httpd-vhosts.conf。

①httpd.conf の編集

/アプリケーション/MAMP/conf/apache/httpd.conf
574行目あたり

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

↓

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

2行目の先頭の「#」を削除（コメントアウトを解除）します。

②httpd-vhosts.confの編集

/アプリケーション/MAMP/conf/apache/extra/httpd-vhosts.conf
最後の36行目から

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

となっているので、その下に

<VirtualHost *:80>
DocumentRoot "/Users/[ユーザー名]/任意のフォルダまでのパス"
ServerName banana
</VirtualHost>

を追加し、これで保存。

あとは、案件毎に、②httpd-vhosts.confの編集 で、<VirtualHost *:80>〜</VirtualHost>を追加していきます。

バーチャルホストを有効にする

上記②で設定した「banana」、 http://banana/ でアクセスできるようにするため、IPアドレスとServerNameのマッピングします。それを行うのがhostsファイル。

「/private/etc/hosts」を開いて、ホストを設定します。（hosts ファイルは「/private/etc/hosts」にあるので、それを開いて最後の行に「127.0.0.1 banana」を追加）もしくはターミナルで…

しかし！

個人的にですが、MAMPの設定ファイル以外の、macのシステムファイルを手動で操作するのは抵抗があるうえに、それを案件の始まりと終わりに追加したり削除したりするのもドキドキすぎます。

そこで、「hoster」の登場です。

hosterをインストール

hoster

こちらは「ドメインとIPアドレスを関連づける、Web開発用のユーティリティで、ドメインとIPアドレスのマッピングを管理するhostsファイルをGUIで管理するMacOSX用のソフトウェアです」とのこと。
GUIで管理できるとはありがたい…。
hoster

右上の「Download Hoster 1.2(1.208) 」からダウンロードされた「Hoster1.208」をダブルクリックでインストール
hoster インストール

「hoster」がインストールされました。
hoster インストール

「hoster」でホスト名とIPアドレスをマッピングします。
hoster設定
セット名：ばなな（案件名など）
ホスト名：banana（「ServerName」に設定したホスト名）
IP：127.0.0.1

「追加」→「終了」
hoster設定

「ばなな」の左にある「○」をポチすることで、「banana」がhostsファイルへ反映され、
http://banana/ でアクセスできるようになります。
（先に「MAMP」httpd-vhosts.conf ファイルに設定した、
「ServerName = banana」で「DocumentRoot = 任意のフォルダ」に置いたhtml陣が確認できる…という意味です）

というわけで、あとは

案件が増えたら
①「MAMP」のhttpd-vhosts.confに、<VirtualHost *:80>〜</VirtualHost>を追加。
②「Hoster」でホスト名とIPアドレス登録
作業時は
①Hosterでホスト名有効
②MAMPでサーバー起動

で作業開始。
ローカルで確認できなかったSSIなどが確認できて、作業がスイスイ進みます♪

WordPressはまた次にでも。