芝生やDIY等のライフハックやWeb制作情報を発信するメディア

【XAMPPもMAMPも不要！】Macで複数のローカルサーバ（バーチャルホスト）を立てる方法

Web2017年9月15日

ローカルサーバを立てる際、WindowsではXAMPP、MacではMAMPを使うのがわりとセオリーだと思います。しかし、最近のMacにはApacheが最初から入っているので、実はMAMPなどのツールは必要なく、既存ファイルの設定をゴニョゴニョいじることでローカルサーバを複数立てることが可能です。本記事ではMAMPを使わずに、Macで複数のローカルサーバを立てる手順をご紹介させていただきたいと思います。

MacでMAMPもXAMPPもを使わずに複数のローカルサーバを立てる手順

以下の手順で設定を行っていきたいと思います。

  1. Apacheをテスト起動
  2. ユーザーディレクトリの作成
  3. httpd.confを編集
  4. httpd-userdir.confを編集
  5. ユーザ名.confの作成
  6. httpd-vhost.confを編集
  7. hostsファイルを編集
  8. Apacheを再起動
  9. ローカルサーバを開く

今回、ホームディレクトリに「Sites」というフォルダを作って、さらにSites/直下に「hoge」「moge」ディレクトリを格納し、それぞれをローカルサーバとして設定してみたいと思います。

users
└ユーザ名
 └Sites
  └hoge（これをローカルサーバに）
  └moge（これをローカルサーバに）

①Apacheをテスト起動

最初からMacにApacheは入っていますが、念のためターミナルで以下のコマンドを叩いて、Apacheが起動するか確認してみましょう。

sudo apachectl start

パスワードを求められたら、お使いのMacのパスワードを入力してください。

続いて、ブラウザでhttp://localhost/を開いてみてください。「It works!」が表示されていればOKです。

②ユーザーディレクトリの作成

ターミナルで以下のコマンドを叩いて、ユーザーディレクトリ「Sites」を作成しておきます。

mkdir Sites

③httpd.confの編集

httpd.confは/etc/apache2/直下にありますが、Finderから階層を降りようとしても/etc/というフォルダは見つかりません。Finderのメニューから[フォルダへ移動]より以下のパスを入力して移動することでたどり着くことができます。

/etc/apache2/

SSIを有効にする

デフォルトではSSIが無効になっているので、以下の変更を加えます。

#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
↓ 
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml .html
  • ※ついでに.htmlの拡張子も有効化します

PHPを有効にする

phpを使わなければ別にやる必要は無いんですが、WordPressなどをローカルで動かしたい場合はphpが必要になるため、以下の変更を加えます。

#LoadModule php5_module libexec/apache2/libphp5.so
↓ 
LoadModule php5_module libexec/apache2/libphp5.so
  • ※OSが「Hige Sierra」の場合はphpのバージョンが7になっているので、その場合は「php5」を「php7」に置き換えてください

ユーザーディレクトリを有効化

以下のコメントアウトされている記述について、コメントアウトを外します。

#LoadModule userdir_module libexec/apache2/mod_userdir.so
↓ 
LoadModule userdir_module libexec/apache2/mod_userdir.so
#Include /private/etc/apache2/extra/httpd-userdir.conf
↓ 
Include /private/etc/apache2/extra/httpd-userdir.conf

この「ユーザーディレクトリの有効化」及び後述の「ユーザ名.confの作成」はWindows環境では不要な操作ですが、Macではデフォルトのルートディレクトリ「/Library/WebServer/Documents/」配下の権限はなんとroot権限になっており、ここに複数ローカルサーバ用のディレクトリを作っても「Fobidden」となってしまいます。そのためこのように、ユーザーディレクトリを使うよう設定をすることで、任意のディレクトリをローカルサーバとして扱うことが可能となります。

バーチャルホストを有効化

以下のコメントアウトされている記述について、コメントアウトを外します。

#Include /private/etc/apache2/extra/httpd-vhosts.conf
↓ 
Include /private/etc/apache2/extra/httpd-vhosts.conf

④httpd-userdir.confを編集

/etc/apache2/extra/httpd-userdir.confをエディタで開き、以下の変更を加えます。

#Include /private/etc/apache2/users/*.conf
↓ 
Include /private/etc/apache2/users/*.conf

⑤ユーザ名.confの作成

/etc/apache2/users/ユーザー名.confを作成し、以下の記述で保存します。

<Directory "/Users/ユーザ名/Sites/">
AllowOverride All
Options Indexes FollowSymLinks Multiviews
Require all granted
</Directory>

⑥httpd-vhost.confを編集

バーチャルホストを設定します。/etc/apache2/extra/httpd-vhosts.confをエディタで開いて、一番下に以下の記述を加えます。

#hoge
Listen 8082
<VirtualHost *:8082>
DocumentRoot "/Users/ユーザ名/Sites/hoge"
serverName hoge
</VirtualHost>

#moge
Listen 8084
<VirtualHost *:8084>
DocumentRoot "/Users/ユーザ名/Sites/moge"
serverName moge
</VirtualHost>

⑦hostsファイルを編集

先ほどhttpd-vhost.confで設定したサーバーネームにあわせて以下の記述を書き加えます。

127.0.0.1 hoge
127.0.0.1 moge
::1	hoge
::1	moge

⑧Apacheを再起動

ターミナルで以下のコマンドを叩いて、Apacheを再起動します。

sudo apachectl restart

⑨ローカルサーバを開く

hogeとmogeそれぞれ、以下のURLでローカルサーバが表示できれば成功です。

  • ※確認用として、適当なindex.htmlを/Users/ユーザ名/Sites/hoge/直下と/Users/ユーザ名/Sites/moge/直下にそれぞれ格納しておきましょう
http://hoge:8082/index.html

http://moge:8084/index.html

まとめ

最初はMAMPやXAMPP for Macなどを使ってやろうかなとも思ったんですが、せっかくなのでMacの勉強も兼ねて、何のツールもいれずにローカルサーバを構築してみました。Windowsとは異なり、ユーザーディレクトリを作って、それを許可してあげないとForbiddenになるところで結構つっかかりましたが、上記の手順にてローカルサーバを構築することで、これまでWindowsで構築していた環境と同じ感覚で作業を行うことができるようになります。

Macでローカルサーバを複数構築する際はMAMPやXAMPPを使わなくても可能ですので、ぜひ本記事をご参考にしていただければ幸いです。

「Web」の他の記事を読む

ページの先頭に戻る