Vagrant で Virtual Host を設定して複数の開発環境を作る

#Vagrantとは
今更Vagrantの説明など必要ないのは十分承知なんですが、[Wikipediaによると](https://ja.wikipedia.org/wiki/Vagrant_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))
> Vagrant（ベイグラント）は、FLOSSの仮想機械を構築するためのソフトウェアである[2]。構成情報を記述した設定ファイル (Vagrantfile) を元に、仮想環境の構築から設定までを自動的に行うことができる[3]。

というものらしい。簡単に言うと、Vagrantを使うと自分のマシンの中に開発環境を作る事が出来る。

ちなみに私は、この**「Vagrant」を「バグラント」と発音していた**。
「バグらんと」とは博多弁で「バグらないの？」もしくは「バグラナイの！」という意味である。
正しくは**「べいぐらんと」**と発音する。
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442344/e06db3de-a075-e3cb-4fd9-7ca2519fcb61.jpeg)
私は**このツールを使えばバグらないよ！といういう意味で"Vagrant"と命名され、発音は「バグらんと」**と本気で信じていた。
昨今、メソッドや変数に対する名前の重要性に関する記事が多く書かれているが、正しい呼び方(発音)を知っておく事も ~~恥ずかしくないエンジニアとして存在するために~~ 重要であると考える。

#本題
下らぬ話は置いといて今回は**１つのVagrantに複数の開発環境を作る**です。
言い換えれば、１つのゲストOSで複数のドメインでアクセス可能にして、それぞれのドメインが各々のDocument Rootを持つようにします。
何を今更Vagrantなのだ？という声が飛び交いそうだけど書きます。


##前提
・ホストOS Windos 10
・ゲストOS Linux系であればなんでもいいと思う（私はCentOS 7.6）
・Vagrantがインストールされている事
　[こちら](https://kitsune.blog/linux-environment)など参考になると思います。
・Apacheがインストールされている事
　`yum install httpd` などで行けると思います。
・とりあえず2つの開発環境を作る

##手順
1. オレオレ証明書を準備する
2. Virtual Host の設定をする
3. vagrant-hostsupdater のインストール
4. Vagrantfile の修正
5. Vagrant 起動

ではオレオレ証明書からいってみます

###オレオレ証明書の作成
なぜオレオレ証明書を使うのかというと、昨今SSL対応していないサイトなんてほとんどないしApacheの設定を覚えときたかったから。なので、ローカルの開発環境なんだからオレオレ証明書なんて必要ないよ、という方は設定する必要はありません。

２つの環境を作るので、証明書も２セット作ります。

```
# mkdir server1 server2
# cd server1
秘密鍵の作成
# openssl genrsa 2048 > server1.key
CSR(Certificate Signing Request)の作成
# openssl req -new -key server1.key > server1.csr
```
ここでいろいろ聞かれるのですが、<font color="Red">Common Nameはアクセスする際のドメインを指定します</font>。それ以外は適当でいいです。

```
CRTファイルの作成
# openssl x509 -days 3650 -req -signkey server1.key < server1.csr > server1.crt
Signature ok
```
参考:[ろば電子が詰まつてゐる](https://ozuma.hatenablog.jp/entry/20130511/1368284304)

```
# ls
server1.crt  server1.csr  server1.key
```
keyファイルとcrtファイルが作成されました。同じようにして server2 ディレクトリで server2 用のファイルを作成します。

###Virtual Hostの設定
では、作成した crt ファイルと key ファイルを利用する設定を Apache の設定ファイルに書いていきましょう。

####Apache の設定ファイルの構成
Apache の設定ファイルの構成？？？なんだそれ？と思う方もいらっしゃると思いますが、今回は2つのドメインを設定するので、ドメイン毎に設定ファイルを用意します。

```
.
|-- conf
|   |-- httpd.conf
|   `-- magic
|-- conf.vhosts
|   |-- 01-server1.conf  # これが1個目のサイトの設定
|   `-- 02-server2.conf  # これが2個目のサイトの設定
```

こんな構成になります（必要なものだけ載せています）。
そして`httpd.conf`の一番最後あたりに

```
IncludeOptional conf.vhosts/*.conf
```
と書いてあげれば `conf.vhosts/01-server1.conf`と`conf.vhosts/02-server2.conf`を`httpd.conf`が読み込んでくれます。

####それぞれのVirtual Hostの設定
では、それぞれのVirtual Hostの設定です

```conf:01-server1.conf
<VirtualHost *:80>
  ServerName server1.com

  CustomLog "|/usr/sbin/rotatelogs /var/log/httpd/server1-access_log.%Y%m%d 86400 540" combined
  ErrorLog  "|/usr/sbin/rotatelogs /var/log/httpd/server1-error_log.%Y%m%d 86400 540"
  DocumentRoot /home/httpd/server1/public
  DirectoryIndex index.php index.html
  <Directory "/home/httpd/server1/public">
    Options FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
  RewriteEngine on
  RewriteRule (.*) https://%{HTTP_HOST}$1 [R=301,L]
</VirtualHost>

<VirtualHost *:443>
  ServerName server1.com

  LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\""
  TransferLog "|/usr/sbin/rotatelogs /var/log/httpd/server1-ssl_access_log.%Y%m%d 86400 540"
  ErrorLog  "|/usr/sbin/rotatelogs /var/log/httpd/server1-sslerror_log.%Y%m%d 86400 540"
  LogLevel warn
  DocumentRoot /home/httpd/server1/public

  DirectoryIndex index.php index.html
  SSLEngine on

  SSLCertificateFile /home/hoge/sslserver1/server1.crt
  SSLCertificateKeyFile /home/hoge/ssl/server1/server.key

  <Directory "/home/httpd/server1/public">
    Options FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
</VirtualHost>
```

`ServerName`にはCSR(Certificate Signing Request)を作成したときに`Common Name`で指定したドメイン名を指定します。
Log関連はセキュリティ的に安全という前提で、好きなディレクトリを指定してください。

```
DocumentRoot /home/httpd/server1/public
```

こちらの記述が`server1.com`のドキュメントルートになります。

```
SSLCertificateFile /home/hoge/sslserver1/server1.crt
SSLCertificateKeyFile /home/hoge/ssl/server1/server.key
```

こちらの記述で作成したオレオレ証明書のファイルを指定します。上がCRTファイルのパス、下が秘密鍵のパスになります。
以上でゲストOSでの準備は完了です。

###vagrant-hostsupdater のインストール
**vagrant-hostsupdater**とは

>vagrant-hostsupdaterとは仮想環境構築のソフトvagrantのプラグイン（拡張機能）です。
Vagrant を起動時に設定ファイルVagrantfile に書いた接続情報をホストOS /etc/hosts に設定してくれます。
仮想マシンにアクセスするときにホスト名から接続できるようになります。
仮想マシンを作成するたびに、/etc/hosts を開いて、ドメインや ip アドレスを設定する手間が省けます。

という便利なVagrant用プラグインです。
[こちら](https://hajipro.com/vagrant/vagrant-hostsupdater)から引用させて頂きました。


インストール方法はwindowsな人はコマンドプロンプト、Macな人はTerminal.appから以下のコマンドを実行します。

```
> vagrant plugin install vagrant-hostsupdater
```

vagrant plugin list を実行して結果が表示されればOKです。

```
> vagrant plugin list
   vagrant-hostsupdater (1.1.1.160, global)
```

###Vagrantfile の修正
インストールした`vagrant-hostsupdater`を利用するために`Vagrantfile`に以下の記述を追加します。

```
config.hostsupdater.aliases = ["server1.com", "server2.com"]
```
`Vagrantfile`の修正は以上です。

###Vagrant 起動
さて、やっとVagrantの起動です。起動中の場合、一旦Vagrantを停止します。

```
> vagrant halt
```
####Vagrant の起動について
通常であれば`boxファイル` `Vagrantfile` が置いてあるディレクトリまで移動して以下のコマンド叩けばいいのですが、、、

```
> vagrant up
```
vagrant-hostsupdater の説明に以下の内容がありました。
>Vagrant を起動時に設定ファイルVagrantfile に書いた接続情報をホストOS /etc/hosts に設定してくれます。

ホストOSのhostsファイルに`Vagrantfile`で設定した内容を反映してくれるのです。
※ Windowsであれば **C:\Windows\System32\drivers\etc\hosts** が対象

んで、このファイルですが、通常は管理者権限で開かないと更新が出来ません。なので普通にコマンドプロンプト開いて vagrant up しても権限不足でエラーになってVagrantが起動できません。

これを防ぐためにどうすればいいかというと、コマンドプロンプトを管理者権限で起動して`vagrant up` すればOKです。
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442344/ae3d0989-242b-0963-b410-85acf133cf1d.png)

わたしは、この「管理者でコマンドプロンプトを実行」して「対象ディレクトリまで移動」して「vagrant up」する。という作業がめんどくさいのでバッチファイルを作ってます(終了時も)

問題なく起動出来たら以下のような文字列が出力されます。

```
==> default: [vagrant-hostsupdater]   10.0.88.123  server1.com  # VAGRANT: 0f2af*********************745974 (default) / bd****52-***9-4**c-be**-c****d7****5
==> default: [vagrant-hostsupdater]   10.0.88.123  server2.com  # VAGRANT: 0f2af*********************745974 (default) / bd****52-***9-4**c-be**-c****d7****5

```

ではテストページにアクセスしてみましょう。
![WS000000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442344/d29d0bb6-7519-72ae-ad78-bd08e14d2cd9.jpeg)

無事アクセスできました。
これで1つのゲストOSの中に複数のLaravelプロジェクトを作る事が出来ます。LaravelプロジェクトとWordPressプロジェクトを同居させることも可能です(Laravelの public 配下に置けばできるんだけど気持ち悪い)。

#終わりに
くだらない話から始まりましたが、現在でも会社では`Vagrant with Virtual Host`で開発やってます。
自宅の環境では`Docker`使っているので、こちらもいずれ書こうと思います。

次はLINEログインか何か書きますね


証明書の作成、Apacheの設定など間違いがないか非常に怖いです。間違いを見つけられましたら優しくコメント欄でご指摘いただけると嬉しいです。