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の組み合わせで複数の環境を共存するとより便利になりそうですね。