macoblog

「ゲーム × プログラミング」で生きていく

アプリ検索ツール(β版)を公開

MAMPでバーチャルホストを設定する方法【初心者&Mac向け】

TOOL

WEB制作担当者

WEB制作担当者
「サイト制作する際MAMPを使ってローカル環境を構築しているんだけど、”localhost”から始まるドメインじゃちょっと使いづらい、これだとパスも変わってくるからなんとかしたいんだけど、何か解決策ある?」

こんなニーズに答える記事になります。

本記事では、MAMPでバーチャルホストを設定する方法について解説しています、サイト制作でローカル環境を構築する際、出来るだけ本番環境に合わせたいという方にオススメの記事です。

「まだ、”localhost”使ってるの?」

・バーチャルホストを設定するとは?
MAMPでローカル環境を構築する際、htdocs内に”sample”というディレクトリを作ると、そのサイトリンクは"localhost/sample"になりますが、バーチャルホストとして追加すると、これが"sample.jp"で見れるようになります。
 
つまり、より本番環境に近い形にすることができるということ。

目次【本記事の内容】

※バーチャルホストを設定するにはいくつかファイルを編集する必要があります、その際必ずバックアップを取った上で行うようにしてください。

MAMPでバーチャルホストを設定(追加)する

今回はMacユーザーを想定したバーチャルホストの設定方法について解説したいと思います(解説もMac環境を前提に解説します)

Windowsユーザーの方でも設定は可能ですが、ディレクトリのパスが少し変わってくるのでそこは注意してください(xamppでバーチャルホストを自由に設定する方法で解説しているパスを参考にするといいです)

"localhost/sample""sample.com"でアクセスできるように、バーチャルホストを設定したいと思います。

ステップ1:MAMPのhttpd.confを編集する

/Applications/MAMP/conf/apache/httpd.conf

上記のファイルを開いてください、どこから探せばいいのかわからないって方はFinderを開いている状態で、shift+command+G(き)を押して上にあるパスを入力すれば簡単にファイルまでいけます。

ファイルを開いたら下記のように編集して保存してください("# "を消すだけです)、584行付近にあるはずです。

【編集前】
# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
【編集後】
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

ステップ2:MAMPのhttpd-vhosts.confを編集する

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

上記のファイルを開いてください、先ほどのショートカットを使えば簡単に見つかります。

開いたらファイルの一番下に下記コードをコピペしてください。

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/ディレクトリ名"
    ServerName 任意のドメイン
    ErrorLog "/Applications/MAMP/logs/ディレクトリ名"
</VirtualHost>
 
<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs"
    ServerName localhost
    ErrorLog "/Applications/MAMP/logs/apache_error.log"
</VirtualHost>

今回は”sample”という名前でhtdocsに設置しているので、コピペしたテンプレートを下記のように編集します。

<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs/sample"
    ServerName sample.com
    ErrorLog "/Applications/MAMP/logs/sample"
</VirtualHost>
 
<VirtualHost *:80>
    DocumentRoot "/Applications/MAMP/htdocs"
    ServerName localhost
    ErrorLog "/Applications/MAMP/logs/apache_error.log"
</VirtualHost>

htdocs内に用意したディレクトリ名を指定して、ドメインを設定する(任意)だけですね。

ステップ3:Macのhostsファイルを編集する【注意】

Mac側のhostsファイルを編集すればバーチャルホストの設定は完了です、ここが踏ん張りどころです、どうぞ最後までお付き合いください。

/private/etc/hosts

上記のファイルを開いて、ファイルの一番下に下記をコピペしてください。

127.0.0.1	sample.com

sample.comの部分をステップ2で設定したものに置き換えてご利用ください、これでバーチャルホストが設定できています、アクセスして確認してみてください。

よくある質問:上手く設定できない方へ

「よくある質問:上手く設定できない方へ」

バーチャルホストの設定がうまくいかない方の為に、よくある質問を挙げつつ回答しておきます。

アクセスしても表示されない

・回答
MAMPを再起動してアクセスし直してみてください、PCも再起動させると尚良しです。

vhostsファイルを編集できない

・回答
vhostsファイルを複製して、デスクトップに落としてそれを編集してみてください。

vhostsファイルの編集権限がない

・回答
vhostsファイルを右クリック > 情報を見る > 共有とアクセス権に自分を追加する、これで編集できるはずです。