MAMPを使ってローカル環境を複数作ってみる - hostsを書き換えて任意のドメインでアクセスするよ


https://qiita.com/mrd-takahashi/items/98102064e58b9a226bc3

手っ取り早くポート番号でアクセスできる方法はあるものの、やっぱり正統派な使い方をしたほうがいいよね。
そこで、ローカル環境でも任意のドメインでアクセスできるようにします。

#環境
+ macOS Catalina(10.15.7)
+ [MAMP](https://www.mamp.info/) 6.3(最新ver.6.4 2021/08/09現在)
+ [iHosts - /etc/hosts Editor on macOS ](https://en.toolinbox.net/iHosts/) 1.4.0(最新：2021/06/06現在)
+ ターミナル
+ 利用ドメイン：```.example``` (予約済みドメイン)

#運用ドメインがない時
例示上```xxxxx.local```としている記事もあるのですが、```.local```は使うべきではないドメインです。
運用ドメインがなければ、例示や実験用として使えるドメインを使おう。

+ .example
+ [example.com](https://example.com/)
+ [example.net](https://example.net/)
+ [example.org](https://example.org/)
+ example.edu


https://qiita.com/jnchito/items/198a2561a36c2c2ef5e3

テストで仮に入力した```hoge@hoge.com```とか```test@test.jp```とかいうデタラメなメールアドレスも勿論NG。**送信テストした時に思わぬところに着信**しちゃうかも。
```hoge.com```も```test.jp```も所有者がいます。

#MAMPでバーチャルホストの設定をする
バーチャルホスト設定の参照先が無効になっている場合は有効にします。

```Apache:/Applications/MAMP/conf/apache/httpd.conf--605行
# Virtual hosts
#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
```
↓

```Apache:/Applications/MAMP/conf/apache/httpd.conf--605行
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
```

次に```ServerName```と、その名前でアクセスした際の**参照ディレクトリ**を指定します。
今回はホームディレクトリ直下に```/_data/example```というフォルダを作り、それを参照ディレクトリにしました。
書き方のサンプルがあるので、それに沿ってコピペ&修正。

```Apache:/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf--28行
<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>
```
↓

```Apache:/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
<VirtualHost *:80>
    DocumentRoot "/Users/[AccountName]/_data/example"
    ServerName www.m-r-design.example
    ServerAlias m-r-design-com.example
</VirtualHost>
```

　```ServerName```は例示用ドメイン```.example```を利用。
せっかくQiitaに記事を書くので、設定項目を簡単にまとめてみた。

| 項目 | 内容 |
|:---|:---|
|ServerAdmin|Apacheのエラー表示に含める問い合わせ先。URLも指定できる|
|DocumentRoot|参照ディレクトリ|
|ServerName|コンテンツを表示するためのホスト名|
|ServerAlias|ホスト名のエイリアス。例えば、サブドメイン有り・無しどちらでも同じコンテンツを表示することができる|
|ErrorLog|エラーログの場所|
|CustomLog|アクセス元のホスト名、クライアントの識別子、認証ユーザ名、リクエストを受け付けた時刻、リクエストの最初の行の値、最後のレスポンスステータス、送信されたバイト数(commonの場合)|
参考：[Apache入門](https://www.javadrive.jp/apache/)

```www``` は**サブドメイン**なので、あってもなくてもいい。
ただ、**URLは必ず```www```から始まると思っている一般ユーザーも多い**ので、あえて付けることもある。

```ServerAlias``` はリダイレクトとセットで使うことがほとんど。リダイレクト設定がない場合は 同じコンテンツのサイトが2つできる。
内容は同じものの、クローラーには「別サイト」と認識されるので、リダイレクト設定をしてURLを正規化する必要がある。
```Apache```か```.htaccess```でリダイレクトの設定をするけど、今回は省略。

これでバーチャルホストの設定は終了。

#hostsを書き換える
バーチャルホストだけ設定しても、任意のドメインでアクセスすることはできない。

1. WebブラウザにURLを入力する。
1. DNSサーバにドメインを問い合わせる。
1. DNSサーバはドメインからIPアドレスを特定して返答する。
1. Webブラウザは受け取ったIPアドレスに紐づくWebサーバにデータを要求する。
1. Webサーバは要求に応じて保存されたHTMLや画像などを返す。
1. Webサーバから返されたデータをWebブラウザで表示する。

…というような流れでWebサイトは表示されている。

　```www.m-r-design.example```がWebブラウザに入力された時、ローカル環境のIPアドレスが返される必要があるが、DNSサーバに問い合わせてみても```www.m-r-design.example```のIPアドレスは返ってこない（そりゃそうだ）。

そこで```hosts```の設定を変更して、```www.m-r-design.example```にアクセスした場合、自分自身のIPアドレス(127.0.0.1)を返すようにする。
なお、```hosts```の設定はDNSサーバより優先される。

hostsの書き換え方は大きく2種類ある。ターミナルを使うか、GUIのアプリを使う。

##iHostsでhostsを書き換える
![iHosts](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/1a9dc4d6-4594-22c3-5b9c-01adaffabf8a.jpeg)
[iHosts - /etc/hosts Editor on macOS ](https://en.toolinbox.net/iHosts/)
ターミナル嫌いの人はこれを使えばいい。
App Storeからインストール後、「開く」を押下するとターミナルでコマンドを打つよう案内が出る。

![iHostsダイアログ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/a73baabf-a29e-2686-41ec-414ed7bcc531.jpeg)

iHostに```/private/etc/hosts```の編集を許可するために必要なので、素直にターミナルを開いてコマンドを叩く。
```sudo```とはroot権限でコマンドを実行すると言うこと。ターミナルを使う時はお馴染み。

```
sudo /bin/chmod +a 'user:[AccountName]:allow write' /etc/hosts
```
右上に怪しい「H」マークが表示されるので、その中から「Edit Hosts…」を選択する。
![iHostsメニュー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/f0aab98d-1ffb-bf8c-1964-9ed7e49db709.jpeg)
Developmentに```ServerName```を追加して**Apply**を押下して変更を保存する。
![iHosts編集](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/2dc0289f-c3c2-4ad5-a6b5-9aed39854f83.jpeg)
設定し終わったら```Development```にチェックを入れて有効化する(Defaultはチェックを入れたまま)。
![iHosts5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/a212aa30-26d3-ca52-a9e7-4352291d10e1.jpeg)


##ターミナルでhostsを書き換える
ターミナル(黒い画面)が嫌いなデザイナーは結構いる。
GUIに慣れ親しんでいるので、テキストでファイルを動かすには抵抗があるし、正直「なんでもできる」のが怖い。
ただ、iHostsは常駐型ぽいのでなんとなく嫌だ。
そう言う時はターミナルで書き換える。

````
sudo vi /private/etc/hosts                               
````
sudo = root権限付与、vi = エディタ、/private/etc/hosts = ファイルパス の順で入力。
returnキーを叩くとパスワードを尋ねてくるので、Macのログインパスワードを使う。

中身はこんな感じ。

````test:/private/etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost
````

```127.0.0.1``` というIPは自分自身なので、「**このiMacで```www.m-r-design.example```を叩いた時は自分自身にアクセスする**」という設定にすれば良い。

````test:/private/etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
#127.0.0.1	localhost
255.255.255.255	broadcasthost
#::1             localhost

127.0.0.1 	www.m-r-design.example
````
最終行に今回の```ServerName```を追加して保存する。

###vimの使い方
vimのコマンドは、最低限この辺りを覚えておけばなんとかなる。
開始直後はコマンドモードなので、入力を始める時は「i」を押下する。
今回使った順番通りにならべてみた。

|コマンド|動き|
|:---:|:---|
|yy|今いる行をコピー|
|G|ページの最後に移動|
|p|カーソルの下の行にペースト|
|i|挿入モード(キーボード入力ができるようになる)|
|esc|コマンドモードに戻る|
|:wq|保存してvimを終了する|

保存関連のコマンドも覚えておくと便利。

|コマンド|動き|
|:---:|:---|
|:w|保存|
|:q|閉じる|
|:wq|保存してvimを終了する|
|:q!|保存せずvim終了する|

https://qiita.com/ktoyod/items/0a8491cdb6c0191ab0cc

#hostsの設定を確認する
どちらの方法を使っても、念のため、pingを打って設定を確認してみる。
この時、回数設定の```-c```を付けないとエンドレスで送り続けるので注意。
延々に結果が出続ける光景は、かなり恐怖を感じるwww
不幸にもオプションを付け忘れた時は```ctrl+c```を押下すると止まります(これを書いてないブログも結構あるw)。

とりあえず、今回は5回送ってみた。

```
ping -c 5 www.m-r-design.example
```
結果

```
PING www.m-r-design-com.example (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.029 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.061 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.101 ms
64 bytes from 127.0.0.1: icmp_seq=3 ttl=64 time=0.115 ms
64 bytes from 127.0.0.1: icmp_seq=4 ttl=64 time=0.093 ms

--- www.m-r-design-com.example ping statistics ---
5 packets transmitted, 5 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 0.029/0.080/0.115/0.031 ms
```
IPは```172.0.0.1```を見ているので、正しく設定されている。

#MAMPのApache Portを変更する
MAMPを起動する前に、コントロールパネルで```8888```になっているポート番号を``80``に変更する。
『Set Web &MySQL port to:』の『80 & 3306』を押下し、画像のような状態にします。
![MAMPコントロールパネル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44795/5a5fd4e6-d4ca-92a9-85be-eb029f40fbdd.jpeg)

ここまでの設定が終わったらMAMPを起動。
```www.m-r-design-com.example```にアクセスすると、```DocumentRoot```で設定したフォルダが見るようになります。

今回は```.example```という予約済みドメインを利用しましたが、同様に独自ドメインを設定する事も可能。
バーチャルホストを増やす時は、同じように設定を増やしていけばOK.
ただし、**作業が終わったら、hostsを元に戻しておくことをお忘れなく**。

#hostsの設定が反映されない
いづれかを確認・操作すると反映されることが多い。

+ ```/Applications/MAMP/conf/apache/httpd.conf```確認
+ ```/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf```確認
+ ```/private/etc/hosts```確認
+ ブラウザキャッシュ削除、再起動
+ MAMPのポート確認
+ MAMP再起動
+ Mac再起動

これでもダメなら、ターミナルを使ってDNSのキャッシュをクリアする。
うまくいかない時は設定を確認した後、DNSキャッシュをクリアしちゃってます。これで大体解決するので、再起動しなくても良いことが多いです。

```
sudo killall -HUP mDNSResponder
```
参考：[mac環境でhostsを設定、反映されない時はDNSキャッシュをリセット | WEBコンサルティング・WEB制作のフリーランス uiuifree](https://uiuifree.com/blog/develop/mac-hosts/)

#参考リンク
##ローカルホストに```.local```が不適当な理由
+ [【絶対に使ってはいけない】Active Directory 構築時のドメイン名 - good-arrow’s blog](https://good-arrow.hatenablog.com/entry/2019/06/12/030632)
+ [トップレベルドメインに .dev や .local は使ってはいけない | DriftwoodJP](https://www.d-wood.com/blog/2018/10/26_10573.html)
+ [LANで使用するドメイン名の注意点 – あららぼ](https://ararabo.com/2017-09-16/?p=3126)
+ [例示／実験用として利用できるドメイン名 － ＠IT](https://atmarkit.itmedia.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html)
+ [予約済みドメイン (.example, .localhost, .test) について | blog.jxck.io]
(https://blog.jxck.io/entries/2017-09-27/example-local-test-domains.html)
+ [example.com - Wikipedia](https://ja.wikipedia.org/wiki/Example.com)
+ [.test - Wikipedia](https://ja.wikipedia.org/wiki/.test)
+ [トップレベルドメイン - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%83%E3%83%97%E3%83%AC%E3%83%99%E3%83%AB%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3#%E4%BA%88%E7%B4%84%E6%B8%88%E3%81%BF%E3%81%AE%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3)

##DNSサーバ・hosts
+ [Webページを表示するために、ブラウザはHTMLを一生懸命読んでいる！？【第5回】 | 今さら人に聞けないWebの仕組み | Web担当者Forum](https://webtan.impress.co.jp/e/2019/03/06/31843)
+ [DNSサーバーとは？意味・定義 | ITトレンド用語 | NTTコミュニケーションズ](https://www.ntt.com/bizon/glossary/e-d/dns-server.html)
+ [インターネット10分講座 DNS - JPNIC](https://www.nic.ad.jp/ja/newsletter/No22/080.html)
+ [ウェブのしくみ - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works#dns_explained)
+ [DNSサーバ - Wikipedia](https://ja.wikipedia.org/wiki/DNS%E3%82%B5%E3%83%BC%E3%83%90)
+ [hostsファイルについて解説する - Kazuki Koide](https://koirand.github.io/blog/2020/hosts/)
+ [hostsとは？分かりやすく解説](https://blog.senseshare.jp/hosts.html)