LiveServerでPHPファイルをライブプレビューする方法

PHP 2023/12/23

VScodeでLiveServerの拡張機能を使ってHTMLファイルをライブプレビューしているのですが、phpファイルはライブプレビューしてくれません。

調べたら、phpファイルでもライブプレビューしてくれる方法を見つけたので、メモです。

◆前提
VS CodeでLive Serverをインストール済み

LiveServerでPHPファイルをライブプレビューする方法

↓に概要を記載しました。
詳細は、さらに下のリンク先を参照してください。

◆概要
【VS Code側の設定】
・Live Serverの以下の設定を変更する
　・「Proxy」の「proxyUri」にXAMPP等のURLを設定する（PHPを表示可能にするため）
　　　　　（私はDockerのローカルホストを設定）
　・「Proxy」の「enable」をtrueにする
　・「Use Web Ext」にチェックを入れる（ライブプレビューのため）

【ブラウザ側の設定】Chromeの場合
・Chromeの拡張機能で、Live Server Web Extensionをインストールする（ライブプレビューのため）
・Live Server Web Extensionの「Live Reload」をオンにして、Proxy Setupのチェックボックスを外す

これで、VS Codeで「Go Live」を押せばphpファイルのライブプレビューができると思います。

◆動かないときのチェック項目（私がひっかかったとこ）
・「Proxy」の「enable」がtrueになっているか
・「Go Live」を一度停止して、再度起動する

詳細は、こちら↓を参照してください。