EC-CUBE名古屋ユーザーグループ定期勉強会 Vol.47

1. EC-CUBE名古屋UG勉強会 Vol.47
EC-CUBE３系より新しい
EC-CUBE２系の開発事例紹
介
@_aromaforest 2017/10/7
大河内健太郎

2. 自己紹介
❖ 名前: 大河内健太郎(@nanasess) 年齢: 40才
❖ 出身: 愛知県西尾市一色町
❖ 在住: 宝塚市
❖ 前職: 寿司屋の板前(安城市の「ひで寿司」)
❖ 資格: 調理師・ふぐ処理師
❖ Mac OS X / Microsoft Azure / FreeBSD 使ってます
❖ EC-CUBE コミッター・公式エバンジェリスト
❖ 最近のマイブーム: 太田胃散のヨーグルト

3. はじめに
❖ 今日のお話は、大半の技術を、EC-CUBE2系、3系問わ
ず応用可能です。
❖ 信頼の実績とライトウェイトな2系、最新のフレームワ
ークを活用したければ3系という感じで、ニーズに合わ
せてお使いいただけたらと思います。

4. 今日お話しすること
※技術は日々進歩するので、いろいろ取り組んでます
※多くは https://kodawarin.shop で活用している技術です

5. インフラ・ミドルウェアなど
❖ Microsoft Azure App Service WebApps/API Apps
❖ Microsoft Azure SQL Database
❖ PHP7.1.3, Node.js 6.9, .NET Core 2.0
❖ SendGrid
❖ EC-CUBE2.13.5 + SQL Database Plugin
❖ WordPress + SQL Database = ProjectNami
Azure x EC-CUBE + WordPress + SQL Database で最強の EC CMS を構築しよう に詳しく書いてま

6. よくある質問と答え
❖ なんで AWS や Linux, MySQL じゃないの？
❖ マイクロソフトさんと一緒に EC-CUBE の Azure 対応を
進めてきた経緯と、コストパフォーマンスの良さ
(BizSpark を活用させていただいてます)
❖ なんで Node.js や .NET Core があるの？
❖ API 書いたりするのに、 PHP より開発効率が良いので。

7. よくある質問と答え
❖ なんで EC-CUBE2系なの？
❖ SQL Database は 3系で未サポート
❖ 魔改造の多くの実績。 WordPress との親和性の良さ
❖ ライトウェイト。 PHP の良さを存分に発揮できる

8. Poem
❖ 最近の PHP フレームワークは、基本的なことをしっかりおさえて、真面目にしっ
かり書こう という風潮
❖ 10年くらい前の Java みたい。 Java のように 型付けが強ければいいけど、型付け
の弱い PHP ではしんどい
❖ PHPStorm を使えば？ということだろうけど、そんなに頑張るんだったら Java で
書いても学習コスト変わらなくない？
❖ Symfony のサポート期間、 EC 店舗の立場からすると短かすぎ。
4年ごとにフルリニューアルなんてやってられないし。
❖ 2系はどうかというと、 PEAR のサポートくらいなら、規模が小さいので自力で
何とかなるし、他に置き換えも容易
こちらも参考に RHEL/CentOS 7のPHP5.4.16 は安全か？

9. バックエンド
❖ PHP(主にバックエンドのフレームワークとして使用)
❖ EC-CUBE, ProjectNami(WordPress)
❖ Composer
❖ Node.js, .NET Core
❖ API 開発に使用

10. よくある質問と答え
❖ API も PHP で書いたらいいじゃん
❖ .NET Core や Node.js の方が圧倒的にパフォーマンス良
く、開発効率も良い
❖ 認証とかどうしてるの？
❖ EC-CUBEの認証/セッション管理を JSON Web
Token(JWT) を使用したものに変更し、 API 側でも EC-
CUBE と同じように認証できるようにした。
JWT認証の参考: https://jwt.io/introduction/

11. フロントエンド
❖ TypeScript
❖ WebPack3, Babel, Karma, mocha, sinon, chai
❖ React
❖ 簡易的な Server Side Rendering を実装
❖ .NET Core の API 経由で EC-CUBE の DB と直接通信
❖ EC-CUBE のSmarty/ WordPress の生PHP

12. よくある質問と答え
❖ なんで ES6 じゃないの？
❖ 数千行に肥大した JavaScript を保守するのに型無しは辛
い
❖ なんで React なの？ Angular や Vue.js じゃだめなの？
❖ WordPress の事例がたくさんあった。部分的に導入した
かった。導入した時期は Vue.js と TypeScript の組み合
わせが難しかった。

13. 開発環境
❖ Docker, Docker Compose
❖ “one process per container” (1つの関心事を1つのコンテナで)
❖ SQL Server も .NET Core も Linux のコンテナで普通に動きます
❖ Emacs, OmniSharp-Roslyn
❖ Visual Studio for Win/Mac ←デバッグ時のみ
❖ Circle CI
❖ Bitbucket

14. 開発環境
❖ Docker コンテナは、 db, nginx, webpack, php, node,
.NET Core, mail に分割している
❖ コマンド一発で、いつでも作ることができる
❖ 結合度が低いので、テストしやすく不具合も発生しにく
い

15. テスティング環境
❖ Karma, mocha, sinon, chai
❖ React コンポーネントのテスト
❖ dotnet test
❖ SQL Server が絡むので、 専用の Docker コンテナで
❖ PHP のテストは、これから….

16. テスティング環境
❖ .NET Core のテストも Docker コンテナでテストしやす
くなった
❖ 以前は Visual Studio でテストを動かしていた
❖ Windows ベースな開発環境なら、 Application Insights
も活用できる

17. 本番にデプロイ
❖ Bitbucket に git push し、 master にマージされると、自
動的にステージング環境へデプロイされる
❖ 「スワップ」という機能で、ステージング環境と本番環
境を入れ替える
❖ 問題があれば、すぐ戻せる

18. 今後の課題
❖ 本番環境も Docker コンテナにしたい
❖ SQL Server on Linux の RC1 から sqlpackage が削除された問題
の解消
❖ チャットツールと連携
❖ PHP もちゃんとテストしたい
❖ CircleCI の活用
❖ SendGrid API や Facebook API, Cognitive Serviceの活用

19. まとめ
❖ EC-CUBE2系でも、 Docker やマイクロサービスなど、
最新のテクノロジーを活用できる。高い開発効率も実現
できる。
❖ うまく設計しないと、かえってカオスになる。。。
❖ それは3系でも一緒
❖ フレームワークのサポート期間に縛られないことは、長
期的にメンテしていく上で重要

20. 質疑応答

21. ご静聴ありがとうございまし
た！