【初心者向け】初めてMAMPを使ってWP利用＋複数バーチャルホスト設定までの方法

はじめに

今まではDockerやlocalを利用していたが転職を機に社内ルールに則りMAMPを使うことに。
社内のマニュアルを見ても何度もエラーばかりでうまく動作しなかった背景から
このドキュメントを後世に残します。
なるべく一つ一つの手順を具体的な形で記述したいと思います。

作業一覧

1. MAMPダウンロード
2. MAMP初期設定
3. 各種ファイルを更新
   a. httpd.conf
   b. httpd-vhosts.conf
   c. hosts
4. MAMP再起動
5. phpMyAdminデータベース作成
6. WordPressインストール
7. URLアクセス
8. index.php修正（サブディレクトリにWordPressがある場合）

実作業

1. MAMPダウンロード

以下の公式サイトよりMAMPをダウンロード

ご自身の環境に合わせてダウンロード場所を選択してください。

インストーラーが起動したら画面に沿って進めてください。
（基本、「はい」とか「進める」とかで大丈夫です。）

2. MAMP初期設定

ダウンロードが終わったら、MAMPを起動し管理画面上の設定を確認します。
画面左上のPreferencesを開いて設定を見てみましょう。


デフォルトから変更しているのはPortsのみ。
OKボタンの上にある「80 & 3306」をクリックするだけ。
「Apache Port」「Nginx Port」の内容が自動的に80に、
「MySQL port」が3306になればOK。

終わったらOKを押して管理画面に戻りましょう。

3. 各種ファイルを更新

次にテキストエディターを使ってファイルを更新します。
更新するファイルは全部で３つです。
・ httpd.conf
・ httpd-vhosts.conf
・ hosts

a.httpd.conf

MacのFinderアプリを開いてアプリケーションを選択します。
その中に今ダウンロードした「MAMP」を選択します。

MAMP > conf > apacheと進んでいき、「httpd.conf」をテキストエディターで開きます。
（格納場所：アプリケーション > MAMP > conf > apache > httpd.conf）

614行目あたりに以下のコメントアウトされた箇所があると思うので

httpd.conf

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

以下のように「Include〜」の前だけコメントアウトをはずして保存します。

httpd.conf

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

b. httpd-vhosts.conf

次にhttpd-vhosts.confも更新します。
格納場所はhttpd.confと似たようなところにあります。
（格納場所：アプリケーション > MAMP > conf > apache > extra > httpd-vhosts.conf）

こちらも同様にテキストエディターで開きましょう。
ファイルの下の方まで見てみると以下の画像のような箇所があると思います。

その下（一番下）に新しくWordPressを設置する名前をそれぞれ書いていきます。

httpd-vhosts.conf

# {後から見返してもわかりやすいようにコメント}
<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/{WordPressを格納する箇所}"
    ServerName {今後利用するローカル上のURL}
</VirtualHost>

後から見返してもわかりやすいようにコメント:

これはそのまま、わかりやすいコメントをしておくとよいでしょう

WordPressを格納する箇所：

１つのWordPressしかダウンロードしなければhtdocsの直下に直接格納してしまって問題ありません。
しかし複数の取引先や開発案件がある場合には、複数WordPressが必要になるかと思いますので
htdocs直下には取引先・案件名などのディレクトリを追加し、その中にWordPressを追加することになると思います。
今回は複数WordPressを入れる想定で記述をしていきたいと思います。

今後利用するローカル上のURL：

誤って公開しているサイトにアクセスしないよう
間違えにくく、わかりやすいURLにすることが望ましいです。
例えば、
＜ローカル環境で作成する開発名＞ + ＜取引先名＞ + ＜案件名＞
などで括ると間違えにくく、わかりやすいURLになっていてオススメです。

参考例を挙げると・・
Sample株式会社の採用サイトをつくることになった場合、以下のように記述するといいかもしれません。

httpd-vhosts.conf

# Sample株式会社（採用サイト）
<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/sample/recruit/"
    ServerName localdev.sample-recruit
</VirtualHost>

記述したら同じようにファイルの保存をお忘れなく。

c. hosts

最後はhostsファイルを更新します。
Finderを開いた状態で画面上部のメニューから「移動」を選択。
その中からさらに「フォルダへ移動」を選択しましょう。

次にどこに異動するのか、入力を求められると思いますので
以下をコピーしてEnterを押しましょう。
一発で対象のhostsファイルが表示されると思います。

/private/etc/hosts

表示されたらこちらもテキストエディターなどで開いてみましょう。
一番下の行に、先ほど「httpd-vhosts.conf」で記述した{今後利用するローカル上のURL}があったと思います。
それをこちらにも入力しましょう。
記述の仕方は以下の通りです。

127.0.0.1	{今後利用するローカル上のURL}

参考例の場合（localdev.sample-recruit）ならこちら

127.0.0.1	localdev.sample-recruit

こちらで保存しましょう。

※おそらく、このhostsファイルはとても大切なファイルなので
保存するときにパスワード入力を求められると思います。画面指示に従って保存するようにしてください。

4. MAMP再起動

MAMPを再起動しましょう。
DockにあるMAMPを修了し、再度起動させればOKです。

5. phpMyAdminデータベース作成

次にデータベースの方を見ていきます。
MAMPを起動して管理画面、一番右上の「Start」ボタンをクリック。

するとブラウザ上で以下のような画面が表示されると思います。

画面左上の「Tools」より、phpMyAdminをクリックすると、
phpMyAdminの管理画面が表示されます。

左側のメニューより「新規作成」を選択。

データベース名を入力して「作成」ボタンをクリックします。
名前は自由ですが後から見てもわかりやすいように
ここでは先ほどの【sample-recruit】を流用し同じデータベース名にしています。

6. WordPressインストール

次にWordPressをダウンロードし設定までしていきます。
すでに本番サイトなど別のサイトのバージョンとあわせる必要があればそのバージョンを。
最新でよければ最新のバージョンをWordPress公式サイトからダウンロードしてきます。

最新版はこちら↓↓

バージョンに指定がある場合はこちら↓↓

Zipファイルなどでダウンロードできたら、
MAMPのhtdocsフォルダの中に入れることになります。
ここでhttpd-vhosts.confに記述した
以下のコードを思い出してほしいのですが、

httpd-vhosts.conf

# Sample株式会社（採用サイト）
<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/sample/recruit/"
    ServerName localdev.sample-recruit
</VirtualHost>

「DocumentRoot」に記述している同じフォルダ構成にする必要があります。
今回はMAMP > htdocsの中に
新規で「sample」フォルダを作って、
さらにその中に「recruit」フォルダを作成します。

そして、その「recruit」フォルダの中に
さきほどダウンロードしてきたWordPressのデータ一式を移動すればOKです。

そうしたら、ブラウザからWordPressにアクセスしたいので
httpd-vhosts.confの中に記述した
「ServerName」のドメインにブラウザからアクセスしてみましょう。
（うまくいかない場合は、http:// を頭につけてアクセスしてみてください。）
例

http://localdev.sample-recruit/

アクセスすると以下のようにWordPressのインストール画面が表示されます。

「さあ、始めましょう！」をクリックすると次のようなページに飛びます。

入力する内容はそれぞれ
MAMPのスタート画面から確認する必要があります。
少しだけスクロールするとMySQLがあると思うのでクリックして中身を展開します。
（他サイト（MAMPを使ってローカル環境にWordPressをインストールする方法）から画像を引用
https://lucy.ne.jp/bazubu/how-to-insall-wp-in-mamp-23798.html）

データベース名 ：「5.phpMyAdminデータベース作成」で作成したデータベース名（例：sample-recruit）
ユーザー名 ：MAMPのスタート画面MySQLのユーザ名
パスワード ：MAMPのスタート画面MySQLのパスワード
データベースのホスト名：MAMPのスタート画面MySQLのホスト
テーブル接頭辞：初期値のままでOK
（ひとつのデータベースに複数のWordPressをインストールしたい場合のみ変更）

「送信」をクリック後、必要情報を入力し、「wordpressをインストール」ボタンをクリックすると
なにも問題なければログイン画面に遷移しますのでログインして管理画面に入ってみましょう。

以上、これでMAMPの設定と、WordPressを利用するまでの方法となります。

7. ２つ目以降のWordPressをローカル環境に設置する場合

基本的には先に行った、以下の部分だけ繰り返し実施すればOK。

1. 各種ファイルを更新
   a. httpd-vhosts.conf
   b. hosts
2. MAMP再起動
3. phpMyAdminデータベース作成
4. WordPressインストール
5. URLアクセス

参考資料

MAMPを使ってローカル環境にWordPressをインストールする方法