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

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

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

## 実作業
### 1. MAMPダウンロード
以下の公式サイトよりMAMPをダウンロード

https://www.mamp.info/en/downloads/

ご自身の環境に合わせてダウンロード場所を選択してください。
![FireShot Capture 060 - Downloads - MAMP & MAMP PRO - www.mamp.info.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/e9448ae9-f92c-a727-f726-79c3c741d8fd.png)

インストーラーが起動したら画面に沿って進めてください。
（基本、「はい」とか「進める」とかで大丈夫です。）
![スクリーンショット 2023-04-12 9.30.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/b43d6cd0-0a19-b1c7-185e-5ccf5e78bb9f.png)

### 2. MAMP初期設定
ダウンロードが終わったら、MAMPを起動し管理画面上の設定を確認します。
画面左上のPreferencesを開いて設定を見てみましょう。
![スクリーンショット 2023-04-12 9.29.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/083da095-083a-e9f7-ff45-07565c73b608.png)
![スクリーンショット 2023-04-12 9.33.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/d39ee095-096c-643d-ed6b-1b0394c50d8c.png)
デフォルトから変更しているのはPortsのみ。
OKボタンの上にある「80 & 3306」をクリックするだけ。
「Apache Port」「Nginx Port」の内容が自動的に80に、
「MySQL port」が3306になればOK。
![スクリーンショット 2023-04-12 9.33.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/d4a4a247-c0e1-fa31-810e-15e3f6d28ba0.png)
![スクリーンショット 2023-04-12 9.33.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/2935b875-ab96-050d-e1e2-15032a01b62d.png)
![スクリーンショット 2023-04-12 9.33.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/82175e5a-8bba-939e-1393-5927d50b71f5.png)

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

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

#### a.httpd.conf
MacのFinderアプリを開いてアプリケーションを選択します。
その中に今ダウンロードした「MAMP」を選択します。
![スクリーンショット 2023-04-12 9.39.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/e3458e85-d803-3eb5-6a59-3c3cfe55bd5f.png)
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）

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

![スクリーンショット 2023-04-12 9.52.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/491209f5-606c-6cb8-7692-073caba11121.png)

その下（一番下）に新しく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を開いた状態で画面上部のメニューから「移動」を選択。
その中からさらに「フォルダへ移動」を選択しましょう。

![スクリーンショット 2023-04-12 10.05.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/4cbbf75a-19a7-302d-c715-28e4dce56d36.png)

次にどこに異動するのか、入力を求められると思いますので
以下をコピーしてEnterを押しましょう。
一発で対象のhostsファイルが表示されると思います。
```
/private/etc/hosts
```
![スクリーンショット 2023-04-12 10.06.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/85c7f055-ccb0-bd76-4474-202c11e27009.png)

表示されたらこちらもテキストエディターなどで開いてみましょう。
一番下の行に、先ほど「httpd-vhosts.conf」で記述した{今後利用するローカル上のURL}があったと思います。
それをこちらにも入力しましょう。
記述の仕方は以下の通りです。
```hosts
127.0.0.1	{今後利用するローカル上のURL}
```
参考例の場合（localdev.sample-recruit）ならこちら
```hosts
127.0.0.1	localdev.sample-recruit
```
![スクリーンショット 2023-04-12 10.12.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/4ed1cebe-f047-84c1-8d58-6b42e039700b.png)

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

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


### 4. MAMP再起動
MAMPを再起動しましょう。
DockにあるMAMPを修了し、再度起動させればOKです。
![スクリーンショット 2023-04-12 10.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/79c5861e-7814-3455-3a60-d2d5287ac78f.png)

### 5. phpMyAdminデータベース作成
次にデータベースの方を見ていきます。
MAMPを起動して管理画面、一番右上の「Start」ボタンをクリック。
![スクリーンショット 2023-04-13 10.04.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/fd41f5d7-94f3-5ed5-b3ac-a47f5734a57d.png)

するとブラウザ上で以下のような画面が表示されると思います。
![スクリーンショット 2023-04-13 9.40.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/8378aa85-58ee-b8e1-39a7-187f39941797.png)

画面左上の「Tools」より、phpMyAdminをクリックすると、
phpMyAdminの管理画面が表示されます。
![スクリーンショット 2023-04-13 9.41.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/ee8eb5a8-568c-8253-564a-a0af9bed0d86.png)

左側のメニューより「新規作成」を選択。
![スクリーンショット 2023-04-13 9.43.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/6208cc50-fbb7-60ab-f230-d4a42374c401.png)

データベース名を入力して「作成」ボタンをクリックします。
名前は自由ですが後から見てもわかりやすいように
ここでは先ほどの【sample-recruit】を流用し同じデータベース名にしています。
![スクリーンショット 2023-04-13 9.45.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/d2748ac4-03d1-3a34-fcd9-ce7626ab18d6.png)


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

最新版はこちら↓↓

https://ja.wordpress.org/download/

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

https://ja.wordpress.org/download/releases/

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です。
![スクリーンショット 2023-04-13 9.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/5a6ace82-d46f-ca21-6af6-0d35b067a509.png)

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

アクセスすると以下のようにWordPressのインストール画面が表示されます。
![スクリーンショット 2023-04-14 10.52.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/7052c139-d0b2-2adb-89d4-7d8c16ae16b4.png)

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

![スクリーンショット 2023-04-24 15.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/fb52f2a9-1bbb-ca61-5772-d92e14705005.png)


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

![](https://lucy.ne.jp/bazubu/wp-content/uploads/2014/11/mac-mamp-49.png)


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

![スクリーンショット 2023-04-24 15.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253440/fb52f2a9-1bbb-ca61-5772-d92e14705005.png)

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

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




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

基本的には先に行った、以下の部分だけ繰り返し実施すればOK。
1. 各種ファイルを更新
    a. httpd-vhosts.conf
    b. hosts
1. MAMP再起動
1. phpMyAdminデータベース作成
1. WordPressインストール
1. URLアクセス

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

https://lucy.ne.jp/bazubu/how-to-insall-wp-in-mamp-23798.html