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

概要編 Vagrant/VirtualBoxで仮想環境構築し、Apache/PHPを導入まで(図解あり)

環境

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の作成

これからの作業は必ず上記で作成&移動したプロジェクトディレクトリの中で作業してください。
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