Vagrant(VirtualBox)・CentOSのインストール〜Apache起動テストまでを解説！

どうも！
Hiroyukiです＾＾

本日は、
###Vagrant(VirtualBox)・CentOSインストール〜Apache起動テストまで
の方法をご説明したいと思います！
<img width="927" alt="スクリーンショット 2019-10-15 6.31.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/b2b82a07-4ef1-d863-4fdb-4d8e0bdaaf51.png">

#環境構築への苦手意識

かく言うボクも、
初学者ながら一番長くやってきた言語は、サーバーサイド言語の「PHP」
なのですが環境構築はやや不慣れなので、改めて学習させて頂きました！

というのも、
「cloud9」というAWSのサービスの一つを使って自作アプリ開発をやってきたからです。

cloud9というのは、自分が使うサーバ上に、
ターミナルとかエディタとか開発環境がマルッと入っています。

しかも、
###「cloud9使ったら環境構築もせーへんでええよ〜」
という優れもの！
ラクラクでアプリ開発に入れちゃうんですね〜

###しかし、cloud9に依存してたら、環境構築弱者になってしまいましたので（笑）
ボクが今PHPを教えて頂いているメンターさんの協力も得て、
今回は環境構築にトライしたという訳でありますッ！！

ぜひ是非参考にしてみてくださいね〜

#Windowsユーザさんへ
ボクがMacユーザなのもあって、原則Mac向けの環境構築方法を
解説していますが、Windowsユーザにも通じる部分は結構あるかと思います。

windowsユーザの方は、よろしければ詳細は下記のサイトなどをご参考に
環境構築をやってみて下さい〜

###VagrantとVirtualBoxで仮想環境を構築する① 準備編
###https://pointsandlines.jp/other/vagrant-virtualbox-1
###VagrantとVirtualBoxで仮想環境を構築する② 初期化&起動編
###https://pointsandlines.jp/other/vagrant-virtualbox-2

<img width="658" alt="スクリーンショット 2019-10-15 6.30.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/489124/67c62347-73bb-a826-4839-aa94bfdbaa70.png">
#Vagrant/VirtualBoxをインストール

下記公式サイトから、それぞれインストールします！

###Vagrant公式
###https://www.vagrantup.com/

###VirtualBox公式
###https://www.virtualbox.org/wiki/Downloads

ちなみに、
###Vagrant？VirtualBoxって？　は？何ですか・・・？
と思った人の為に、ちょっとだけ解説。

VirtualBoxとは、あなたのPCに仮想環境を作れるツールで
これを使って他のOS（下記のCentOSなど）をインストールできます！

こうすると、自分のPCに直接開発環境を作るより、安全かつ効率的に
環境構築ができるということです。

Vagrantは、VirtualBoxのサポート的な役割です。
これがあるおかげで、VirtualBoxのような仮想環境を簡単に
構築・管理できます！

例えるなら、
###VirtualBoxが、選手がプレーする「野球場」で
###Vagrantは、そこでプレーを管理する「マネージャー」と言われる様です！

なんとなーく、理解できましたでしょうか？


#CentOSをインストール

まず、ターミナル（もしくは、PowerShell）を起動して
ディレクトリ（フォルダ）を作成します！
場所は分かりやすく、デスクトップ辺りに作りしょう。

ディレクトリの名前は、なんでも良いんですが、これも分かりやすく
「MyVagrant」とでもしましょう

```php:Terminal
Desktop$ mkdir MyVagrant
```

そして、そのディレクトリの中に、CentOSをインストールしたいので
またディレクトリを作る　→　下記のコードでCentOSをインストールしましょう〜
これも名前はテキトーで「MyCentOS」とかで良いでしょう。

```php:Terminal
Desktop username$ cd MyVagrant
MyVagrant username$ mkdir MyCentOS
MyVagrant username$ cd MyCentOS
MyCentOS username$ vagrant init bento/centos-6.8
```

これでCentOSのインストールが完了しましたぁ〜

ここで、下記のコマンドで、後ほどゲストOSと共有する（ファイルを置くべき）
srcディレクトリを作って起きましょう〜

```php:Terminal
MyCentOS username$ mkdir src
```

#Vagrantfileの編集
ここで、既にお気づきかも知れませんが
CentOSのインストールが完了した時点で、CentOSフォルダの中に
###「Vagrantfile」なるものが生成されているかと思いますっ！

なので、お次は、Vagrantfileの編集に入りまーす
下記コマンドで、Vagrantfileの中身が見れます。

```php:Terminal
MyCentOS username$ vi Vagrantfile
```

んで、Vagrantfileの中から、下のコードを探し出し、
「#」を削除することで、コメントアウトにされている状態から、通常のコードに戻してやります。

```php:Vagrantfile
  # config.vm.box = "bento/centos-6.8"
  ↓
  config.vm.box = "bento/centos-6.8"
```

上記は、Vagrantで管理する開発環境で必要な boxを定義しているらしいです。

ここで初心者の方向けに補足なのですが、
###上記Vagrantfileの編集方法を解説します。

上記viコマンドで、Vagrantfileの中身が確認できましたら、
###/（検索したい任意の文字列を入力）
###→ Enterキーを押す 
でVagrantfile上を検索可能です！

つまり、上記コードを検索したい場合なら
###/bento
###→ Enterキーを押す 
とすれば、確認したい文字列の場所に移動できます。

その後、編集するには、
###i
のキーを押すと「INSERT」モードに切り替わりますので
削除や文字列を追加することで、編集していきます！

編集が完了しましたら、
###esc(エスケープ)キーを押す → 
###:wq
と入力すれば、Vagrantfileの編集・閲覧から離脱できまっす！！

さて、残り３つのコメントアウトも外していきしょう！

```php:Vagrantfile
  # config.vm.box_check_update = false
  ↓
  config.vm.box_check_update = false
```

上記がfalseになっていると、原則boxを更新するかどうかのチェックがされないらしい。

```php:Vagrantfile
  # config.vm.network "private_network", ip: "192.168.33.10"
  ↓
  config.vm.network "private_network", ip: "192.168.33.10"
```


上記により、プライベートネットワークが構築され、
指定したIPによって、ホストだけがそのアドレスにアクセスすることができます！
（なお、このIPを変更することも可能です＾＾）

```php:Vagrantfile
  # config.vm.synced_folder "../data", "/vagrant_data"
  ↓
  config.vm.synced_folder "../data", "/vagrant_data"
  ↓
  config.vm.synced_folder "src", "/var/www/html"
```


こちらは、ホストOS（あなたのOS）とゲストOS（CentOS）のフォルダを共有する処理です。
上記に関しては、ディレクトリ指定も変更します！

Apacheのドキュメントルートは、/var/www/html になるらしいので、上記のように変更します！

こうすることで、下記２つのフォルダが共有されるのです。

###●ホストOS(あなたのOS)
###Desktop/MyVagrant/MyCentOS/src

###●ゲストOS(CentOS：今回はApacheのドキュメントルートです)
###/var/www/html

これでVagrantfileの編集が完了！
次は、いよいよCentOSの起動を行います。

#CentOSの起動
```php:Terminal
MyCentOS username$ vagrant up
MyCentOS username$ vagrant ssh
```


sshのコマンド後に、管理者権限のパスワードを求められた場合は
###「vagrant」
を入力すればOKです！

```php:Terminal
[vagrant@localhost ~]$
```

パスワード入力後、上記のように表示されますので、
下記のようにpwd コマンドを打つと、

```php:Terminal
[vagrant@localhost ~]$ pwd
/home/vagrant
```

と表示されれば、CentOSインストール完了です！


#Apacheをインストール

下記コマンドで、アパッチをインストールしませう〜

```php:Terminal
[vagrant@localhost ~]$ sudo yum -y install httpd
```

その後、アパッチのバージョンを確認。

```php:Terminal
[vagrant@localhost ~]$ httpd -v
```

アパッチを起動しましょ〜

```php:Terminal
[vagrant@localhost ~]$ sudo service httpd start
```


#Hello World!を表示させてみよう〜

###ここまでできたか、テストしてみましょう（ドキドキ）

index.htmlというファイルでも作って、なんでも良いですが
中身には下記のようにお決まりのフレーズでも書いておきましょう！


```html:index.html
Hello World!
```

で、index.htmlファイルを、先ほどの
Desktop/MyVagrant/MyCentOS/src　に置いて

###http://192.168.33.10
こちらのURLにアクセスしてみましょう！

ブラウザに

###「Hello World!」

と表示されましたか？

表示されれば完了です！

index.htmlが上手く表示されない場合は、いろんな原因が考えられるのですが
###下記のCentOS再起動も試してみて下さい。

下記コマンドで、MyCentOSディレクトリに戻ってから、

```php:Terminal
[vagrant@localhost ~]$ exit
```
下記コマンドでCentOSを再起動してみましょう！

```php:Terminal
MyCentOS username$ vagrant halt
MyCentOS username$ vagrant up
MyCentOS username$ vagrant ssh
```

再起動しないと、Vagrantfileの更新内容が反映されない場合があるのです！
###僕も、ここに数時間ハマって「できないよ〜TT」となっていました笑
(もちろん、Apacheの起動確認も忘れずに〜)

皆さま、できましたでしょうか？


#参考記事などなど
僕が教えてもらっているメンターさんのホームページリンクも貼らせて頂きます！

###YunoCode
###https://yu-nocode.com/entry/php-quest-3/

こちらのページを参考に、この記事を書かせてもらい、
また今回の環境構築についても直接ご指導頂きましたっ！

###上の「Vagrantfileの更新内容が反映されない」問題をご指摘頂いたのも
###このメンターさんです！ほんっとに、ありがたや〜 m(T T)m

ではでは、本日はこんなところで。

お疲れ様でした！！
Hiroyukiでした〜