今日から始めるMacのローカル開発環境構築(MAMP導入編)

今までMacのローカル環境で開発するときはVirtualBoxでバーチャル環境を作り、そこを使って開発していたのだが、重くなったりファイルのやり取りが面倒だったりして、結局外部にテストサーバーを立ててローカルでは開発しないということが多かった。しかし、先日の勉強会で参加者のみなさんがMAMPやXAMPPのローカル開発環境を持っていたのを見て、僕もちゃんと構築しておこうと思い直しローカル開発環境を構築してみることにした。

やりたいこと

Macでローカル開発環境を構築するにはMAMPを使うのが一般的のようだ。普通にインストールしてMAMPを起動すると、http://localhost:8080 というURLでローカルの環境にアクセスできるようになる。しかし、これだと本番環境とURLが異なりいろいろと面倒が増えるし、複数サイトを管理するときに不便である。そこで、MAMPのApacheの設定を変更してバーチャルホストを使用し、本番環境と同じURLでアクセスできる環境を構築する。

MAMPのインストール

まず下記のサイトからMAMPをインストールする。無料版(MAMP)と有料版(MAMP Pro)があるので無料版をダウンロードする(ただし、MAMPをダウンロードしても何故かMAMP Proが付いてくる…)。

ダウンロードしたらインストーラーを起動し、画面の指示に沿ってインストールする。

MAMPのインストーラー

MAMPのインストーラー

MAMPでバーチャルホスト設定

MAMPの設定

MAMPをインストールしたらアプリケーションフォルダに「MAMP」「MAMP PRO」の2つのフォルダが作られているので「MAMP > MAMP」からMAMPを起動する。初回起動時、下記のような画面が表示される。今回はMAMP PROは不要なので下記のようにチェックを外して「MAMPを起動」から起動する。

しつこくMAMP PROの利用を薦めてくるのでシャットアウトする。

しつこくMAMP PROの利用を薦めてくるのでシャットアウトする。

MAMPが起動する。ここで「サーバを起動」をクリックすれば http://localhost:8080 でアクセスできるようになるが、今回はバーチャルホストの設定を行いたいので「環境設定」をクリックする。

MAMP起動画面

MAMP起動画面

環境設定を開いたら「ポート」タブをクリックする。デフォルトではApacheのポートが 8080 となっているため、開発環境をブラウザで開くためにURLの後ろに「:8080」を付ける必要がある。本番環境と同じURLにしたいので、Apacheの標準ポート 80 に変更する(MySQLはデフォルトのままにしているが、未テストなので状況によってはこちらも標準の 3306 にしたほうが良いかも)。

ポートの設定

ポートの設定

Apacheの設定

上記でMAMPの設定は完了。次にApacheの設定ファイルでバーチャルホストの設定を行う。Apacheの設定ファイルは「/Applications/MAMP/config/apache/httpd.conf」にある。ファイルを開いたらバーチャルホストの設定ファイルを読みこませるために、下記の通りコメントアウトを外す。

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

コメントアウトしたら /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf ファイルを編集する。サンプルで2件の設定が入っていたのでそれはコメントアウトして、設定を追加した。サンプルとして僕の書いた設定など。

# 基本サイト
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot /Applications/MAMP/htdocs/localhost/www
    <Directory "/Applications/MAMP/htdocs/localhost/www">
        Order Deny,Allow
        Deny from all
        Allow from 2inc.org
        Allow from localhost
    </Directory>
    ErrorLog logs/localhost
</VirtualHost>

# 2inc.org
<VirtualHost *:80>
    ServerName 2inc.org
    DocumentRoot /Applications/MAMP/htdocs/2inc.org/www
    <Directory "/Applications/MAMP/htdocs/2inc.org/www">
        Options Includes ExecCGI FollowSymLinks
        AllowOverride All
        Order Deny,Allow
        Deny from all
        Allow from 2inc.org
        Allow from localhost
    </Directory>
    ErrorLog logs/2inc.org/error_log
    CustomLog logs/2inc.org/access_log combined env=!no_log
</VirtualHost>

httpd-vhosts.conf を保存したら、DocumentRootで指定したディレクトリと、ErrorLogで指定したファイルを作成する。エラーログのパスは「/Applications/MAMP/Library/logs/」以下となる。もし作成しなかったらApacheのエラーが出てMAMPが起動しないので注意。

Hostsを編集する

ここまで設定できたらMAMPを起動する。ただし、バーチャルホストの設定ファイルで本番サイトと同じURLを指定したので、いまブラウザでそのURLを開いても本番サイトが表示されてしまう。このような場合はHostsと呼ばれるファイルを編集して「このドメインはlocalhost(このMac)を表示する」という設定をすれば良い。GUIで設定できたほうが便利なので、Hosts というアプリを利用する。

インストール、設定方法は下記が詳しい。インストールが完了するとMacの環境設定パネルにHostsが表示されるようになる。

あとは下記のようにipに「2inc.org」、hostnameにドメイン名を入力して、ローカル開発時にはuseにチェックすれば良い。

hosts設定画面

hosts設定画面

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく