LaravelとNuxt.jsをVSCodeで開発する環境をDockerで用意した【Visutal Studio Code編】

これまでにDockerで実行環境を用意出来たのでいよいよVisutal Studio Codeで開発するための設定をしていきます。Visutal Studio Codeはインストールしてある前提です。

Visual Studio Codeのインストール【Windows】

Remote containersの設定

Dockerを使って開発する場合、コンテナからホスト上のボリュームにマウントしてソースコードを参照させるようなやり方が普通っぽいのですが、それでやってみたらLaravelで簡単なAPIを処理させるのに3秒くらいかかってしまってちょっと遅いなと感じました。

調べてみるとそれを解消するための対策もあるようですがハイレベル過ぎて理解不能でしたのでRemote containers でコンテナ内で直接ソースを編集するような方法を取ってみました。

参考 Docker x Laravel めちゃくちゃ遅い Docker for Mac を爆速化する - QiitaQiita

拡張機能Remote containers のインストール

VSCodeの拡張機能で「Remote containers」を探してインストールします。似たようなのがありますが使うのはRemote containersです。

  • Remote containers:今回使うやつ。
  • Remote SSH:SSH経由でリモート開発するための拡張機能
  • Remote WSL:WSL上でリモート開発するための拡張機能
  • Remote Development:上記3つの詰め合わせ

コンテナへのアタッチ

「Remote containers」 をインストールすると、左下に「リモートウィンドウを開きます」ってのが出来てるのでクリック。

「Attach to Running Container」を選択。

任意のコードを実行されるかも知れないよと警告が出るので「Got It」を選択。

アタッチしたいコンテナを選択。今回は「project_api_1」を選択。

別のVSCodeが立ち上がりアタッチできた。でもGitが古いと言われてしまったのでDockerのイメージから作り直す。

Gitの更新

Gitの更新方法をググる。

Laravel用のDockerファイル更新。

Nuxt.js用のDockerファイル更新。Laravelと一緒。

一旦VSCodeは閉じてコンテナを作り直し。

実行コマンド

c:\project>docker-compose down

c:\project>docker-compose up -d

なんかビルドしてくれてる感が無い。

upじゃダメっぽいので、ちゃんとbuildと指定してあげる。

実行コマンド

c:\project>docker-compose build

ビルドし始めてくれたっぽい。

コンテナに入ってGitのバージョンを確認してみる。

実行コマンド

c:\project>docker-compose up -d

c:\project>docker exec -it project_api_1 bash

# git –version

バージョン上がった。

ソースの表示

さっきと同じ操作でVSCodeでコンテナにアタッチして、エクスプローラーからフォルダーを開くをクリック。

「/var/www/html」を指定してOK。

ちゃんとソースが見れた。

PHP Debugの設定

Laravelでステップ実行したいのでPHP Debugをインストールする。

拡張機能PHP Debugのインストール

まずはVSCodeで拡張機能のPHP Debugを検索してインストール。

実行とデバッグを開いて「launch.jsonファイルを作成します。」クリックして、出てきた選択肢の中からPHPを選択。

launch.jsonが作られる。特に編集する必要ないのでそのまま置いておく。

PHP.iniの編集

php.iniに次の様なコードを追記する必要があるらしい。

そもそもphp.iniってどこにあったっけ?確かphpinfo()を出力するphpファイルを作成してブラウザから開けば良かったと思うけどめんどくさい。調べたら良い方法があった。ありがとう!

参考 もういい加減覚えよう。php.iniはどこにあるのか - QiitaQiita
実行コマンド

# php -r “echo phpinfo();” | grep “php.ini”

せっかくなのでVSCodeのターミナル上で実行した。php.iniは/etcにあるらしい。

php.iniに直接書くとなるとDockerとしては扱いにくい。なんやかんや調べてみるとphp.iniに直接書かないでも/etc/php.dディレクトリにiniファイルを置けばそれを読み込んでくれるらしいので、そちらの方法で追加することにする。

xdebugのライブラリの場所がどこにあるのか分からないのでまたググる。

参考 mac PHP デバッグ 設定 xdebug - しすろぐしすろぐ

phpinfo()のextension_dirでライブラリの場所が分かるらしい。

実行コマンド

# php -r “echo phpinfo();” | grep “extension_dir”

/usr/lib64/php/modulesがライブラリの置き場所らしいのでlsしてみるとそれっぽいのがあった。

Dockerfileの編集

ということでxdebug用に.iniファイル(名前はxdebug.iniにしておく)を作り、/etc/php.dディレクトリに置くようにDockerfileを編集する。xdebug.client_hostはRemote containersを使ってコンテナ上でデバッグするので今回は127.0.0.1でいいはず。ホスト上でデバッグする場合はhost.docker.internalと指定するとホストのIPに名前解決してくれるらしい。

なので以下の様に編集したxdebug.iniをC:\project\apiに置く。

Dockerfileでxdebug.iniを/etc/php.dにコピーするように編集。

コンテナを再作成。

実行コマンド

c:\project>docker-compose down

c:\project>docker-compose build

c:\project>docker-compose up -d

コンテナを再作成したため拡張機能も削除されているのでPHP Debug入れて、launch.jsonも作り直し。

ステップ実行出来るか試すためにroutes/web.php開いてブレークポイント設定しF5でデバッグ開始。「php artisan serve –host 0.0.0.0」でサーバーを起動してブラウザでアクセスしたらちゃんと停止してくれた!

最後に

あとは他にも必要な拡張機能があれば適当にインストールして開発開始できるはず。ネットで調べた開発環境と大分違う構成になった気がするので今後困ることが出てくるかもしれないけど心配してもしょうがないのでまあいいや。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です