WSL + Ubuntu + PHP + xdebug + Visual StudioCode + PHP DebugでPHPの学習環境構築

前提
  • OSがWindows 10 Proであること。
  • WSLを有効化していること。
  • WSLにUbuntuインストール済みであること。
  • WSLのUbuntuPHPインストール済みであること。
  • ローカル環境にVisual Studio Codeインストール済みであること。

Ubuntuphp-xdebugをインストール

sudo apt install php-xdebug

php-xdebugの設定ファイルを修正

vi で設定ファイルを開く

sudo vi /etc/php/7.2/cli/conf.d/20-xdebug.ini

設定ファイルの内容を以下のように修正

zend_extension=xdebug.so
xdebug.remote_enable=on
xdebug.remote_autostart = 1

Visual Studio CodePHP Debugをインストール

赤色の枠の部分をクリックしていく。

PHP Debugをインストールする様子
PHP Debugをインストール

Visual Studio CodeにインストールしたPHP Debugの設定

設定ファイル(.vscode/launch.json)は、歯車マークをクリックして開けられる

PHP Debugの設定ファイルの開き方
PHP Debugの設定ファイルの開き方

設定ファイル(.vscode/launch.json)を以下のように修正

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "php local debug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "pathMappings": {
                "/mnt/c":"c:/"
            }
        }
    ]
}

準備OK!デバッグ実行してみよう。

  • 赤〇で囲った虫を押下。
  • オレンジで囲ったところをクリックしてブレークポイントを指定
  • 緑で囲ったところを「php local debug(ここはlaunch.jsonに指定したnameが表示される)」に変更して再生ボタンを押下
  • 水色で囲った部分にターミナルを表示しておく(ここでプログラムの実行を行う)

PHP Debugの準備
PHP Debugの準備

プログラムは以下の通り

<?php

echo "hello\n";
echo "hello\n";

$test = "test";

$number = 100;

$number2 = 200;

$number3 = $number + $number2;

プログラム実行してみる。

wsl php echo.php

PHP Debugのブレークポイントで止まった様子
PHP Debugのブレークポイントで止まった様子

ブレークポイントで止まった。

ステップオーバーしてみる。

赤〇で囲ったのアイコンをクリックして、1行ステップオーバー(プログラムが1行進む)

ステップオーバーの様子
ステップオーバーの様子

オレンジ色で囲ったところで変数の中身も確認できる。

感想

apacheをインストールする必要もなく、 簡単にできた。

こんな感じでPHPがステップ実行できると、 プログラム初級の部分(変数・演算・分岐・ループ・関数)で躓きにくくなるかもしれない。

改めて、Visual Studio Code の凄さを実感。

これが無償で利用できるなんて。。。

参考

togetter.com

togetter.com

togetter.com

参考にしたサイト

Setting up PHP for development on Windows Subsystem for Linux in Windows 10 | Tim Anderson's IT Writing

yarnでvue/cliをインストールしたときのログ

mitsugi@mitsugi-pc:~$ yarn --version
1.16.0
mitsugi@mitsugi-pc:~$ yarn global add @vue/cli
yarn global v1.16.0
[1/4] Resolving packages...
warning @vue/cli > @vue/cli-shared-utils > joi@14.3.1: This module has moved and is now available at @hapi/joi. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
warning @vue/cli > @vue/cli-shared-utils > joi > topo@3.0.3: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
warning @vue/cli > @vue/cli-shared-utils > joi > hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
warning @vue/cli > @vue/cli-shared-utils > joi > topo > hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
warning @vue/cli > @vue/cli-ui > fkill > taskkill > execa > cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > ts-node@8.1.0" has unmet peer dependency "typescript@>=2.0".
[4/4] Building fresh packages...
success Installed "@vue/cli@3.7.0" with binaries:
      - vue
Done in 369.32s.
mitsugi@mitsugi-pc:~$

ConoHa VPSは1hあたりで1円でサーバを借りることが出来る。けど停止してても1円かかる。

ConoHa VPSを利用してみた。

試したプランは以下の画像のプラン。(画像はcacooで作図)

f:id:mitsugi-bb:20190213123210p:plain

1時間が1円で上限が630円なのでまぁお安い方。

630hを超えるまでは、利用した時間だけの費用で良い為、 サーバ構築の練習にもってこいだと思った。

そして試しにcloud9環境を構築してみて、使わないから停止して1日放置していたら、 ちゃっかり課金されていたので、忘れない為に記事にしておく。(わざわざ作図までしてみたりして。)

課金されたくなければ、サーバを削除する必要があるよう。

サーバ構築の手順を手になじませるには、 何度も繰り返して練習するほうが効果的。

作り直しが短時間でできるConoHaは結構もってこいかもしれない。

そんなConoHaは↓↓から利用下さい。

っと。久しぶりにアフェリエイトリンク張ってみた。