Vagrant+VirtualBox+CentOS7環境構築 ~ローカルのプロジェクトをブラウザに表示するまで~

##はじめに

Vagrantの環境を構築し、ローカルのプロジェクトをブラウザに表示させるまでの記事です。

##実行環境
MacOS 10.15.5
Vagrant 2.2.9


##目次
-Vagrant環境構築
　-Vagrantインストール
　-VirtualBoxインストール
　-Box CentOS/7の追加
　-Vagrantの初期化
　-仮想環境の起動

-プロジェクトをブラウザに表示
　-Vagrantとプロジェクトの同期
　-Apacheのインストールと接続
　-ドキュメントルートの編集


##Vagrant環境構築

###1.Vagrantインストール
公式：https://www.vagrantup.com/downloads.html

詳しい手順は、こちらの記事を参考に。
https://qiita.com/ta98/items/a2596217a886c900b124

###2.VirtualBoxインストール
公式：https://www.virtualbox.org/wiki/Downloads

詳しい手順は、こちらの下記を参考に。
https://qiita.com/ta98/items/e155e77bd118beaacb3f

###3.Boxの追加

ターミナルを起動して、任意の場所に「MyVagrant」ディレクトリを作成し、移動します。

**Boxファイルのダウンロード**

```
$ vagrant box add centos/7
```
実行すると、下記のような表示になります。

```
$ vagrant box add centos/7
==> box: Loading metadata for box 'centos/7'
    box: URL: https://vagrantcloud.com/centos/7
This box can work with multiple providers! The providers that it
can work with are listed below. Please review the list and choose
the provider you will be working with.

1) hyperv
2) libvirt
3) virtualbox
4) vmware_desktop

Enter your choice: 
```
3を入力し、実行します。

Boxの追加が完了しているかを確認します。
Boxを一覧表示させるコマンドを実行し、

```
$ vagrant box list
```
次のように、追加したBoxが一覧に表示されていれば完了です。

```
$vagrant box list
centos/7 (virtualbox, 2004.01)
```

###4.Vagrantの初期化

vagrantを初期化するコマンドを実行します。

```
$ vagrant init centos/7
```

「My Vagrant」ディレクトリ内に、「Vagrantfile」ファイルが作成されていれば完了です。


###5.仮想環境の起動

「Vagrantfile」ファイルが存在するディレクトリで、Vagrantの仮想マシンを起動するコマンドを実行します。

```
$ vagrant up
```

起動した仮想環境にはsshで接続します。

```
$ vagrant ssh

#実行後、下記のような表示になります。
[vagrant@localhost ~]$
```

仮想環境からログアウトする場合は、下記のコマンドを実行します。

```
[vagtant@localhost]$ exit
```
仮想マシンの停止は下記のコマンドです。

```
$ vagrant halt
```


以上で、Vagrantの環境構築は完了です。


#プロジェクトをブラウザに表示

ここからは、ローカルのプロジェクトをVagrantからブラウザに表示させる手順です。

「MyVagrant」配下に、プロジェクトを設置します。(今回はtestプロジェクトとします)

###1.Vagrantと同期設定

ゲスト0S: /test/
ホスト0S: /var/www/html/test/

Vagrantとローカルプロジェクトを同期していきます。
まず、下記コマンドで「Vagrantfile」を開き、

```
$ vi Vagrtantfile
```
ゲストOSとホストOSを同期させるパスを設定します。
１つ目のパラメーターがホストOS、２つ目のパラメーターがゲストOSです。

```
#変更前
#config.vm.synced_folder "./data", "/vagrant_data"
↓
#変更後
config.vm.synced_folder "test/", "/var/www/html/test/"

#次の章で必要になってくるので、コメントアウトを外しておきます。
#config.vm.network "private_network", ip:"192.168.33.10"
↓
config.vm.network "private_network", ip:"192.168.33.10"
```
保存したら、Vagrantを再起動します。

```
$ vagrant reload
```

再起動が完了したら、同期が完了しているかを確認します。

```
#仮想環境にログイン。
$ vagrant ssh

#ホスト0Sで指定したディレクトリに移動。
[vagrant@localhost]$ cd /
[vagrant@localhost]$ cd var/www/html

#配下に指定したディレクトリが作成されているか確認。
[vagrant@localhost]$ ls
test
```

testディレクトリ内で任意のファイルを作成してみます。ローカルにも反映されることが、Finderなどで確認できれば完了です。


###2.Apacheのインストールと接続

仮想環境にログインした状態で、Apacheのインストールから、ブラウザでの接続確認までを行います。

```
#Apacheのインストール
[vagrant@localhost]$ sudo yum install httpd

#一度ログアウトし、Vagrantを再起動します。
[vagrant@localhost]$ exit
$ vagrant reload

#Vagrant再起動後、ログインし、サーバーを起動。
$ vagrant ssh
[vagrant@localhost]$ sudo service httpd start

#仮想マシン起動時、自動的にサーバーが立ち上がるように設定しておきます。
[vagrant@localhost]$ sudo chkconfig httpd on
```

ブラウザで`192.168.33.10`にアクセスしてみます。
下記のような、Apacheのテストページが表示されていれば完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562737/fa4ebc96-8deb-7205-ddde-ec1e73af584b.png)


###3.ドキュメントルートの編集

最後に、ドキュメントルートを編集し、指定のプロジェクトがブラウザ上に反映されるようにします。

```
[vagrant@localhost]$ sudo vi /etc/httpd/conf/httpd.conf

#ファイル内のドキュメントルートを編集。
DocumentRoot "/var/www/html
↓
DocumentRoot "/var/www/html/test/

#一度ログアウトし、Vagrantを再起動します。
[vagrant@localhost]$ exit
$ vagrant reload

#Vagrant再起動後、ログインし、サーバーを起動。
$ vagrant ssh
[vagrant@localhost]$ sudo service httpd start
```
`192.168.33.10`にアクセスし、プロジェクトページが表示されれば、完了です。

***補足:***アクセスすると、Forbiddenエラーが表示される場合

「SELinuxのコンテキスト」の不一致が原因と考えられます。
詳細に関しては、下記記事が参考になると思います。
https://wemo.tech/1590

編集箇所は次のとおりです。

```
[vagrant@localhost]$ sudo vi /etc/selinux/config

#ファイル内の下記を修正
SELINUX=enforcing
↓
SELINUX=disabled
```
Vagrantとサーバーの再起動を行って下さい。

```
#ログアウトと再起動
[vagrant@localhost]$ exit
$ vagrant reload

#ログインと、サーバーの再起動
$ vagrant ssh
[vagrant@localhost]$ sudo systemctl restart httpd
```


##おわりに

ご覧いただき、ありがとうございました。
修正箇所、ご指摘等ございましたらご意見いただけますと幸いです。

##参考記事
https://qiita.com/ta98/items/5a3f77154aabaf9b8838
https://webbibouroku.com/Blog/Article/vagrant
https://wemo.tech/1590
https://qiita.com/niki-tstk/items/e2cecff58fd97efd7ad1