【Apache/Virtualhost】Apacheを使って1台のPCで複数サイトを運営してみる

# はじめに
MacOSⅩ（El Capitan）のApacheを使って複数のサイトを運営する方法が必要だったので、いろいろ調べながらやってみました。
なお、とりあえずサーバを立ち上げるだけなら「[Yosemite（MacOS:10.10.X）でApacheを使えるようにしてみる](http://qiita.com/nnahito/items/5195d7269ddcd328a5c0)」をどうぞ！
El Capitanも立ち上げ方は変わりません。


# 環境
MacOSⅩ（El Capitan）
Apache 2.4.16 (Unix)


# 前準備
Apacheの初期設定を終わらせておきます。
参考：[Yosemite（MacOS:10.10.X）でApacheを使えるようにしてみる](http://qiita.com/nnahito/items/5195d7269ddcd328a5c0)
ポートの開放方法は、ご契約先のプロバイダにお問い合わせください。
まあたいていブラウザからデフォルトゲートウェイのアドレスにアクセスすれば設定できるとは思いますが……


# 設定
では実際にVirtualhostの設定を行っていきます。


## サーバ用のフォルダの作成
`~/Sites/`のような、Webサイト用のフォルダを2つ作ります。
私の場合、片方は普通のWebサイト用、もう片方はファイルサーバを作りたかったので、
- ~/Sites/
- ~/FileServer/
という2つのフォルダを用意しました。<img width="770" alt="スクリーンショット 2016-04-28 18.15.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/46dc76c2-749c-ff72-74cd-a6b6e230b59e.png">

## httpd.confの設定
安定のhttp.confをいじります。

```lang:terminal
sudo vim /etc/apache2/httpd.conf
```
大体500行目くらいの、
`#Include /private/etc/apache2/extra/httpd-vhosts.conf`
の**「#」を消します**

<img width="490" alt="スクリーンショット 2016-04-28 18.20.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/c440ea66-18ed-f294-d4c5-8491ae2828eb.png">


## httpd-vhosts.confの設定
先ほど#を削除したhttpd-vhosts.confを編集します。

```lang:terminal
sudo vim /private/etc/apache2/extra/httpd-vhosts.conf
```
このファイルの一番下に、設定をつらつらと書いていきます。
今回の場合は、

- ~/Sites/
- ~/FileServer/

の2つのフォルダに対してサイトを振り分けたいので……

```lang:httpd-vhosts.conf
<virtualhost *:80>
    DocumentRoot "/Users/ユーザID/Sites/"
    ServerName 割り当てるDNSサーバのアドレス
    ErrorLog "/private/var/log/apache2/local.howtohp.com-error_log"
    CustomLog "/private/var/log/apache2/local.howtohp.com-access_log" common
</virtualhost>


<virtualhost *:80>
    DocumentRoot "/Users/ユーザID/FileServer/"
    ServerName 割り当てるDNSサーバのアドレス
    ErrorLog "/private/var/log/apache2/local.howtohp.com-error_log"
    CustomLog "/private/var/log/apache2/local.howtohp.com-access_log" common
</virtualhost>
```

と言った具合にします。
**割り当てるDNSサーバのアドレス**に関しては、[NoIP](http://www.noip.com/)といったサービスを私は使っているので、そこで取得したURLを指定するとうまくいきました。

<img width="490" alt="スクリーンショット 2016-04-28 18.34.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/2dcfa681-2a99-4726-ea89-9b90967525da.png">

**【注意】**
もし、ディレクションをしていない場合、

```lang:httpd-vhosts.conf
<virtualhost *:80>
    DocumentRoot "/Users/ユーザID/Sites/"
    ServerName 割り当てるDNSサーバのアドレス
    ErrorLog "/private/var/log/apache2/local.howtohp.com-error_log"
    CustomLog "/private/var/log/apache2/local.howtohp.com-access_log" common
    <Directory /Users/ユーザID/Sites/>
        Require all granted
    </Directory>
</virtualhost>


<virtualhost *:80>
    DocumentRoot "/Users/ユーザID/FileServer/"
    ServerName 割り当てるDNSサーバのアドレス
    ErrorLog "/private/var/log/apache2/local.howtohp.com-error_log"
    CustomLog "/private/var/log/apache2/local.howtohp.com-access_log" common
    <Directory /Users/ユーザID/FileServer/>
        Require all granted
    </Directory>
</virtualhost>
```
という風にしないと、Forbiddenが表示される場合があります。


## アクセス先を切り替える（hostsファイルの設定）
では設定してきたものを関連付けます。

```lang:terminal
sudo vim /etc/hosts
```

hostsファイルの最後に、以下の情報を追加します。

```lang:hosts
127.0.0.1 ~/SitesへのDNSのURL
127.0.0.1 ~/FileServerへのDNSのURL
```

<img width="490" alt="スクリーンショット 2016-04-28 18.43.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/63338/8833af3d-c34a-5505-5b11-9ee8e3499b96.png">

## Apacheの再起動
```lang:terminal
#設定ファイルに間違いがないかチェック
$ sudo apachectl configtest
Syntax OK    #これが出ればOK

$sudo apachectl restart
```

これでアクセスできると思います。


# 参考
- [MacのApacheでヴァーチャルホストを使ってテスト環境の構築](http://howtohp.com/2011/08/21/mac-apache-virtual-host/)
- [apache2.confにNameVirtualHostを書いたらNameVirtualHost has no effect and will be removed in the next releaseと言われました](http://qiita.com/pugiemonn/items/d65ff04b3b609f5bbf4c)
- [UbuntuでVirtualHost設定【Apache】 ](http://charlie1012.hatenablog.jp/entry/2015/01/31/231204)
- [【Apache】MaxOSのApacheで複数のサイトを外部公開する方法](https://teratail.com/questions/26448)
- [【Apache（MacOS）】Apacheのバーチャルホストの設定方法がわからない](https://teratail.com/questions/27306)