実践編 Vagrant/VirtualBoxで仮想環境構築し、Apache/PHPを導入まで

vagrantとVirtualBoxの関係性からざっくり理解したい方は以下からご覧いただくとスムーズです。

[概要編 Vagrant/VirtualBoxで仮想環境構築し、Apache/PHPを導入まで(図解あり)](https://qiita.com/nakamurashun0621/items/ecf13083c51a822220f9)

# 環境
mac
※この記事で構築するwebサーバのOSはcenntOS7です。他のOSを希望の場合は手順２でサイトから任意のOSを確認してください。

# 手順
1.VagrantとVirtualBoxをインストール
2.OSのイメージBOXをインターネットからDL
3.Vagrantfileを作成
4.Vagrantを実行
5.出来上がった仮想環境(VirtualBox)にApacheとPHPをインストールしてwebサーバをつくる
6.ホストOSからアクセス

# 1.VagrantとVirtualBoxをインストール

まずは今回使う２つのツールをインターネットからDLしましょう。

### Vagrant 
以下vagrantのDLページから`OS X` をダウンロードします。 
https://www.vagrantup.com/downloads.html

### VirtualBox 
以下VirtualBoxのDLページから`OS X hostsを選択`しダウンロードします。 
https://www.virtualbox.org/wiki/Downloads

### 確認
以下コマンドでバージョンが表示されればOKです。

```
// vagrantがPCにインストールされているか確認
vagrant -v
Vagrant 2.2.10

// virtualboxがPCにインストールされているか確認
VBoxManage -v
6.1.12r139181
```


# 2.OSのイメージBOXをインターネットからDL

### コマンド操作でOSのイメージBOXをDL

今回は`webサーバのOSにCentOSを使用`します。以下サイトでvagrantが提供しているOSイメージBOXを確認することができます。`centos/7`という項目があると思うのでこれを使います。(コマンド操作でBOXをインストールするためサイト内での操作は不要です)
https://app.vagrantup.com/boxes/search



BOXをDLします。
すぐに`どのプラットフォームに仮想環境を構築するか聞かれるので、virtualboxである3を入力してReturnキー`を押してください。

```
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 //←「3」を選択
==> box: Adding box 'centos/7' (v2004.01) for provider: virtualbox
    box: Downloading: https://vagrantcloud.com/centos/boxes/7/versions/2004.01/providers/virtualbox.box
Download redirected to host: cloud.centos.org
    box: Calculating and comparing box checksum...
==> box: Successfully added box 'centos/7' (v2004.01) for 'virtualbox'!
```
最後の「box: Successfully added box 'centos/7' (v2004.01) for 'virtualbox'!」が表示されればOKです。


### 確認
```
vagrant box list
centos/7 (virtualbox, 2004.01) //←選択したOSが表示されればOK
```

> 説明の必要はないかもしれませんが、仮想環境も１つのサーバなので、
- OS(オペレーティングシステム)をDL
- そのOSをwebサーバにするためにパッケージをインストール
- webサーバの完成!!
となります。

> 要は、今回で言うと今お使いのパソコンのOS(ホストOS)である`OS X(macのOS)`の中に`CentOS`という別のOS(ゲストOS)を作ると言うかんじです。この後の工程でこのCentOSにwebサーバとしての機能を実装していきます。

# 3.Vagrantfileを作成

下準備が整いましたのでいよいよvagrantのコマンド操作で仮想環境を立ち上げましょう。

### プロジェクトディレクトリを作成

以下記事でも紹介したように必ず仮想環境１つに対し、１ディレクトリ(プロジェクトディレクトリ) が必要です。
※ 例えば３つ仮想環境作る際は３つディレクトリ(プロジェクトディレクトリ) が必要ということになりますね。
https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F825124%2F73ed7089-46be-a8d8-3091-5bbcb0d94e75.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=0e99211f3cebe0d6f47608448540a8a1

仮想環境が少ないうちは良いのですが今後増えることも想定してそれらのディレクトリ(プロジェクトディレクトリ)をまとめておいた方が管理しやすいので、ディレクトリを２階創分作りましょう。

```
mkdir Vagrant  //←vagrantのプロジェクトディレクトリをまとめるディレクトリ
mkdir Vagrant/sampleServer  //←今回使用するvagrantのプロジェクトディレクトリ
cd Vagrant/sampleServer  //←今回使用するvagrantのプロジェクトディレクトリに移動しましょう。
~/Desktop/Vagrant/sampleServer$
```

### vagrantFileの作成

<strong>これからの作業は必ず上記で作成&移動したプロジェクトディレクトリの中で作業してください。</strong>
vagrantFileは仮想環境の設計図のようなドキュメントファイルです。大工さんに家をたててもらうときにも必ず紙の設計図を元にたてますよね。このファイルはこれからつくるサーバの設計図なので、「どのOSでつくるか」「どのIPアドレスをでアクセスできるようにするか」などの情報が書かれているファイルを作る作業です。

`vagrant init`コマンドの後ろに先ほどDLしたOSのイメージBOXのOS名を追記した状態で実行してください。

```
vagrant init centos/7
```

# 4.Vagrantを実行

いよいよ仮想環境をつくります。以下はvagrantで作成した仮想環境のサーバを起動させるコマンドです。ただ、まだ仮想環境も何もないのでvagrantFile作成後の初回時はOSのインストールと共に起動してくれます。これでVirtualBoxにsampleServerという名前でサーバが構築されます。

```
vagrant up
```

# 5.出来上がった仮想環境(VirtualBox)にApacheとPHPをインストールしてwebサーバをつくる
さて、これでsentOSのサーバができました。
今回の目的はこのサーバにwebサーバの機能を与えることなのでApacheとPHPのインストールに進みましょう。

### 仮想環境に接続
プロジェクトディレクトリで`vagrant up`を行った後、以下でssh接続します。

```
vagrant ssh
```

表示が以下のようになれログイン成功です。

```
Last login: Mon Nov  2 09:15:16 2020 from 10.0.2.2
[vagrant@localhost ~]$
```

### Apacheインストール
以下を実行します。途中で聞かれるものは「y」を入力してReturnでOKです。

```
yum install httpd
```
インストール後、必ず以下参考に`Apacheを自動起動`にして`DocumentRoot以下の作業ユーザ作成`をしてください。
https://qiita.com/nakamurashun0621/items/64d5c9d76b7284f19883

### PHPインストール
以下を実行します。途中で聞かれるものは「y」を入力してReturnでOKです。

```
yum install php
```
### テストファイルの作成
とりあえず１ファイル適当にアップしておく

作業者用のユーザへ切り替える

> webadminユーザは「ApacheとPHPのインストールと設定」見出し以下で紹介している以下記事で作成してください。
(上記で作成済みの方はこのまま進んでください)
https://qiita.com/nakamurashun0621/items/64d5c9d76b7284f19883

```
su webadmin
```
ファイル作成と保存(htmlファイル)

```
vi index.html
```

> viが起動するので
- 「a」を押して入力モードにする
- `<h1>This is DocumentRoot File.</h1>`をコピペ
- 「shift＋;」で「：」を押す
- 「wq」を入力してReturnを押す(左下に表示されます)

ファイル作成と保存(phpファイル)

```
vi phpinfo.php
```

> viが起動するので
- 「a」を押して入力モードにする
- `<?php
phpinfo();
?>`をコピペ
- 「shift＋;」で「：」を押す
- 「wq」を入力してReturnを押す(左下に表示されます)

# 6.ホストOSからアクセス

### vagrantFileを編集
`vagrantFile`を開いて`# config.vm.network "private_network", ip: "192.168.33.10"`の行を`#`を削除してコメントアウト解除します。

### vagrantを再起動 
```
exit
```
で仮想環境から抜けます。
※webadminユーザからvagarantユーザに切り替わる場合は再度exitを入力すると抜けれます。

```
vagrant reload
```
### アクセスする
①ブラウザから`192.168.33.10`にアクセスし「This is DocumentRoot File.」が表示されればOK。

②`192.168.33.10/phpinfo.php`にアクセスして紫とグレーのPHPの情報ページが表示されれば「.php」ファイルも正常に読み込まれているということなのでOK。


# おまけ (VScode内でファイル操作)
これで仮想環境を使ったPHPが動くwebサーバの立ち上げが完了しました。
ただし、今回DocumentRootに作成した２ファイルはいずれもviコマンド作成しました。

以下をVScode内で導入すると普段通りのGUI環境でファイル操作が可能になるそうです。
https://qiita.com/ozbannot/items/df1c5ab98d676cb34b78

# 関連記事
vagrant up時にプロビジョニング(便利)
https://weblabo.oscasierra.net/vagrant-provisioning-shell-1/

vagrantのプロビジョニングドキュメント
https://qiita.com/ringo0321/items/38743442a9abfc3be5b2
https://weblabo.oscasierra.net/vagrant-provisioning/
https://qiita.com/reflet/items/9aa1ee959a863fa20363

vagrantのコマンド
https://qiita.com/matsuotaiga/items/2c6014d1a566c596f75f