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

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

元ネタは@Kiy0takaさんの記事です。（[ぼくのかんがえたさいきょうのEC-CUBE3開発環境](http://qiita.com/kiy0taka/items/1bd6dae16c8b5c99151a)）

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

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

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

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

## 準備
Dockerfileなどは[GitHubのリポジトリ](https://github.com/ryo-endo/eccube3-dev)に置いてあるので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](https://qiita-image-store.s3.amazonaws.com/0/113212/1e8d8d16-bbb1-df94-fbed-a28760338840.png)

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

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

#### Mappingsタブ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/113212/16ba151c-1120-0c86-0ffc-e9eb330fff0b.png)

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

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

### Option設定
ファイルに変更があった場合に、自動的にコンテナと同期するように設定。
この設定をしておくと、PhpStorm以外でファイルの変更を行っても、変更検知して同期をしてくれるようになります。
![image](https://qiita-image-store.s3.amazonaws.com/0/113212/401bd463-5e59-0ecd-b697-214225fbe4fb.png)

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

Tools > Deployment > BrowseRemoteHost を選択し、HostのToolWindowsを表示する。
問題なければキャプチャのように空のリモートサーバが表示される。
![image](https://qiita-image-store.s3.amazonaws.com/0/113212/298fdaab-46ef-a6f9-b248-4b59bdf95aa2.png)

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

![image](https://qiita-image-store.s3.amazonaws.com/0/113212/2902a733-a288-6083-83eb-bedee05b0984.png)

## インストールと動作確認

転送が終わったら、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](https://qiita-image-store.s3.amazonaws.com/0/113212/3bf9377b-f9bf-0920-f8e9-999fee7a3b9b.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/113212/859afc95-2f78-ff50-60f6-9427886c429e.png)

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