前回の記事までで、Vagrant上のCentOS7にWebサーバー(Apache)を構築し、テストページを表示させるところまで行った。

ただしこのままでは、Webサーバーの公開ディレクトリ(/var/www/html/)内のファイルにアクセスする際、sshで接続しコマンドライン上で作業するしかないので不便だ。
コマンドラインのVimではなく、普段使っているSublimeText3で作業したい。

そこで今回はVagrantとMacを同期させ、ローカルから仮想マシン上の公開ディレクトリに直接アクセスできるよう設定を行っていく。

VagrantとMacの同期

これはもともとVagrantの仕様となっているため、特別な設定は必要ない。

仕様について説明しておくと、現在Mac(ローカル)でVagrantを起動したカレントディレクトリと、Vagrant上の「/vagrant/」ディレクトリが同期されているのだ。

例えば下記のようにVagrantを立ち上げた場合は、

cd /Users/hoge/vagrant-project/
vagrant up

Mac:/Users/hoge/vagrant-project/
Vagrant: /vagrant/

上記のディレクトリが互いに参照し合っているということだ。

試しにvagrant上でファイルを作成してみる。

cd /vagrant/
touch test.txt

ここまで行ったところでMacのFinderで作業ディレクトリを確認すると以下のようになっているはずだ。

今度はFinderからtest.txtを削除してみる。

vagrantでlsコマンドを叩きディレクトリ内を確認してみよう。
こちらもtest.txtが無くなっているはずだ。

これでローカルとVagrantの同期確認はできたはずだ。

しかしこれではWeb公開ディレクトリとは同期が取れていないため、Webページをローカルから直接編集することができない。

そこで次はシンボリックリンクを作成する。

シンボリックリンクの作成

まずはvagrant上の公開ディレクトリ「html」を削除する。

cd /var/www
sudo rm -rf html

次にMacと同期されているディレクトリにhtmlディレクトリを作成する。

cd /vagrant
mkdir html

最後にシンボリックリンクを作成。

sudo ln -s /vagrant/html /var/www/html

これでWebサーバー(Apache)が/var/www/html/にアクセスすると/vagrant/html/が参照されるようになる。

では確認してみよう。

ここまでの手順でローカルの作業ディレクトリ(Vagrantfileがあるディレクトリ)にhtmlディレクトリが作成されているはずだ。

その中に適当なindex.htmlファイルを作る。
※中身は仮でHello Vagrant!!とでもしてみる。

ブラウザでhttp://192.168.33.10/にアクセスし、作ったテストページが表示されればOKだ。

これで仮想マシンWebサーバーのファイルを直接触れるようになった。

ここまで準備をした段階で、次回はWordPress環境を構築していく。

2019-06-22追記

当記事で紹介したシンボリック設定を行うと、サーバー再起動時にhttpdが自動起動しなくなる問題が発生する。

この問題に関する対処法は以下の記事を参考にしてくれ。