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


Vagrantとは

今更Vagrantの説明など必要ないのは十分承知なんですが、Wikipediaによると

Vagrant(ベイグラント)は、FLOSSの仮想機械を構築するためのソフトウェアである[2]。構成情報を記述した設定ファイル (Vagrantfile) を元に、仮想環境の構築から設定までを自動的に行うことができる[3]。

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

ちなみに私は、この「Vagrant」を「バグラント」と発音していた
「バグらんと」とは博多弁で「バグらないの?」もしくは「バグラナイの!」という意味である。
正しくは「べいぐらんと」と発音する。

私はこのツールを使えばバグらないよ!といういう意味で"Vagrant"と命名され、発音は「バグらんと」と本気で信じていた。
昨今、メソッドや変数に対する名前の重要性に関する記事が多く書かれているが、正しい呼び方(発音)を知っておく事も 恥ずかしくないエンジニアとして存在するために 重要であると考える。

本題

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

前提

・ホストOS Windos 10
・ゲストOS Linux系であればなんでもいいと思う(私はCentOS 7.6)
・Vagrantがインストールされている事
 こちらなど参考になると思います。
・Apacheがインストールされている事
 yum install httpd などで行けると思います。
・とりあえず2つの開発環境を作る

手順

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

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

オレオレ証明書の作成

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

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

# mkdir server1 server2
# cd server1
秘密鍵の作成
# openssl genrsa 2048 > server1.key
CSR(Certificate Signing Request)の作成
# openssl req -new -key server1.key > server1.csr

ここでいろいろ聞かれるのですが、Common Nameはアクセスする際のドメインを指定します。それ以外は適当でいいです。

CRTファイルの作成
# openssl x509 -days 3650 -req -signkey server1.key < server1.csr > server1.crt
Signature ok

参考:ろば電子が詰まつてゐる

# 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.confconf.vhosts/02-server2.confhttpd.confが読み込んでくれます。

それぞれのVirtual Hostの設定

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

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用プラグインです。
こちらから引用させて頂きました。

インストール方法は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です。

わたしは、この「管理者でコマンドプロンプトを実行」して「対象ディレクトリまで移動」して「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

ではテストページにアクセスしてみましょう。

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

終わりに

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

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

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