WSL2 + Docker Desktop + PhpStorm でPHP開発環境を作ってみる ~後編~

WSL

はじめに

WSL 2 + Docker Desktop + PhpStorm でPHP開発環境を作ってみる ~後編~

後編ではPhpStormの設定をメインに説明します。
(PhpStormの設定方法について説明していますが、IntelliJ IDEAも基本的に同じ方法で設定できます)

前編はこちら

前編:WSL2の設定~Dockerインストール
後編:PhpStormの設定  ← いまここ

PhpStormのインストール

公式サイトよりダウンロードし、インストールしてください。
初めてインストールする場合は約1ヶ月間、無料でお試し出来ます。

インストールはWindows側で行います。

①公式サイトからインストール

PhpStorm:JetBrainsによる超高速でスマートなPHP IDE
PhpStorm は、Symfony、Laravel、Drupal、WordPress、Laminas、Magento、Magento、Joomla!、CakePHP、Yii、およびその他のフレームワークでの作業に最適な PHP IDE です。

②Toolboxからインストール

Toolboxからインストールするのも便利です。

バージョン管理(下げる事もできます)や、割当メモリの設定もToolboxから出来ます。

JetBrains Toolbox App:ツールを簡単に管理
あらゆるIDEのあらゆるプロジェクトをワンクリックで開くことができます。

割当メモリの設定

インストールした後は割当てメモリを増やしておくと、動作が軽くなるので良いです。

IDE のメモリヒープを増やす | PhpStorm
PhpStorm を実行している Java 仮想マシン(JVM)は、事前定義された量のメモリを割り当てます。デフォルト値はプラットフォームによって異なります。速度が低下している場合は、メモリヒープを増やすことをお勧めします。メインメニューからを選択します。割り当てるメモリの必要量を設定して保存して再起動をクリックします...

おまけ:紹介プログラムでお得に購入

PhpStromなどJetBrainsのエディタは有料のライセンス契約式です。

この値段を払う価値はありますが、少しでもお得に購入したい場合は下記リンクからどうぞ。
紹介プログラムによる割引が適用されます。

私にも割引が適用されるので是非お願いします^^;

JetBrains製品を割引価格で! #侍割
ご紹介によりJetBrains製品の新規ライセンスに割引が適用されます

Dockerプロジェクトの準備

今回はDockerを利用してPHP(Laravel)の開発環境を構築します。

下記仕様でテスト用のコンテナを作成しました。

  • Nginx
  • PHP 8.0
    • Xdebug (Version 3)
    • PHPUnit
  • Laravel 6.0 (LTS)

ソースコードは下記に置いてあります。
https://github.com/odaryo/php_docker_sample.git

適当なディレクトリにクローンしてセットアップしてください。
ここでは 「/workspace」 にプロジェクトを作るものとして説明します。

(以下WSL2内での作業)

$ cd /workspace
$ git clone https://github.com/odaryo/php_docker_sample.git .

Dockerコンテナの起動

$ cd php_docker_sample
$ docker-compose build
$ docker-compose up -d

Laravel初期設定

// コンテナに入る
$ docker-compose exec php-fpm /bin/bash

// 下記はコンテナ内で実行
$ composer install
$ cp .env.example .env
$ php artisan key:generate
$ exit

http://localhost:8080 でlaravelのトップ画面が表示されることを確認します。
下記画面が出れば成功です。

パーミッションについて

余談ですが
WSL2のDockerはLinuxのため、コンテナ内のパーミッション情報が引き継がれます。
そのため、コンテナ内でroot権限で作ったファイルやプロジェクト(composerで作成されるものなど)はrootユーザーで作成されるため、Windows側で編集出来ないといったトラブルがあります。

なので、コンテナ内のユーザーIDをホストに合わせるといったひと手間が必要になります。

Mac版Dockerでは、ターミナル内をrootで操作出来る?のかそんなことはないので、MacとWSL2の開発者が混ざっているプロジェクトとかだと、Dockerfileの工夫などが必要だと思います。

この記事で参考にしているDockerfileでは、Dockerコンテナ内のユーザにホストと同じIDを割り当てているので問題ないと思います。

PhpStormの設定

プロジェクトを開く

WSL2のファイルは、Windows側からは「\\wsl$\Ubuntu-20.04\」で見えます。
(「Ubuntu-20.04」の部分はインストールしたディストリビューションが入ります。)

PhpStormでは、このパスを指定してプロジェクトを開けばWSL2上のプロジェクトだと認識してくれます。

PhpStorm上でTerminalを開いたときも、良い感じでこのディレクトリに移動してくれます。

Dockerとの連携

設定ダイアログの「Build, Execution, Deployment」→「Docker」で、Docker for windowsが選択されていることを確認します。
Docker Desktopをインストールしていると、自動で選択されていると思います。

また、Path mappingのところは、プロジェクトフォルダのWSL2側とWindows側マッピングを書くそうですが、デフォルトでも動いたので、このままで良いと思います。(未調査)
もしかしたら設定が必要かもしれません。

PHP Remote Interpreterを設定

PhpStormからDocker内のPHPを使う設定を追加します。

①設定の「PHP」を開きます。

②「CLI Interpreter」の右側の[…]をクリックします。

③開いたダイアログから「From Docker, …」を選択します。

④「Docker Compose」を選択後、「Service」でPHPの入ったコンテナを選択します。

⑤OKを押すと、「CLI Interpreters」ダイアログにコンテナの情報が設定されます。

ServiceがPHPのあるコンテナであること、PHPとXdebugのバージョンが目的のものであることを確認してOKを押します。

⑥「Php language level」が違っていたら変更してください。

以上でPHPの設定が完了しました。

Xdebugの設定

Xdebugの設定は、こちらのファイルで指定しています。
https://github.com/odaryo/php_docker_sample/blob/master/docker/php-fpm/conf.d/xdebug.ini

①設定ダイアログから「PHP」→「Debug」を開きます。

「Debug port」にxdebug.iniで設定したポート番号(9003)が設定されていることを確認します。

②設定ダイアログを閉じ、エディタ右上の「Add Configuration…」より、Xdebug利用設定を行います。

③「+」ボタンから「PHP Remote Debug」を選択します。

④Xdebugの設定を行います。

「Filter debug connection by IDE key」にチェックし、Serverを設定します。
未作成の場合は右側の「…」ボタンから追加してください。 (⑤へ)

「IDE key」にはxdebug.iniで設定してあるキーの値を指定します。
(本環境ではPHPSTORMを設定しています。)

⑤Serverの設定を入力します。

今回の環境では、Hostは「locakhost」、Portは「80」(おそらくDockerコンテナ内のポート)を指定してやります。DebuggerにはそのままXdebugを設定します。

また、「Use path mappings …」にチェックを付けDockerコンテナ内とパスを合わせます。
今回は「/app」ディレクトリだけ設定すれば良いです。
※右側のパスは、Dockerコンテナ内のパスを記載します。

OKボタンを押したら設定完了です。

⑥デバッグができることを確認します。

デバッグモードにするには右上のデバッグボタン(虫アイコン)を押します。

デバッグボタンを押すことでデバッグモードが起動します。
停止する際は右の停止ボタン(赤い四角アイコン)を押してください。

止めたい部分にブレークポイントを設定し、ブラウザから「 http://localhost:8080 」にアクセスすればブレークポイントの行で止まります。

※ブレークポイントで止まらない場合はWindows側のFirewallが原因の可能性かもしれません。
ポートを開放するか、Firewallの解除でデバッグできることを確認しました。

補足

デバッグモードにするには、下記のアイコンをクリックするよう書かれていますが、これを設定しても私の環境では動きませんでした。

代わりに、上で説明した虫アイコンをクリックすることでデバッグモードのON/OFFが切り替えられるので、特に不便は感じていません。

PHPUnitの設定

PHPUnitの設定を行います。
PhpStormでは、PHPUnitをIDE上からキーボードショートカットで実行できたり、エラーとなった行にジャンプできるなど便利に使えます。

①設定ダイアログから「PHP」→「Test Frameworks」を開きます。

「+」ボタンを押し、以前設定したPHP Interpreterを選択します。
ここでは、php-fpmコンテナを選択します。

②設定ファイルのパスを指定します。

「Path to script」にautoload.phpのパスを入力します(おそらく自動入力です。)

「Default Configuration file」にチェックを付け、phpunit.xmlのパスを記載します。

※ 注意点として、パスの入力欄はどちらもDockerコンテナ内のパスを記載してください。

③PhpUniuitの登録

設定画面を閉じ、エディタ右上の選択欄から「Edit Configurations…」(Xdebugなどを設定していない場合は「Add Configuration…」)を選択します。

「+」ボタンを押してPHPUnitを追加します

Test Runnerは「Defined in the configuration file」を選択、Interpreterはphp-fpmを選択してOKを押します。

以上で設定は完了です。

④PHPUnitの実行

テスト実行ボタンを押して、テストが完了することを確認してください。

GitやNode.jsの連携

PhpStormはWsl2との連携が強化されたので、WSL上のGitやNode.js(npm/yarn含む)も認識して使ってくれます。

Gitの設定

Gitは特に設定しなくても使えました。

デフォルトでWSL2内のGitを使うようなので、Push時などにGitHubなどのログイン情報を設定するだけでOKです。

Node.jsの設定

Node.jsを連携させるには下記手順で設定します。

設定ダイアログから「Language & Frameworks」→「Node.js and NP」を開き、「Node Interpreter」を選択します。

ここでは「Add…」を押し、「Add WSL…」を選択します。

表示されたダイアログで、Node.jsのパスを選択すればOKです。

下記画面でエラーなく設定されていたら成功です。
Package managerは必要であればyarnを選択しておきます。

おわりに

以上でPhpStormを使った開発環境の基本的な設定が出来ました。

他にもSQLクライアントやRestAPIクライアントなど便利なツールが含まれていますが、ここでの説明は割愛します。

一昔前は、Web開発といったらMacでしたが、WSL2が出てからWindowsの環境も満足の行くものになったと思います。

Macからの乗り換えを検討している方は是非参考にしてください。

前編はこちらです。

コメント

タイトルとURLをコピーしました