手っ取り早くポート番号でアクセスできる方法はあるものの、やっぱり正統派な使い方をしたほうがいいよね。
そこで、ローカル環境でも任意のドメインでアクセスできるようにします。
環境
- 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
テストで仮に入力したhoge@hoge.comとかtest@test.jpとかいうデタラメなメールアドレスも勿論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 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>
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入門 |
www はサブドメインなので、あってもなくてもいい。
ただ、URLは必ずwwwから始まると思っている一般ユーザーも多いので、あえて付けることもある。
ServerAlias はリダイレクトとセットで使うことがほとんど。リダイレクト設定がない場合は 同じコンテンツのサイトが2つできる。
内容は同じものの、クローラーには「別サイト」と認識されるので、リダイレクト設定をしてURLを正規化する必要がある。
Apacheか.htaccessでリダイレクトの設定をするけど、今回は省略。
これでバーチャルホストの設定は終了。
hostsを書き換える
バーチャルホストだけ設定しても、任意のドメインでアクセスすることはできない。
- WebブラウザにURLを入力する。
- DNSサーバにドメインを問い合わせる。
- DNSサーバはドメインからIPアドレスを特定して返答する。
- Webブラウザは受け取ったIPアドレスに紐づくWebサーバにデータを要求する。
- Webサーバは要求に応じて保存されたHTMLや画像などを返す。
- 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」を押下する。
今回使った順番通りにならべてみた。
| コマンド | 動き |
|---|---|
| yy | 今いる行をコピー |
| G | ページの最後に移動 |
| p | カーソルの下の行にペースト |
| i | 挿入モード(キーボード入力ができるようになる) |
| esc | コマンドモードに戻る |
| :wq | 保存してvimを終了する |
保存関連のコマンドも覚えておくと便利。
| コマンド | 動き |
|---|---|
| :w | 保存 |
| :q | 閉じる |
| :wq | 保存してvimを終了する |
| :q! | 保存せずvim終了する |
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]
(https://blog.jxck.io/entries/2017-09-27/example-local-test-domains.html) - example.com - Wikipedia
- .test - Wikipedia
- トップレベルドメイン - Wikipedia