初めてのMAMP【アプリ作成からサーバー起動まで】

## PHP学習時（主にlaravel使用）に利用しているMAMPのアプリデータ保存〜サーバー起動まで

MAMPのインストールについては　**[公式サイト](https://www.mamp.info/en/mac/)**　もしくは　**[参照記事](https://qiita.com/kutarou197/items/9ea4c7539f869a2959d2)**　をご参照ください。

### 作業一覧
1. MAMPにファイルを保存
2. Apachの設定（初回のみ）　VScode使用
3. Apachの設定（新規アプリ追加時）　VScode使用

今回の作業では、以下のものを使用しています。
・テキストエディタ = VScode
・コマンドライン = ターミナル





##事前準備
MAMPを起動しておきましょう。
一番右のアイコン「start servers」を押してサーバーを起動し、下図のように「stop servers」に変わったことを確認してください。右上のApache ServerとMySQL Serverも<font color="green">緑色<font color="black">に点灯します。

<img src="https://i.gyazo.com/ec9b0c73fb50f829bbfe042957a215ee.png" alt="Image from Gyazo" width="500"/>

##1.MAMPにファイルを保存
まずは新規アプリのファイル（フォルダ）をMAMPに保存します。

すでに`index.php`などのテキストファイルや`laravelapp`などのアプリケーションフォルダを作成済の方は、`Finder`を開いて、`htdocs`ディレクトリに移動させるだけです。

アプリケーション > MAMP > htdocs > <font color="blue">**ここに追加⬅︎**

<img src="https://i.gyazo.com/d037306cdd497fe292c41718bf10f049.png" alt="Image from Gyazo" width="500"/>

<details><summary>まだ新規ファイル（フォルダ）のない方</summary><div>
##### -ファイル作成なら
vscodeで`htdocs`以下に`index.php`などを作成しましょう。　
　
##### -アプリケーションフォルダ作成なら（推奨）
ターミナルで`htdocs`に移動して、`laravel new`コマンドを実行しましょう。
<font color="red">注意：`Application`の前に`/`を忘れずにつけましょう！

```:ターミナル
$ cd /Applications/MAMP/htdocs
$ laravel new <アプリ名>
```
</div></details>








##2.Apachの設定（初回のみ）　VScode使用
この作業は初回のみ行います。
#####2-a. apacheの設定ファイル`httpd.conf`を開きます。
<img src="https://i.gyazo.com/fe4ecb46d2eaa78a482062b4cd8ee41e.png" alt="Image from Gyazo" width="700"/>
575行目あたりにある以下文のコメントアウトを外してください。

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

⬇︎ コメントアウトを外す　⬇︎

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

#####2-b. `httpd-vhosts.conf`を開きます。
<img src="https://i.gyazo.com/af12b9ef4c528f573165c937c20a940b.png" alt="Image from Gyazo" width="700"/>
27~42行目あたりまでの以下２ブロックすべてのコメントアウトと、追記を行ってください。

```ini:httpd-vhosts.conf

⬇︎ ２つともコメントアウト　⬇︎

#<VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host.example.com
#    DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
#    ServerName dummy-host.example.com
#    ServerAlias www.dummy-host.example.com
#    ErrorLog "logs/dummy-host.example.com-error_log"
#    CustomLog "logs/dummy-host.example.com-access_log" common
#</VirtualHost>


#<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 "/Applications/MAMP/htdocs"
    ServerName localhost
</VirtualHost>

```

##3.Apachの設定（新規アプリ追加時）　VScode使用
この作業は新規アプリ作成の度に行ってください。

##### `httpd-vhosts.conf`を開きます。
（**2-b**と同じファイルです。つづけて作業される方はそのままお進みください。）

ファイルの一番下に以下を追記してください。

```ini:httpd-vhosts.conf
⬇︎ 一番下に追記　⬇︎

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/<アプリ名>"
    ServerName <アプリ名>
</VirtualHost>

# 補足
# 新規アプリごとに<virtualHost></VirtualHost>の記述を追加してください。
# DocumentRoot = アプリへのパス（保存されているアプリの場所）
# ServerName = ドメイン名（localhost/<ここにくる名前>）
```

設定ファイル編集後は必ずサーバーを再起動しましょう。（MAMP）

以上で作業は終了です。

##最終確認
プラウザで『[localhost](http://localhost/)』とだけ入力し確認しておきましょう。
以下のように**作業１**で`htdocs`に追加したファイル（フォルダ）の一覧が表示されれているはずです。

<img src="https://i.gyazo.com/b26769f90254ea3f0d168cf63b0cb9b2.png" alt="Image from Gyazo" width="400"/>

ここで参考用に追加した`sampleapp`というアプリケーションフォルダを開いてみます。（クリックで開く）すると以下のように表示されました。

<img src="https://i.gyazo.com/5b91676796b19309d5f4037b022bed5d.png" alt="Image from Gyazo" width="465"/>

プラウザのURLはこのようになっています。
<img src="https://i.gyazo.com/161dca73184aceba8a73874e08c3aa0a.png" alt="Image from Gyazo" width="315"/>

実は、この状態ではまだトップページが表示されていません。
URLの末尾に`public`を追記しましょう。以下が`sampleapp`のトップページです。

<img src="https://i.gyazo.com/9d2910fe3449788bbc63db62304ebe30.png" alt="Image from Gyazo" width="700"/>

次回はURLの末尾に`public`を追記しなくても、`localhost/アプリ名`の状態でトップページが表示されるように切り替える方法をお伝えします。

##参考資料
・[Terminal でのApplicationsフォルダについて 【APPLE公式サイト】](https://discussionsjapan.apple.com/thread/10145774)