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

環境

• macOS Catalina(10.15.7)
• MAMP 6.3(最新ver.6.4 2021/08/09現在)
• iHosts - /etc/hosts Editor on macOS 1.4.0(最新：2021/06/06現在)
• ターミナル
• 利用ドメイン：.example (予約済みドメイン)

運用ドメインがない時

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

• .example
• example.com
• example.net
• example.org
• example.edu

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

MAMPでバーチャルホストの設定をする

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

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

↓

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

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

<VirtualHost *:80>
    ServerAdmin [email protected]
    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>
    DocumentRoot "/Users/[AccountName]/_data/example"
    ServerName www.m-r-design.example
    ServerAlias m-r-design-com.example
</VirtualHost>

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

参考：Apache入門

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

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

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

hostsを書き換える

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

1. WebブラウザにURLを入力する。
2. DNSサーバにドメインを問い合わせる。
3. DNSサーバはドメインからIPアドレスを特定して返答する。
4. Webブラウザは受け取ったIPアドレスに紐づくWebサーバにデータを要求する。
5. Webサーバは要求に応じて保存されたHTMLや画像などを返す。
6. 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 - /etc/hosts Editor on macOS
ターミナル嫌いの人はこれを使えばいい。
App Storeからインストール後、「開く」を押下するとターミナルでコマンドを打つよう案内が出る。

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

sudo /bin/chmod +a 'user:[AccountName]:allow write' /etc/hosts

右上に怪しい「H」マークが表示されるので、その中から「Edit Hosts…」を選択する。

DevelopmentにServerNameを追加してApplyを押下して変更を保存する。

設定し終わったらDevelopmentにチェックを入れて有効化する(Defaultはチェックを入れたまま)。

ターミナルでhostsを書き換える

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

sudo vi /private/etc/hosts                               

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

中身はこんな感じ。

##
# 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を叩いた時は自分自身にアクセスする」という設定にすれば良い。

##
# 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」を押下する。
今回使った順番通りにならべてみた。

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

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を起動。
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

参考リンク

ローカルホストに.localが不適当な理由

• 【絶対に使ってはいけない】Active Directory 構築時のドメイン名 - good-arrow’s blog
• トップレベルドメインに .dev や .local は使ってはいけない | DriftwoodJP
• LANで使用するドメイン名の注意点 – あららぼ
• 例示／実験用として利用できるドメイン名 － ＠IT
• 予約済みドメイン (.example, .localhost, .test) について | blog.jxck.io
• example.com - Wikipedia
• .test - Wikipedia
• トップレベルドメイン - Wikipedia

DNSサーバ・hosts

• Webページを表示するために、ブラウザはHTMLを一生懸命読んでいる！？【第5回】 | 今さら人に聞けないWebの仕組み | Web担当者Forum
• DNSサーバーとは？意味・定義 | ITトレンド用語 | NTTコミュニケーションズ
• インターネット10分講座 DNS - JPNIC
• ウェブのしくみ - ウェブ開発を学ぶ | MDN
• DNSサーバ - Wikipedia
• hostsファイルについて解説する - Kazuki Koide
• hostsとは？分かりやすく解説