WEBプログラミング入門

ライブサーバーでPHPを自動更新する設定

vscodeの拡張機能LiveserverはHTMLの自動更新ができるが、デフォルトの状態ではPHPの自動更新ができない。PHPの自動更新をするために、Chromeの拡張機能LiveServer WEB Extensionをインストールして、VSCodeの設定ファイルを環境に合わせて変更する。

VSCodeの拡張機能LiveServerをインストール

liverserverで検索して下記拡張機能をインストール

Chromeの拡張機能をインストール

Live Server Web Extension
インストールするとライブサーバーのアイコンがChrome右上メニューに表示される。アイコンをクリックすると設定メニューが表示され、LiveReloadのON・OFF切り替えできる。ページ遷移でワンタイムトークンを実装しているサイトではOFFにしておく。I don't want proxy setupにはチェックしない。

setting.json

ユーザーのsettings.json
{
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.proxy": {
"enable": true,
"baseUri": "/",
"proxyUri": "http://127.0.0.1",
},
"liveServer.settings.https": {
"enable": true,
"cert": "C:/xampp/apache/conf/ssl.crt/my-server.crt",
"key": "C:/xampp/apache/conf/ssl.key/my-server.key",
"passphrase": "",
},
"liveServer.settings.useWebExt": true,
}
ワークスペースの.vscode/settings.json
{
"liveServer.settings.host": "test1.com",
"liveServer.settings.port": 5501
}

ワークスペースのsetting.jsonとは例えばローカル開発環境でtest1.comをサーバーネームとしてtest1.com/public_htmlをドキュメントルートとした場合、test1.com/.vscode/setting.jsonの場所に置く設定ファイルで、ユーザーのsetting.jsonより優先される。この設定ではhtdocs/test1.comをvscodeで開いて、liveserverを立ち上げるとhttps://test1.com:5501/がライブサーバーとしてのURLとなる。httpで確認したい場合"liveServer.settings.proxy"の"enable": true,をfalseにすればよい。

証明書について

自己証明書がインストールされていないとHTTPS表示できないため、下記記事を参考に先にChromeにインストールしておく。 XAMPPでゼロから開発環境を構築する
関連リンク