Edited at

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


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

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

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

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


やりたいこと


  1. Windowsでサクサク開発

  2. EC-CUBEはコンテナ上で動かす

  3. PhpStormの自動デプロイ機能(SFTP)でコードを転送・同期する

  4. コンテナやdocker-machineを再起動しても、EC-CUBEのコードやDBは残るようにする

  5. 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タブ

image


  • SFTP host: dockerコンテナのIPアドレス

  • Port: 2222

  • Root path: /upload

  • User name: sftp

  • Password: pass

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


Mappingsタブ

image.png

ここを設定しておかないとうまいことアップロードされません。

環境に合わせてカスタマイズ必要ですが、この記事の手順通りであれば以下の設定で大丈夫だと思います。


  • Deployment path on server: /

  • Web path on server: /


Option設定

ファイルに変更があった場合に、自動的にコンテナと同期するように設定。

この設定をしておくと、PhpStorm以外でファイルの変更を行っても、変更検知して同期をしてくれるようになります。

image


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

Tools > Deployment > BrowseRemoteHost を選択し、HostのToolWindowsを表示する。

問題なければキャプチャのように空のリモートサーバが表示される。

image

Projectツリーのルートで右クリックし、Deployment > Upload to docker を選択。

ファイルの転送が始まる。数分間かかる。

image


インストールと動作確認

転送が終わったら、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の記載内容に合わせています。

image

image

少しでも動作を軽くするために、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秒とか掛かって困っている人たちに届くといいなぁ。