ぼくのかんがえたさいきょうのEC-CUBE3開発環境(Windows向け) #Docker

ぼくのかんがえたさいきょうのEC-CUBE3開発環境(Windows向け)とは

元ネタは@Kiy0takaさんの記事です。（ぼくのかんがえたさいきょうのEC-CUBE3開発環境）

上記の記事をWindowsにそのまま当てはめることができなかったので、Windowsでも快適に開発できる環境を考えてみました。だいぶ納得の行く環境ができあがったので記事にまとめます。

※EC-CUBEを題材にしていますが、他のWebアプリのローカル開発環境を構築するときにも参考になるのではと。

やりたいこと

Windowsでサクサク開発
EC-CUBEはコンテナ上で動かす
PhpStormの自動デプロイ機能(SFTP)でコードを転送・同期する
コンテナやdocker-machineを再起動しても、EC-CUBEのコードやDBは残るようにする
PhpStormでブレークポイントを設定してコンテナで動いているEC-CUBEのデバッグを出来るようにする

コンテナにWindowsのフォルダをマウントすると、遅くて仕事にならないため、PhpStormの自動デプロイ機能を利用してSFTPで転送・同期をすることにしました。

準備

DockerfileなどはGitHubのリポジトリに置いてあるのでcloneして、コンテナを起動します。
php, pgsql, mailcatcher, sftp のコンテナが起動します。

git clone https://github.com/ryo-endo/eccube3-dev.git
cd eccube3-dev
docker-compose up -d

EC-CUBEのコードもcloneしておきます。

git clone https://github.com/EC-CUBE/ec-cube.git

PhpStormからSFTP接続できることを確認

cloneしたEC-CUBEのフォルダをPhpStormで開きます。
PhpStormの設定画面から、デプロイ先のサーバとしてsftpコンテナを指定する設定をしていきます。

Connectionタブ

SFTP host: dockerコンテナのIPアドレス
Port: 2222
Root path: /upload
User name: sftp
Password: pass

「Test SFTP connection...」ボタンを押して接続確認できればOK。

Mappingsタブ

ここを設定しておかないとうまいことアップロードされません。
環境に合わせてカスタマイズ必要ですが、この記事の手順通りであれば以下の設定で大丈夫だと思います。

Deployment path on server: /
Web path on server: /

Option設定

ファイルに変更があった場合に、自動的にコンテナと同期するように設定。
この設定をしておくと、PhpStorm以外でファイルの変更を行っても、変更検知して同期をしてくれるようになります。

Windowsからコンテナへのファイル転送

Tools > Deployment > BrowseRemoteHost を選択し、HostのToolWindowsを表示する。
問題なければキャプチャのように空のリモートサーバが表示される。

Projectツリーのルートで右クリックし、Deployment > Upload to docker を選択。
ファイルの転送が始まる。数分間かかる。

インストールと動作確認

転送が終わったら、EC-CUBEのインストール。
開発用途なのでスクリプトで自動実行します。

 docker-compose exec app bash -c "chown -R www-data: . && php eccube_install.php pgsql"

http://192.168.99.100:8080/ec-cube/html/
にアクセスしてサイトが表示されればOKです。

また、自動的にコンテナと同期するように設定したので、PhpStorm内でファイルに変更を加えると、自動的にコンテナにUploadされます。手元の環境だと、ページの遷移が1秒以内で完了しているので、ストレスなく開発できそうです。

PhpStormでデバッグをする

Dockerfileでxdebugを有効化してあるので、PhpStorm側の設定を行えば、リモートデバッグできるようになります。

PhpStormの設定はこんな感じです。
Dockerfileやdocker-compose.ymlの記載内容に合わせています。

少しでも動作を軽くするために、xdebugのxdebug.remote_autostartはOffにしてあります。
そのためこのページからリモートデバッグの有効/無効を切り替えるブックマークレットを保存して、必要なときにだけONするようにします。
https://www.jetbrains.com/phpstorm/marklets/

ブックマークレットからリモートデバッグをONして、ブレークポイントに止まれば成功です。

※リモートデバッグ不要なら、Dockerfileからxdebugをインストールしている部分をコメントアウトすれば、よりサクサク動作するようになる。

データの永続化について

docker-composer.ymlのvolumeで、boot2docker内の永続化領域にvolumeを作成しています。
SFTPでアップロードしたファイルも、DBのデータも、そのvolumeに保存するため、コンテナを再起動してもそのまま残ります。

おわりに

こんな感じで、割りと快適なローカル開発環境になりました。

リモートデバッグを有効化した状態で、ページ遷移が1秒程度なら十分満足です。
PhpStormの自動デプロイ機能もちゃんと動作してくれています。

Windowsのローカル開発環境で、ページ遷移に5秒とか10秒とか掛かって困っている人たちに届くといいなぁ。