ローカルでWordPressの開発環境などを作成する際に便利なMAMP。
一つのサイトだけであれば特に不自由はしないのですが、バーチャルホスト設定をして複数の開発環境を作成、さらにそれをiPhoneなどで実機確認も出来るようにするにはちょっとしたコツが必要。
今回はその方法を紹介していきます。
MAMPはすでにインストールしてるよって方は目次から必要な部分まで読み飛ばしてくださいませ。
CONTENTS
まずはMAMPのインストール
インストールとダウンロード
MAMPのインストーラを公式サイトからダウンロードします。
トップにダウンロードへのリンクがあるのでそちらをクリックします。
すると以下のダウンロード用の画面が出るのでOSを選んでダウンロードします。
私はMac環境なので左側ですが、Win環境は右側のダウンロードボタンをクリックしてください。
ダウンロードしたインストーラを開くと以下の画面が出るので流れに沿ってインストールします。
初期設定の動作を確認
インストールしたMAMPを起動、歯車アイコンからwebサーバの設定を確認します。
上部のタブからWeb Serverをクリック。
以下のような画面が表示されると思います。
これはアプリケーション > MAMP > htdocsに置いた中身がwebサイトとしてみれますよー的な意味です。
早速その場所にテスト用のファイルを置いてみましょう。
例えばこんな感じのindex.phpとかですね。
<?php echo '<p>Hello World</p>'; ?>そしたらMAMPからサーバを起動。
ローカルサイト http://localhost:8888/ にアクセスしてみましょう。
画面にHello Worldが表示されていたらOKです。
今回はさらに複数の環境を作成し、WordPressもインストールしたいのでさらに設定を進めていきます。
MAMPでバーチャルホストを設定して複数の環境を作成
編集するのは以下二つのファイルです。
- /Applications/MAMP/conf/apache/httpd.conf
- /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
「httpd.conf」の編集
バーチャルホストの設定ファイルを読み込むために「/Applications/MAMP/conf/apache/httpd.conf」を編集します。
574-575行目にある以下のコードを
# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.confこのように編集。（575行目の#を外します）
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf「httpd-vhosts.conf」の編集
「/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf」を編集して複数の環境を作成できるように設定をします。
「httpd-vhosts.conf」を開くと27-42行目まで記入例が記載されてますが、不要なのでコメントアウトしてしまいましょう。
そして、その下にポート番号やドキュメントルートなどを追加していきます。
例えばこんな感じですね。
# Listen ポート番号・・・受け付けるポート番号を定義
# <VirtualHost *:ポート番号>・・・上記で指定したポートと同一に
# DocumentRoot・・・WEBサイトのドキュメントルート
Listen 49152
<VirtualHost *:49152>
DocumentRoot "/Applications/MAMP/htdocs/demo-01"
</VirtualHost>
Listen 49153
<VirtualHost *:49153>
DocumentRoot "/Applications/MAMP/htdocs/demo-02"
</VirtualHost>
Listen 49154
<VirtualHost *:49154>
DocumentRoot "/Applications/MAMP/htdocs/demo-03"
</VirtualHost>
Listen 49155
<VirtualHost *:49155>
DocumentRoot "/Applications/MAMP/htdocs/demo-04"
</VirtualHost>この記述で４サイト分の記述を追加したことになります。
ちなみにポート番号に関してはご参考までに：ポート番号の種類
URLの確認
では実際にブラウザで確認してみましょう。
MAMPを再起動した後に以下のURLにアクセスしてみます。
「/Applications/MAMP/htdocs/demo-01/」に入れた内容は「http://localhost:49152」で。
同様に
・「http://localhost:49153」
・「http://localhost:49154」
・「http://localhost:49155」
とブラウザで閲覧できる状態になっていると思います。
ちなみに「/Applications/MAMP/htdocs/」の中身は「http://localhost:8888」で表示されます。
スマホで確認するには
バーチャルホストで作成したurlはApacheを動かしている端末だけでしか認識できないので、そのままではスマホなどで閲覧ができません。
エミュレーターでの確認ではやはり不十分なので実機で確認できるようにしましょう。
難しい設定をする必要はありません。
Macの「システム環境設定」→ 「共有」を開くとコンピューター名とアドレスを設定・確認することができます。
「コンピュータ名」の下に記載されているアドレスでこのコンピュータにアクセスできますので控えておいてください。（例：mbp.local）
このMacのアドレスにMAMPのポート番号をつけて入力するとPC本体・スマホでも共通のurlで確認することが可能になります。
※スマホがPCと同じWi-fi環境になっていることが前提です。
「http://localhost:8888」→「http://mbp.local:8888」
「http://localhost:49152」→「https://oku-log.com」
「http://localhost:49153」→「http://mbp.local:49153」
…etc
hosts設定をしたりProxy サーバー機能をいじったりしなくても見れるのでこれで十分かと。
各サイトにWordPressをインストール
データベースを作成する
MAMP画面の真ん中にあるアイコン部分からスタートページにアクセスします。
画面左下の方にあるリンクから「phpMyAdmin」を開きます。
データベースのタブを選択し、データベース名を入力して「Create」をクリック。
「utf8_general_ci」の部分はそのままで大丈夫です。
これで「demo-01」というデータベースが作成されました。
次にこのデータベースとWordPressを連携させていきます。
WordPressのインストール
WordPress の公式サイトにアクセスしてWordPressのzipファイルをダウンロードします。
ダウンロードした圧縮ファイルを解凍し中身をWordPressを設置するドメインのフォルダに移動します。
例えば今回の例でいうと「/Applications/MAMP/htdocs/demo-01」のフォルダ内に移動します。
※「wp」フォルダなどに格納したい場合はフォルダを作成するなど適時対応してください。
これでWordPressのインストール環境は整ったので各サイトでWordPressの設定をしていきます。
WordPressの設定
「/Applications/MAMP/htdocs/demo-01」のフォルダ内にWordPressのファイルを入れたので「http://localhost:49152」にアクセスするとWordPressの設定画面が開きます。
ただし、スマホでもWordPressサイトを確認したい場合は「http://localhost:49152」から設定をするのではなく、Macのアドレスを使用した「https://oku-log.com」の方からWordPressを設定をしてください。
後からでも変更はできるのですが「http://localhost:49152」で設定を進めたとしても、スマホでは「https://oku-log.com」で確認することになります。
WordPressは設定された通りにlocalhostのurlを参照するのですが、スマホだとlocalhostにアクセス出来ず正常にWordPressのサイトを閲覧できなくなります。
具体的な設定方法はこんな感じです。
後はサイト名やメールアドレスなど必要な情報を入力していけばWordPressの設置が完了。
これを各サイトで行えばMAMPのバーチャルホスト設定で複数のWordPress環境を作成し、かつスマホでの実機確認も出来るようになります。
ちなみにiPhoneで実機確認するとこのようになります。
いかがでしょうか。
最初は少々面倒ですが、一度環境を作ってしまえば後は通常のサイト制作と同じように進めていけるかと思います。
