MAMPにバーチャルホストを設定してWordPressのサイトを見る方法

MAMPは数年前から使っていましたが今のMacではデフォルト設定のままで、そこにWordPressを入れて使っていました。
デフォルトだと「http://localhost:8888/」でアクセスでき、ポートを80にすれば「http://localhost/」で見ることができます。
(数年前にポートの設定をした時は、Skypeを起動していたら80ポートを使えなかったり、システム環境設定>共有>Web共有にチェックを入れていてもダメだったり、色々と問題にぶつかりました・・・。)

誰かにURLを見せるわけじゃないしこのままでいっかと変更せずにいたら、ルート「http://hogehoge/」で始まるように変更する必要が出ました(°ー°;)
今回、今まで使っていたWordPressはそのままでバーチャルホストを設定して見れるよう。

以前、設定した時は色々分からなすぎて途中記憶が飛びかけ苦戦しましたが、今回はスムーズにできたので数年前の自分に分かりやすく教える気持ちでその流れをまとめました。

WordPressの変更を行う。

ダッシュボード>設定>一般を開きます。
スクリーンショット-2015-03-15-10.40.22

WordPress アドレス (URL)とサイトアドレス (URL)を変更したいURLへ書き換えて保存。

スクリーンショット-2015-03-15-10.39.44

バーチャルホストの設定が終わるまでWordPressのサイトは見れなくなります。

MAMPの変更を行う。

環境設定を開きます。
mamp01
ApachとMySQLの標準ポートに設定をクリック。
mamp02
OKをクリック。
mamp03
緑マークになったら正常です。
mamp04

バーチャルホストを設定する。

任意のドメインでローカルからアクセスできるように設定します。
ここでのドメインはどこかで購入する必要はなく自分の好きな値を指定することができます。(複数プロジェクトの設定も可能。)

修正・変更するのはこの2ファイル。
/Applications/MAMP/conf/apache/httpd.conf
/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

ファイルを編集する前にバックアップをとることをオススメします。

httpd.confを修正。

httpd.confをテキストエディタで開きます。

パスは「/Applications/MAMP/conf/apache/」

スクリーンショット-2015-03-15-14.09.28
「httpd.conf」ファイルへ。

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

テキストエディタで開くと524・525行目に上記の記述があります。(他の方は少し違う行かもしれません。)
コメントアウトの「# 」を外すことでファイルが読み込まれるようになります。
次に、この読み込むようになった「httpd-vhosts.conf」ファイルを編集します。

httpd-vhosts.confを変更。

httpd-vhosts.confをテキストエディタで開きます。
パスは「/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf」

スクリーンショット 2015-03-15 15.57.21

ファイルを開くと、こんな感じの記述がたくさんあります。

<VirtualHost *:80>
ServerAdmin webmaster@dummy-host2.example.com
DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
ServerName dummy-host2.example.com
ErrorLog "logs/dummy-host2.example.com-error_log"
CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

これの一番下に以下を追加します。

<VirtualHost *:80>
DocumentRoot "/Applications/MAMP/htdocs/wordpress"
ServerName wordpress.local
</VirtualHost>

▪︎”/Applications/MAMP/htdocs/wordpress”
表示させたいプロジェクトのフォルダ(この場合、wordpress)までのパスを指定。

▪︎ServerName wordpress.local
Server Nameの後ろには任意のドメイン(この場合、wordpress.local)を指定。

2ファイル修正しましたが、これだけではまだドメインでアクセスすることはできません。

hostsを変更。

hostsの設定を行う必要があります。

隠しファイル・フォルダを見れるように設定している人はそのまま以下のパスで「hosts」ファイルを開いてください。
パス「/private/etc/」

【余談】隠しファイル・フォルダの設定とは?

スクリーンショット-2015-03-15-14.54.26

privateという半透明なフォルダが見える人は設定されています。
設定はターミナルから行います。

※設定しなくてもファインダーから移動することができるので、ここは飛ばしても大丈夫です。

control + スペースキーでspotlightを起動。
terと入力すると自動補完で「terminal.app」が出てきます。

スクリーンショット-2015-03-15-15.03.00
コレをコピペします。

defaults write com.apple.finder AppleShowAllFiles TRUE

次に、finderを再起動するために下記をコピペ。

killall Finder

これで隠しファイル・フォルダも見えるようになったはずです。
隠しファイル・フォルダは見えると色々便利なので(他の作業の時など)私は常に見えるようにしてます。

Finderで移動して設定。

ターミナルを使わなくてもこちらの方法で隠しフォルダ内へ移動できます。

Finderを選択し「command+Shift+G」をクリック。
(または、Finder>移動>フォルダへ移動 をクリック。)
1eaf7a9f21da1556ac6ae9c7e84de79b

ダイアログが出てくるので以下のパスをコピペ。

/private/etc/

スクリーンショット 2015-03-15 14.39.26
パスへ飛ぶので「hosts」ファイルをテキストエディタで開きます。

スクリーンショット 2015-03-15 16.04.53

一番下に以下をコピペ。

127.0.0.1   wordpress.local

「wordpress.local」は各自、設定したいドメイン(httpd-vhosts.confに追加したもの)に変更してください。

MAMPを再起動。

再起動したらhttp://wordpress.localにアクセスできるか試してください。
アクセスできたら成功です!

お疲れ様でした(*´∀`*)