はじめに
友人（@digital24s さん）と一緒にウェブサイトのリニューアルを検討しています。商品を一覧して紹介するページを用意するにどうしようか考えました。WordPress のような CMS を使ってもいいかも知れませんが、ツールを使いこなすためのコストも発生します。
自分でスクリプトを書いてもいいかも知れません。ウェブサイトを置くレンタルサーバは PHP が使えました。PHP アプリを開発するための環境を用意してみたいと思います。
PHP アプリの実行環境を用意する
PHP アプリの実行環境は、以下のように描けるでしょうか。
ユーザがウェブブラウザでウェブサイトにアクセスします。ウェブサーバは PHP エンジンを呼出して PHP アプリのソースコードを実行して結果をウェブブラウザに返します。PHP アプリのソースコードは開発環境で作成して実行環境にデプロイしておきます。↑
PHP アプリの開発環境を用意する
PHP アプリの開発環境を用意したいと思います。
自分は Windows 環境にしましたが、macOS 、Linux でも同様にできます。
PHP アプリの開発環境①
閲覧環境のウェブブラウザや実行環境のサーバなども、開発環境に一緒にするのがよさそうです。
Visual Studio Code でPHPを開始するまでの手順 #VSCode - Qiita
ウェブブラウザは、開発環境にインストールされている Microsoft Edge や Google Chrome を使います。
ウェブサーバや PHP エンジンをインストールするのに、XAMPP を使うことにします。
IDE（統合開発環境）に VS Code を使います。PHP 開発のための拡張機能を導入します。
IDE でステップ実行や変数ウォッチできるデバッグ環境を用意するのに、PHP エンジン側も仕掛けないといけないのがちょっと面倒ですね。↓
VS Code にも拡張機能 PHP Debug を導入したうえで、デバッグ実行の設定 launch.json に以下の設定を用意します。
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003
},
(後略)
環境が用意できたところでデバッグを実行してみます。
①XAMPP のコントロールパネルで Apache を起動する
②VS Code でデバッグ実行したい PHP スクリプトを開く
③VS Code の 実行とデバッグ で「Listen for Xdebug」を実行する
④ウェブブラウザでデバッグ実行したい PHP スクリプトを開く
開発環境で IDE から見た PHP スクリプトのパスと、ウェブブラウザから見た URL がどう対応しているか、予め理解できていないといけませんね。
ウェブサーバ Apache の設定を確認します。XAMPP のデフォルトの httpd.conf の設定は
(前略)
DocumentRoot "C:/xampp/htdocs"
(後略)
このことから
C:/xampp/htdocs/app.php
このスクリプトを実行するのに、ウェブブラウザで開く URL は
http://localhost/app.php
PHP アプリの開発環境②
HTML で書かれたウェブページを VS Code で実行確認するのに Live Server を使うことがあります。PHP で書かれたウェブページも同様にする手順がありました。
LiveServerでPHPファイルをライブプレビューする方法 | nikunimame
VS Code から Live Server を起動してブラウザでページを表示させます。「プロキシ」設定してあって XAMPP 環境と接続するのですね。↑
さらに調べていくと、PHP Server 拡張機能がありました。
PHP エンジンは「ビルトイン（組込）ウェブサーバ」機能を持っているようです。PHP Server は、これを呼出して PHP スクリプトの実行結果をブラウザで表示できるようにします。
これを使うと Apache などのウェブサーバを別途実行しておかなくて済みます。XAMPP でなく PHP 単体を開発環境に導入してもいいでしょう。
PHP アプリの開発環境③
PHP エンジンの組込機能であれば、VS Code の 実行とデバッグ 機能で呼出できそうです。
PHPの開発環境：PHP Built-in WebServer
VS Code のデバッグ実行の設定 launch.json に以下の設定を用意します。
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Built-in web server",
"type": "php",
"request": "launch",
"runtimeArgs": [
"-dxdebug.mode=debug", "-dxdebug.start_with_request=yes",
"-S", "localhost:80"
],
"cwd": "${workspaceRoot}",
"port": 9003,
},
(後略)
上記の設定で、「Listen for Xdebug」と同様に VS Code と PHP エンジンでデバッグできるようになっています。
"-S", "localhost:80" でポート 80 を使う指定しています。既存の Apache を停止しておかないと衝突します。↑
PHP Debug 拡張機能が PHP エンジンの実行ファイルを起動できるように settings.json を設定しておきます。
{
"php.debug.executablePath": "C:/xampp/php/php.exe"
}
環境が用意できたところでデバッグを実行してみます。
①VS Code でデバッグ実行したい PHP スクリプトを開く
②VS Code の 実行とデバッグ で「Launch Built-in web server」を実行する
③ウェブブラウザでデバッグ実行したい PHP スクリプトを開く
開発環境で IDE から見た PHP スクリプトのパスと、ウェブブラウザから見た URL がどう対応しているか、予め理解できていないといけませんね。
ウェブサーバは上記の設定で実行される PHP エンジンです。その設定は
(前略)
"runtimeArgs": [
"-S", "localhost:80"
],
"cwd": "${workspaceRoot}",
(後略)
VS Code で例えば
C:/xampp/htdocs/
このフォルダを開いていたとき、このフォルダにある
C:/xampp/htdocs/app.php
このスクリプトを実行するのに、ウェブブラウザで開く URL は
http://localhost/app.php
デバッグ実行したいファイルをブラウザで開く
ウェブブラウザでページを開くのも、VS Code で操作したいですね。
【Chrome】VSCodeでのデバッグ #VSCode - Qiita
①開発環境に Google Chrome をインストールしておく
②VS Code の launch.json に以下の設定を追加する
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost/${relativeFile}",
"webRoot": "${workspaceFolder}"
},
(後略)
③VS Code でデバッグ実行したい PHP スクリプトを開く
④VS Code の実行とデバッグで「Launch Chrome」を実行する