Visual Studio CodeでPHPファイルをブラウズできません

Question

前提・実現したいこと

Visual Studio Code（以下VSCode）で編集し保存すると、HTMLファイルであれば保存し「GoLive」とすぐに編集部分がブラウザに反映されるので快適に使えています。（http://127.0.0.1:5500/）

ただPHPファイル（index.php）など、外部APIを読み込むページは「GoLive」を押してもブラウズさえできません。
HTMLファイル同様にPHPファイルの場合も「 編集 > 保存 > ブラウズ 」という使い方ができる方法はないでしょうか？

ネットで拾ったデバッグ用の追記など幾つか試しましたが、理解していないので見当違いなのだと思います。

MAMPの仮想サーバー（8888）ではHTMLでもPHPでも問題なくブラウザで見ることができる環境です。

よろしくお願いします。

発生している問題・エラーメッセージ

PHPファイルの場合は「GoLive」押すとファイル一覧「listing directory」が開く状況です。

試したこと

拡張機能の「php studio」を使えば http://localhost:3000/hoge.phpでブラウズできますが、編集した場合はReload Serverで新たにタブが開かれてしまうので、違う方法があればと思っています。

補足情報（FW/ツールのバージョンなど）

Mac OS10.11.6
MAMP 4.5
PHP 7.2.1

Visual Studio Code 1.45.1
Chrome 83.0.4103.97

Answer 1

まず、HTMLファイルとPHPファイルの違いを理解しましょう。

HTMLファイルはクライアントサイドの言語と言って、クライアント側のブラウザで処理します。
通常、クライアントからブラウザ経由でWEBサーバーへアクセスした場合、サーバーはクライアントのブラウザにHTMLファイルを渡して、ブラウザがHTMLファイルを読んで然るべき表示をしている形となります。

一方で、PHPの場合はサーバーサイドの言語でして、クライアント側のブラウザからアクセスがあった場合、サーバー側でPHPを処理してHTMLを生成して、生成したHTMLをクライアントでに渡す動きをするので、PHPの場合必ずPHPを処理するためのサーバーが必要となります。

VSCodeのLive Serverはサーバーサイドの言語を処理する機能を持っていないので、外部のサーバーと連携する必要があります。今回であればすでにインストールしているMAMPですね。また、Liveを実現するために、ブラウザの拡張機能も追加する必要があります。
以下にlive Server公式に記載しているサーバーサイドの言語を表示する方法がありますので、参考して設定してみてください。

https://github.com/ritwickdey/live-server-web-extension/blob/master/docs/Setup.md

Comments

[gossu]

ご回答ありがとうございます。
早速リンク先ページを参考に設定してみようと思います。

[gossu]

あまり理解はできていないと思いますが、ご紹介いただいたページを参考にしたところPHPファイルもGoLiveを押せばブラウザでプレビューでき、保存した時点で編集が反映されるようになりました。

ユーザーのsetting.jsonに

"liveServer.settings.useWebExt": true

を追記し、Chromeに機能拡張の「Live Server Web Extension」をインストールするだけだったのですね。

１点残念なのが下層ディレクトリのPHPファイルを編集する時は、そのPHPファイルのあるフォルダをワークスペースとして開き、setting.jsonにも

"liveServer.settings.proxy": {
"enable": true,
"baseUri": "/",
"proxyUri": "http://localhost:80/hoge"
}

を追記する必要があるようです。

それでもかなり便利に使えるようになりました。ありがとうございました。