はじめに

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がインストールされている事を確認しましょう。

コマンドプロンプト

vagrant -v

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

仮想マシン構築手順

Visual Studio Code を起動する

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

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

Vagrant Boxを検索する

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

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

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

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

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

Vagrant Boxをinitする

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

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

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

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

powershell

vagrant -v

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

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

powershell

vagrant init bento/centos-7.5

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

作成されたVagrantfileを編集する

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

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 の開発環境を構築するための以下のコードを貼り付けます。

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」ファイルを開き、以下のコードを貼り付けます。

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のターミナルで以下のコマンドを実行します。

powershell

vagrant up

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

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

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

powershell

vagrant status

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

仮想マシンにログインする

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

powershell

vagrant ssh

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

powershell

service httpd status

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

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

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」ファイルを開き、以下のコードを貼り付けます。

index.php

<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>

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

無事に表示されました。

ログアウト・シャットダウン方法

仮想マシンからログアウトするには「exit」コマンドを使用します。

powershell

exit

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

powershell

vagrant halt

コマンドについて

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の環境も汚れないし、一度環境構築すれば、次回からは

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

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

参考サイト
Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する
 【Linux環境構築】VagrantとVirtualBoxとは？使い方を初心者向けに解説！