Visual Studio Code＋VagrantでPHPの開発環境を構築する

# はじめに
Visual Studio CodeとVagrantでPHPの開発環境を構築する手順についてまとめてみました。

## Visual Studio Codeとは？
Microsoftが開発しているWindows、Linux、macOS用のソースコードエディタです。
カスタマイズ性が高く、テーマやキーボードショートカット、環境設定を変更できたり、機能を追加する拡張機能をインストールすることができます。
略して「VSCode（ブイエスコード）」と呼ぶこともあります。

## Vagrantとは？
仮想環境を構築するためのソフトウェアです。
構成情報を記述した設定ファイル (Vagrantfile) を元に、仮想環境の構築から設定までを自動的に行うことができます。

## 開発に仮想環境を使用するメリットとは？
XAMPPなどをインストールすれば、とても簡単にPHPの開発環境を構築できます。
ただし、1台のPCで複数の開発環境を管理しようと思うと、別の開発環境の設定の影響をうけてしまったりと、思わぬ挙動に困らせられる事があります。
仮想環境を使用すると仮想マシン内で環境を構築するので、PCの環境を汚さずに開発環境を構築することができます。
使わなくなった開発環境の削除は仮想マシンの削除を行うだけでよいので、管理が簡単です。

## Vagrantを使用するメリットとは？
Vagrantはコマンドを入力して実行するCUIのソフトウェアです。
仮想マシンを立ち上げて、GUIでポチポチ操作してXAMPPをインストールして、、、とGUIで環境構築してもいいのですが、Vagrantなら環境構築を自動化する事ができます。
チームで同一の環境を構築したい場合などは、GUIで環境構築するよりも、処理が自動化できるVagrantが断然便利です。
コマンドで操作できるので、グラフィック操作よりも処理が軽いです。

# インストール手順
Windows10 64bit での手順です。

以下からそれぞれのインストーラをダウンロードして、画面の指示に従ってインストールします。
(インストール時のオプションの変更は特に不要で、次へ次へと進んでいけばOKです。)

Visual Studio Code
https://code.visualstudio.com/Download
※執筆時点の最新Verは VSCodeUserSetup-x64-1.55.1.exe

Vagrant
https://www.vagrantup.com/downloads
※執筆時点の最新Verは vagrant_2.2.15_x86_64.msi

VirtualBox
https://www.virtualbox.org/wiki/Downloads
※執筆時点の最新Verは VirtualBox-6.1.18-142142-Win.exe

インストールができたら、PCを再起動します。

再起動したら、コマンドプロンプトで以下コマンドを実行し、Vagrantがインストールされている事を確認しましょう。

```bat:コマンドプロンプト
vagrant -v
```

Vagrantのバージョンが表示されればインストールが出来ています。

![Vagrantのバージョンを確認する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/b7f0fdea-9dc7-5c02-be7c-bcb18cbb0ab7.jpeg)

# 仮想マシン構築手順
## Visual Studio Code を起動する
インストールしたVisual Studio Code をダブルクリックして起動します。
「ファイル」 → 「フォルダーを開く」をクリックし、開発環境を作りたいフォルダを選択します。

![フォルダーを開く](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d913e784-4781-c653-8707-66be8f553d27.jpeg)

今回は「C:\work\test」に開発環境を作りたいと思います。

## Vagrant Boxを検索する
Vagrant Boxとは、仮想マシンのテンプレートとなるファイルです。
CentOSのBoxを使えば、CentOS環境を構築することができます。
自分でBoxファイルを作成することも可能ですが、すでに公開されているBoxを使えば手っ取り早く環境を構築することができます。
今回はChef社が公開しているBoxを使用してCentOS環境を構築します。

https://app.vagrantup.com/boxes/search
上記のリンクにアクセスし、「bento/centos」で検索します。

![bento/centosで検索する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/19b24499-d0b5-7e8e-fa91-7f8d359a45c8.jpeg)

Boxは「bento/centos-7.5」を使用します。
bentoというのはユーザ名で、Chef社が公開しているBoxです。

検索結果一覧でBox名をクリックすると、vagrantコマンドが記載されているので、こちらを後で実行します。

![vagrantコマンド](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/95445717-8fdf-7c14-2d27-50b52a615354.jpeg)


※「bento/centos-7.5」以外のBoxを使用すると、このあとに実行していくコマンドがうまく反映されない可能性があるので、よくわからない方はとりあえず同じBoxを使用してください。

## Vagrant Boxをinitする
先ほどのコマンドを使用して、Boxのinitを行います。

コマンドプロンプトから実行してもいいのですが、Visual Studio Code は、エディタ内でコマンド操作を行う事ができるのでVisual Studio Codeから実行しましょう。
「表示」→「ターミナル」もしくは
ショートカットキー Ctrl + @ でターミナルを開きます。

![ターミナルを開く](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/7c83a013-5824-36a7-f0f2-beb14228c163.jpeg)


Visual Studio Codeで開いてるフォルダが自動的にカレントディレクトリになります。

ためしにVagrantのバージョンを表示してみましょう。

```bat:powershell
vagrant -v
```

Vagrantのバージョンが正しく表示されました。

![Vagrantのバージョンを確認する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/5ca1f221-f58a-3d96-96d6-9175deb4f112.jpeg)


では、先ほど確認したVagrant Boxのコマンドを実行します。
※少し時間がかかります。

```bat:powershell
vagrant init bento/centos-7.5
```

![Vagrantfileが作成されるコマンド](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/427a467d-95c0-a525-0ffd-f5a7962001df.jpeg)

コマンド実行後、「C:\work\test」フォルダに「Vagrantfile」が作成されました。

![Vagrantfileが作成される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/b165b1c4-543e-0028-00aa-ed6cabfc2143.jpeg)

## 作成されたVagrantfileを編集する
Visual Studio Code 上で、先ほど作成したVagrantfileを開きます。
中身を以下に書き換えます。

```bat:Vagrantfile
Vagrant.configure("2") do |config|
  config.vm.box = "bento/centos-7.5"
  config.vm.network "private_network", ip: "192.168.33.10"
  Encoding.default_external = 'UTF-8'
  
  config.vm.provision :shell, path: "provision.sh"
end
```

「config.vm.box」は先ほどinitしたVagrantのBox名が指定されています。
「config.vm.network」の「ip:」は任意のIPアドレスを指定します。
ここを設定することによって、ローカルのホストOSから仮想のゲストOSにhttp接続できるようになります。
「config.vm.provision」はこのあと解説する、provision.shファイルを指定します。

## provision.shを作成する
provisionとは、Vagrantの初回起動時に、自動で実行してくれるスクリプトです。
provisionに処理を記載しておくことで、初回の環境構築を自動化する事ができます。
これがVagrantを使用するメリットのひとつです。

「Vagrantfile」があるフォルダと同じ階層に「provision.sh」を作成します。
今回だと「C:\work\test\provision.sh」です。

作成した「provision.sh」を開き、PHP 7.1 の開発環境を構築するための以下のコードを貼り付けます。

```shell:provision.sh
# Apacheのインストール
sudo yum -y install httpd

# Firewallsの無効
sudo systemctl stop firewalld

# EPELのリポジトリ追加
sudo yum -y install epel-release

# Remiのリポジトリ追加
sudo yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

# PHPのインストール
sudo yum -y install --enablerepo=remi,remi-php71 php php-cli php-common php-devel php-mbstring php-pdo php-gd php-xml php-mcrypts php-pecl-xdebug

# httpd.confの設定書き換え
 sudo cp -f /vagrant/conf/httpd.conf /etc/httpd/conf/httpd.conf

# シンボリックリンクの作成
cd /var/www
sudo rm -r html
sudo ln -s /vagrant/html /var/www/html

# 自動起動設定
sudo systemctl enable httpd.service

# Apacheの起動
sudo systemctl start httpd

# 完了
echo "provisioning success"
```

## 共有フォルダを作成する
vagrantfileがあるフォルダに「html」フォルダを作成します。
今回だと「C:\work\test\html」です。
「provision.sh」でシンボリックリンクの作成の処理を記載しているので、ローカルのホストOSの「C:\work\test\html」フォルダと、仮想のゲストOSの「/var/www/html」フォルダが共有されます。
フォルダ共有しておくと、ローカルのホストOSで編集したhtmlが、仮想のゲストOSでも反映されるのでとても便利です。

## Apache設定ファイルを作成する
Apacheの設定ファイルの「httpd.conf」を作成します。
Vagrantfileがあるフォルダに「conf」フォルダを作成し、その中に「httpd.conf」ファイルを作成します。
今回だと「C:\work\test\conf\httpd.conf」です。

「httpd.conf」ファイルを開き、以下のコードを貼り付けます。

```conf:httpd.conf
ServerRoot "/etc/httpd"

Listen 80

Include conf.modules.d/*.conf

User apache
Group apache

ServerAdmin root@localhost

<Directory />
    AllowOverride none
    Require all denied
</Directory>

DocumentRoot "/var/www/html"

<VirtualHost *:80>
    DocumentRoot "/var/www/html/test"
</VirtualHost>

<Directory "/var/www">
    AllowOverride None
    Require all granted
</Directory>

<Directory "/var/www/html">
    Options Indexes FollowSymLinks

    AllowOverride None

    Require all granted
</Directory>

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

<Files ".ht*">
    Require all denied
</Files>

ErrorLog "logs/error_log"

LogLevel warn

<IfModule log_config_module>
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common

    <IfModule logio_module>
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>

    CustomLog "logs/access_log" combined
</IfModule>

<IfModule alias_module>

    ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"

</IfModule>

<Directory "/var/www/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>

<IfModule mime_module>
    TypesConfig /etc/mime.types

    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
</IfModule>

AddDefaultCharset UTF-8

<IfModule mime_magic_module>
    MIMEMagicFile conf/magic
</IfModule>

EnableSendfile off

IncludeOptional conf.d/*.conf
```

「VirtualHost」には、バーチャルホストに対してのみ適用されるディレクティブ群を記載します。
今回は、「/var/www/html/test」をドキュメントルートとします。
「provision.sh」で、「httpd.conf」をローカルのホストOSから仮想のゲストOSへコピーするスクリプトを記述しているので、仮想マシン起動時にApacheの設定が仮想環境へコピーされます。    

## 仮想マシンを起動する
Visual Studio Codeのターミナルで以下のコマンドを実行します。

```bat:powershell
vagrant up
```

Vagrantfileが存在するディレクトリで実行してください。
今回だと「C:\work\test」です。

![Vagrant up コマンド](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/d64f4810-cbb1-bda3-ca7f-49e703e3e54a.jpeg)


vagrant up コマンドを実行すると、デフォルトのプロバイダであるVirtualBoxが起動します。
「Vagrantfile」に記載したBoxを追加し、仮想環境を自動で構築してくれます。
「このアプリ（VirtualBox）がデバイスに変更を加えることを許可しますか？」というダイアログが出た場合は、「はい」を選択してください。
初回なので、起動に時間がかかります。

![vagrant up 完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/29c54166-1d3f-4c77-67b3-3bd1892df0d4.jpeg)

仮想マシンが起動されたか確認するには、「vagrant status」コマントを実行してください。

```bat:powershell
vagrant status
```

仮想マシンが起動されていれば、「running (virtualbox)」と表示されます。

![仮想マシンの状態](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/cfbeda6a-8819-dfa5-2df6-fa12e8505bbe.jpeg)

# 仮想マシンにログインする
仮想マシンが起動出来たら、ログインしましょう。
ターミナルで以下のコマンドを実行してください。

```bat:powershell
vagrant ssh
```

![ssh接続完了](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/415c8ccc-f63b-7149-0dae-a907727040a1.jpeg)

仮想マシンに接続されたら、Apacheが起動しているか確認しましょう。

```bat:powershell
service httpd status
```

Apacheが起動していれば「Active: active (running)」と表示されます。

![Apacheの状態](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/8071061b-b152-830f-4d70-ac1655f6b81b.jpeg)

「provision.sh」で、仮想マシン起動時に自動的にApacheを起動させる設定にして環境構築しているので、今後もApacheは自動で起動してくれるはずです。
もし起動していなければ、以下のコマンドで起動させることもできます。

```bat:powershell
sudo systemctl start httpd
```

# Webページを表示させる
これで環境が整いました。
いよいよWebページを表示させてみましょう。

## phpファイルを作成する。
ドキュメントルートにあたるフォルダに「index.php」ファイルを作成します。
仮想マシンのドキュメントルートは「httpd.conf」で指定した「/var/www/html/test」です。
「html」フォルダはローカルのホストOSと共有されているので、ローカルの「html」フォルダに「test」フォルダを作成し、その中に「index.php」ファイルを作成します。
今回だと「C:\work\test\html\test\index.php」です。

![index.phpファイル](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/dba767c2-ac29-e8db-cc18-e8de95a21082.jpeg)

「index.php」ファイルを開き、以下のコードを貼り付けます。

```php:index.php
<!DOCTYPE HTML>
<html>
<body>

</div>
<?php
print "PHPのバージョンは、" . phpversion();
?>
</div>

</body>
</html>
```

ローカルのホストOSからウェブブラウザを開き、「Vagrantfile」に記載したIPアドレスにアクセスします。
今回は「192.168.33.10」です。

![ブラウザ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/b1ffab28-eff1-73f2-21cf-25c23a0ebd95.jpeg)

無事に表示されました。

# ログアウト・シャットダウン方法
仮想マシンからログアウトするには「exit」コマンドを使用します。

```bat:powershell
exit
```

![ログアウト](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/2ab41f31-cbc9-8ee4-a7c0-51adca40a2f2.jpeg)

仮想マシンをシャットダウンするには以下のコマンドを実行します。

```bat:powershell
vagrant halt
```

![シャットダウン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230850/86dfbf2d-de66-9150-c7d2-a3218a0a3964.jpeg)

# コマンドについて
## Vagrantのコマンド例
※Vagrantfileが存在するディレクトリで実行すること

| コマンド | 内容 |
|---|---|
| vagrant up | 仮想マシンを起動する |
| vagrant halt | 仮想マシンをシャットダウンする |
| vagrant reload | 仮想マシンを再起動する |
| vagrant destroy | 仮想マシンを廃棄する |
| vagrant status | 仮想マシンの状態を確認する |
| vagrant ssh | 仮想マシンにSSH接続する |

## Vagrant Boxのコマンド例

| コマンド | 内容 |
|---|---|
| vagrant box list | Boxの一覧を表示する |
| vagrant box remove [Box名] | Boxを削除する |

## Apacheのコマンド例
| コマンド | 内容 |
|---|---|
| service httpd status | Apacheのサービスの状態を確認する |
| httpd -v | Apacheのバージョンを調べる |
| sudo service httpd start | Apacheを起動する |
| sudo service httpd stop | Apacheを停止する |
| sudo service httpd restart | Apacheを再起動する |

# おわりに
開発環境の構築はたまにしかやらないので、久しぶりにやると、前どうやったんやっけ。。。？と困る事が多く、一旦手順をまとめてみました。
Apacheの設定などがあまり理解出来ていないので、ちゃんと勉強しないといけないですね。

しかしVagrantはいいですね。
PCの環境も汚れないし、一度環境構築すれば、次回からは

1. Visual Studio Code を起動
1. ターミナルを表示
1. 「vagrant up」コマンドを入力

の3Stepだけで、開発環境が整うのでめちゃくちゃ便利です。

参考サイト
[Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する](https://qiita.com/ozawan/items/160728f7c6b10c73b97e)
[【Linux環境構築】VagrantとVirtualBoxとは？使い方を初心者向けに解説！](https://kitsune.blog/linux-environment)