2019年4月13日 / 最終更新日 : 2020年1月5日開発環境・ツール

（Mac）ApacheのVirtual Hostでローカル開発環境を構築する

1 ApacheのVirtual Hostで開発環境を構築する

ApacheのVirtual Hostで開発環境を構築する

MacでWebサーバーソフト、Apache HTTP Server（以下Apache）を使用して
Webサイトのローカル開発環境を作成する方法をメモします。
（MacにはデフォルトでApacheがインストールされています）

ひとつのWebサーバーで複数のサイトを管理する事が出来る、ApacheのVirtual Hostという機能を使用します。

環境 : Mac OS High Sierra 10.13.12、Apache 2.4.28

Apacheの起動と確認

ターミナルを開き、以下のコマンドを叩いてApacheのバージョンを確認出来ます。
httpd -version
もしくは
httpd -v

$ httpd -version
Server version: Apache/2.4.28 (Unix)

1 2	$ httpd -version Server version: Apache/2.4.28 (Unix)

Apacheを起動する

sudo apachectl start

$ sudo apachectl start

1	$ sudo apachectl start

ブラウザからhttp://localhost/へアクセスしてApacheの起動を確認する。

デフォルトで用意されている以下のページが表示されればOK

テストページを作成する

ホームディレクトリ配下にあるSitesディレクトリ内へ開発するサイトのソースを格納するディレクトリを作成します。

apache-test/index.htmlを作成

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Apache Test</title>
</head>
<body>
    <p>Apacheのテスト！</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Apache Test</title>

</head>

<body>

<p>Apacheのテスト！</p>

</body>

</html>

Apacheの設定を変更する

作成したテスト用ページへブラウザからアクセスするために
以下の設定ファイルに変更を加えていきます。

/etc/apache2/extra/httpd-vhosts.conf
/etc/apache2/httpd.conf
/etc/apache2/users/（ユーザ名）.conf

/etc/apache2/extra/httpd-vhosts.confを編集する

ターミナルから管理者権限でファイルを開く。

$ sudo vi /etc/apache2/extra/httpd-vhosts.conf

1	$ sudo vi /etc/apache2/extra/httpd-vhosts.conf

INSERTモードに切り替え以下のように編集する。

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/username/Sites/apache-test"
    ServerName apache-test
    ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"
    CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common
</VirtualHost>

ServerAdmin webmaster@dummy-host2.example.com

DocumentRoot "/Users/username/Sites/apache-test"

ServerName apache-test

ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"

CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common

</VirtualHost>

※<VirtualHost *:80>タグで囲まれた中身を確認する。
※ 初期状態で2つありますが、下の方を変更すればOKです。

タグ内の以下の箇所を指定する

「DocumentRoot」: サイトの公開ディレクトリを指定する
（作成したテスト用ページを格納するディレクトリパス）
「ServerName」: ページにアクセスするためのホスト名を指定する

後から他のサイトの公開ディレクトリを追加する場合は
VirtualHostタグを丸ごとコピーして下に追記し、
DocumentRootとServerNameを追加したいサイトのものへ書き換えればOKです。

/etc/apache2/httpd.confを編集する

ターミナルから管理者権限でファイルを開く。

$ sudo vi /etc/apache2/httpd.conf

1	$ sudo vi /etc/apache2/httpd.conf

INSERTモードに切り替え以下の行を有効化する。
（#コメントアウトを外して有効化する）

172 LoadModule userdir_module libexec/apache2/mod_userdir.so

1	172 LoadModule userdir_module libexec/apache2/mod_userdir.so

510 Include /private/etc/apache2/extra/httpd-userdir.conf

1	510 Include /private/etc/apache2/extra/httpd-userdir.conf

516 Include /private/etc/apache2/extra/httpd-vhosts.conf

1	516 Include /private/etc/apache2/extra/httpd-vhosts.conf

/etc/apache2/users/（ユーザ名）.confを確認する

ターミナルから管理者権限で開く。
（ファイルが無ければ作成する）

sudo vi /etc/apache2/users/（ユーザ名）.conf

1	sudo vi /etc/apache2/users/（ユーザ名）.conf

（中身）

<Directory "/Users/username/Sites">
        Options Indexes MultiViews
        AllowOverride All
        Require all granted
</Directory>

Options Indexes MultiViews

AllowOverride All

Require all granted

</Directory>

Directoryタグの指定が、Sitesディレクトリのパスになっていることを確認します。

こちらのファイルは/etc/apache2/httpd.confからインクルードしている/etc/apache2/extra/httpd-userdir.confからさらにインクルードして読み込まれています。

Apacheを再起動して設定を反映

以下のコマンドを実行しApacheを再起動します。

$ sudo apachectl restart

1	$ sudo apachectl restart

ホスト名の対応付けとアクセス

Apacheの設定が完了したら/etc/hosts ファイルを編集して
/etc/apache2/extra/httpd-vhosts.conf内でServerNameへ指定したホスト名を
ローカルホストのIPアドレス127.0.0.1と紐付けます。

/etc/hostsファイルを管理者権限で開く。

$ sudo vi /etc/hosts

1	$ sudo vi /etc/hosts

localhostの後、半角空白開けてホスト名を追記すればOK

##
# 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 apache-test
255.255.255.255 broadcasthost
::1             localhost

# 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 apache-test

255.255.255.255 broadcasthost

::1 localhost

テストページへアクセスする

ブラウザでホスト名（apache-test）を入力してアクセス
※ファイル名がindex.htmlの場合、デフォルトアクセスとなる

初回はホスト名の前にスキームhttp://を付けてアクセスすると確実です。

公開ディレクトリをSites以外にしたい場合

公開ディレクトリをSitesディレクトリ以外の場所に指定したい場合は以下のように設定します。

（例）/Users/（ユーザ名）/Documents配下のディレクトリを指定したい

Virtual Hostのドキュメントルート

/etc/apache2/extra/httpd-vhosts.conf

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.example.com
    DocumentRoot "/Users/username/Documents/apache-test"
    ServerName apache-test-document
    ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"
    CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common
</VirtualHost>

ServerAdmin webmaster@dummy-host2.example.com

DocumentRoot "/Users/username/Documents/apache-test"

ServerName apache-test-document

ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"

CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common

</VirtualHost>

/etc/apache2/users/（ユーザ名）.confにDirectorytタグを追加して
/Users/（ユーザ名）/Documentsで公開出来るようにする。

<Directory "/Users/username/Documents">
        Options Indexes MultiViews
        AllowOverride All
        Require all granted
</Directory>

Options Indexes MultiViews

AllowOverride All

Require all granted

</Directory>

記述が完了したら、Apacheを再起動してアクセス確認をします。

アクセスが上手くいかないとき

Apacheの設定ファイルに記述ミスがある場合、ページへアクセス出来ません。

「You don’t have permission to access / on this server.」や
「このサイトにアクセスできません」等のエラーがブラウザに表示されます。

以下のコマンドを実行し、設定ファイルの記述エラーをチェックします。

apachectl configtest
もしくは
apache2ctl configtest

エラーの存在するファイル名や、行番号が確認出来ます。

正しく修正出来たらApacheを再起動して再度アクセス確認します。

Follow me!