新しいマシンで設定するたびにググってはなかなか該当記事を見つけられずにいたので、備忘録がてら記事にします。結局「mamp バーチャルホスト」でググると該当記事がたくさんヒットしました。
複数のサイトを制作する際のローカル環境を作る
ローカル環境と本番環境のディレクトリ構成は揃えたい。ただし、複数の異なるドメインサイトを制作する場合、デフォルトの設定だと単一ドメインでのローカル環境のみが作られるのでうまくいかない。
mampのバージョン3.xでは、mampを起動した画面で、「設定」→「Apache」を選択し、「ドキュメントのルート」を変更することで実現できるが、都度変更しながら制作するのはとても面倒。
そこで、ローカル環境用に任意のドメインで、ローカル環境と本番環境のディレクトリ構成は揃えつつ、毎度ドキュメントのルートを変更することなく制作できる設定の備忘録。
やりたいことはこんなイメージ。
| 本番URL | ローカル環境のURL |
|---|---|
| https://simplesimples.com/ | local.simplesimplesdesign/ |
| https://tabinoto.com/ | local.tabinoto/ |
やることは3つだけです。
- バーチャルホストの設定ファイルを有効にする
- バーチャルホストの設定を追記する
- hostsを追加する
バーチャルホストの設定ファイルを有効にする
- 「アプリケーション」→「MAMP」→「conf」→「apache」にある、httpd.conf を開く。
- ファイル内を「Virtual hosts」で検索。
該当箇所の「#Include …」を「Include …」と「#」を取って上書き保存する。- 変更前
-
# Virtual hosts # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
- 変更後
-
# Virtual hosts Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
バーチャルホストの設定を追記する
- 「アプリケーション」→「MAMP」→「conf」→「apache」→「extra」にある、httpd-vhosts.conf を開く。
- ファイル内の下部に下記を追記する。DocumentRootにはローカル環境のパスを、ServerNameは画面確認時に使用したい任意のアドレス名を入力する。
<VirtualHost *:80> DocumentRoot "/Users/xxx/Documents/simplesimplesdesign.com" ServerName local.simplesimplesdesign </VirtualHost> <VirtualHost *:80> DocumentRoot "/Users/xxx/Documents/tabinoto.com" ServerName local.tabinoto </VirtualHost>
hostsを追加する
- Finderのメニュー「移動」→「フォルダへ移動」を選択する。
- フォルダの場所を入力の欄に「/private/etc/hosts」と入力して、「移動」を選択する。
- ファイル「hosts」を開く。
- ファイルの下部に下記を追加する。
127.0.0.1 local.simplesimplesdesign 127.0.0.1 local.tabinoto
最後に確認
MAMPを再起動して、ブラウザを立ち上げ、「local.simplesimplesdesign」「local.tabinoto」がそれぞれ正しく表示されることを確認して完了です。