はじめに
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のバージョンを表示してみましょう。
vagrant -v
Vagrantのバージョンが正しく表示されました。
では、先ほど確認したVagrant Boxのコマンドを実行します。
※少し時間がかかります。
vagrant init bento/centos-7.5
コマンド実行後、「C:\work\test」フォルダに「Vagrantfile」が作成されました。
作成されたVagrantfileを編集する
Visual Studio Code 上で、先ほど作成した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 の開発環境を構築するための以下のコードを貼り付けます。
# 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」ファイルを開き、以下のコードを貼り付けます。
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のターミナルで以下のコマンドを実行します。
vagrant up
Vagrantfileが存在するディレクトリで実行してください。
今回だと「C:\work\test」です。
vagrant up コマンドを実行すると、デフォルトのプロバイダであるVirtualBoxが起動します。
「Vagrantfile」に記載したBoxを追加し、仮想環境を自動で構築してくれます。
「このアプリ(VirtualBox)がデバイスに変更を加えることを許可しますか?」というダイアログが出た場合は、「はい」を選択してください。
初回なので、起動に時間がかかります。
仮想マシンが起動されたか確認するには、「vagrant status」コマントを実行してください。
vagrant status
仮想マシンが起動されていれば、「running (virtualbox)」と表示されます。
仮想マシンにログインする
仮想マシンが起動出来たら、ログインしましょう。
ターミナルで以下のコマンドを実行してください。
vagrant ssh
仮想マシンに接続されたら、Apacheが起動しているか確認しましょう。
service httpd status
Apacheが起動していれば「Active: active (running)」と表示されます。
「provision.sh」で、仮想マシン起動時に自動的にApacheを起動させる設定にして環境構築しているので、今後もApacheは自動で起動してくれるはずです。
もし起動していなければ、以下のコマンドで起動させることもできます。
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」ファイルを開き、以下のコードを貼り付けます。
<!DOCTYPE HTML>
<html>
<body>
</div>
<?php
print "PHPのバージョンは、" . phpversion();
?>
</div>
</body>
</html>
ローカルのホストOSからウェブブラウザを開き、「Vagrantfile」に記載したIPアドレスにアクセスします。
今回は「192.168.33.10」です。
無事に表示されました。
ログアウト・シャットダウン方法
仮想マシンからログアウトするには「exit」コマンドを使用します。
exit
仮想マシンをシャットダウンするには以下のコマンドを実行します。
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とは?使い方を初心者向けに解説!