ぼくのかんがえたさいきょうの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秒とか掛かって困っている人たちに届くといいなぁ。