Visual Studio Code(VS Code)のローカル検証環境でPHPを実行させる方法

クラウド

Microsoftが提供している無償のエディタ「Visual Studio Code」が使いやすくて便利です。単なるエディタとして利用しても良いですが、プラグインが充実しているため、HTMLやその他の言語開発に利用しているケースも多々見受けられます。

弊社のホームページコンテンツを作成・運営している部署も「VS Code」を利用していますが、本番環境へデプロイ(反映)する前に作成したコンテンツを確認したいという要望があります。コンテンツ作成作業をしている端末で確認できると便利ですね。

「VS Code」のプラグイン、「Live Server」をインストールするとHTMLファイルはCSSを含め確認することができますが、PHPなどの動的コンテンツは動作しません。

また、「PHP Server」というプラグインを利用するとPHPで書かれた動的コンテンツも確認可能ですが拡張子が.phpであるファイルしかPHPと認識してくれません。.htmlの中にPHPのコードを含むようなコンテンツはPHPが動作せず、確認ができませんでした。

Webで調べてみると、「XAMPP」を利用するやり方を紹介している方が多数いらっしゃいました。XAMPPは、端末にウェブサーバ、PHPなどを起動することのできるツールですが、皆さんが行っているやり方を真似するのでは芸がない。ということで、今回はWSL2を使ってapache2を起動し、そこでPHPも動作するようにしてみます。

VS Codeのインストール

VS Codeのセットアップ方法は「Running Visual Studio Code on Windows」に手順が記載されています。WSLでの開発には「Remote – WSL」というプラグインを利用すると便利になりますが、今回は開発中のフォルダをApacheで表示するところまでを行います。

WSL2のインストール

以前書いたブログに手順を掲載しています。ご参考にしてみてください。

※今回Dockerは利用しませんので「Docker CLIのインストール」からは実施しなくてOKです。

WSL2でApache+PHPをインストールして起動

VS Codeで開発中のワークスペース(ディレクトリ)を開き、ターミナルで> wslと入力するとWSLが起動してきます。以下のコマンドを順に入力してウェブサーバを起動します。

WSL2の最新化

sudo apt update

ApacheとPHPをインストール

sudo apt install apache2 php libapache2-mod-php php7.4-xml

Apache設定を変更

cat << EOF | sudo tee /etc/apache2/sites-available/localhost.conf
<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName 127.0.0.1
    ServerAlias localhost
    DocumentRoot "`pwd`/wwwroot"    ErrorLog \${APACHE_LOG_DIR}/error.log
    CustomLog \${APACHE_LOG_DIR}/access.log combined    AddHandler application/x-httpd-php .php .html
    <Directory "`pwd`/wwwroot">
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>
</VirtualHost>
EOF

DocumentRootを現在表示中のディレクトリにあるwwwroot配下に設定しています。適宜変更してください。

Apache設定を反映

sudo a2ensite localhost.conf
sudo a2dissite 000-default.conf

Apacheを起動

sudo service apache2 start

次回実施する場合は、このApache起動のみを行えば大丈夫です。

検証環境へのアクセス

今回の検証環境へのアクセスは、WSLで利用しているIPアドレスに対して接続します。

以下のコマンドでIPアドレスを確認してください。

ip addr show dev eth0

1: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
    link/ether 00:00:00:00:00:00 brd ff:ff:ff:ff:ff:ff
    inet 172.16.210.123/24 brd 172.16.210.255 scope global eth0
       valid_lft forever preferred_lft forever

上記の例の場合は、「http://172.16.210.123」へアクセスします。

WSL2のlocalhostにアクセスする場合

wsl2では、ホストのWindowsからwsl2のlocalhostにアクセスさせることも可能です。以下のPowerShellコマンドを実行して、.wslconfigに「localhostForwarding=True」を記載します。

"localhostForwarding=True" | Out-File -FilePath ~\.wslconfig

上記を設定することで、http://localhost でApache2にアクセス可能です。

開発環境のリソース(CPU、メモリ、ディスク容量など)が潤沢な場合は、WSL2+Docker+VS Code+Remote-WSLの組み合わせで複数の環境を共存するとより便利になりそうですね。

タイトルとURLをコピーしました