Chatdealerの高速開発を支えるLaravel

Rakus Meetup Osaka #1 の発表資料です。
https://rakus.connpass.com/event/106050/

Transcript

1. の高速開発を支える Laravel 株式会社ラクス 吉元和仁 ラクスミートアップ大阪
2. 自己紹介 • 吉元 和仁 • 株式会社ラクス クラウド事業本部 開発統括部 第二開発部 • 経歴： – 2011 年 ラクス入社 – 2011 年 メールディーラー 開発 – 2017 年 チャットディーラー 開発 – 2018 年 配配メール 開発 1
3. • ノンフレームワークサービスの課題 • チャットディーラーとは • なぜ Laravel を選択したか？ • Laravel で良かったこと • Laravel で困ったこと • まとめ 今日話すこと 2
4. ノンフレームワークサービスの課題 3
5. 4 https://www.maildealer.jp/products/ メールディーラーとは
6. • 2001 年にサービス提供開始 • 4,000 社以上の導入実績 • メール共有・管理システム市場で 9 年連続 シェア No.1 5 メールディーラーとは
7. • 2001 年にサービス提供開始 • 4,000 社以上の導入実績 • メール共有・管理システム市場で 9 年連続 シェア No.1 • PHP でノンフレームワークで開発 6 メールディーラーとは
8. • 15年以上改修され続けてきたコード • 手続き型モジュール • ビューとロジックが分離されていない 7 ノンフレームワークサービスの課題
9. • グローバル変数が数千個以上 • 何を返すか分からない共通関数 – 値？配列？HTML？Exit？グローバル上書き？ Etc.. 可読性・保守性が著しく低下 8 ノンフレームワークサービスの課題
10. • 課題への取り組み – テスト自動化（PHPUnit, Jenkins, Selenium) – 静的コード解析ツールで品質可視化 – PHPStorm導入 – 地道なリファクタリング 脱レガシーの道のりは険しい 9 ノンフレームワークサービスの課題
11. 10 そんな課題感をもつ開発チームが 新サービス立ち上げにチャレンジ！
12. チャットディーラーとは 11
13. サービス概要 • Web ページに専用スクリプトを埋め込んで 利用する Web チャットシステム（SaaS） • 本文 12 https://www.chatdealer.jp/products/
14. サービス概要 • Web ページに専用スクリプトを埋め込んで 利用する Web チャットシステム（SaaS） • 本文 13 https://www.chatdealer.jp/products/
15. 技術スタック • 言語、フレームワーク – PHP、Laravel – Node.js、Express、Socket.IO • 開発環境 – PhpStorm、Jenkins、Redmine、GitLab、 Mattermost • インフラ – 仮想基盤(オンプレ)、nginx、Apache、 PostgreSQL、Redis 14
16. 開発チーム構成 • プロジェクトマネージャー • エンジニア – バックエンド (PHP)：３名 – フロントエンド (Node.js)：３名 15
17. 開発スケジュール 16 2月 3月 4月 5月 6月 7月 要件定義 2017年 開発基盤整備 設計 実装・単体テスト システム テスト β版ﾌｨｰﾄﾞ ﾊﾞｯｸ改修 β版リリース 本番リリース
18. なぜ Laravel を選択したか？ 17
19. 新サービスの立ち上げに際しての課題 • 短納期（実装２ヶ月） • レガシーからの脱却 18
20. フレームワーク選定条件 • 長期サポート • 機能性 19
21. 選定条件：長期サポート • シェア率が高い、人気がある • 活発なコミュニティ • LTS (Long-Term Support) を宣言している 20 青色が Laravel https://trends.google.co.jp/trends/explore?date=today%205- y&geo=JP&q=Laravel,CakePHP,Symphony,CodeIgniter,FuelPHP
22. 選定条件：機能性 • Webの基本機能がすぐに使える状態 – ルーティング – テンプレートエンジン – バリデーター – マイグレーション – ページネーション Etc… 21
23. 選定条件：機能性 • ミドルウェアやライブラリとの連携 – ミドルウェア – クライアントサイドのライブラリ – ユニットテストライブラリ 22
24. フレームワーク選定のまとめ • 長期サポート – LTS 対応 – 一番人気で、今なお人気上昇中 – コミュニティも活発 • 機能性 – フルスタックフレームワーク Laravel を採用することに決定 23
25. Laravel で良かったこと 24
26. Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 25
27. Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 26
28. オールインワンでスピード開発に向いていた • 準備コストが削減できたので、ロケットス タートを決めることができた – 標準機能が充実 ルーティング、Middleware、DI、バリデーション、 テンプレートエンジン (Blade)、バッチ処理 (Command)、 マイグレーション、デバッグ、クエリビルダ、ページネーション、 セッション – フロントエンド用ライブラリ標準バンドル Bootstrap、jQuery、Vue.js 27
29. Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 28
30. 簡単設定でどんなものにも繋がる • チャットディーラーで利用しているミドル ウェアの一例 – PostgreSQL – Redis – Postfix いずれも、接続のための仕組みは準備されており、 簡単設定で繋がった 29
31. Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 30
32. 標準ライブラリが使いやすい • ルーティング – URL とコントローラの紐づけが直観的に書けて わかりやすかった 31
33. 標準ライブラリが使いやすい • Middleware – 事前・事後処理を追加したい ルーティング設定 をgroupメソッドで囲うだけ 32
34. 標準ライブラリが使いやすい • DI – メソッドの引数に、クラス名をタイプヒントす るだけ 33
35. 標準ライブラリが使いやすい • バリデーション – Request クラスに、バリデーションを追加する だけ 34
36. • バリデーション – バラエティ豊富なバリデーションルール 標準ライブラリが使いやすい 35 https://readouble.com/laravel/5.5/ja/validation.html
37. 標準ライブラリが使いやすい 36 • テンプレートエンジン（Blade） – ノンフレームワークサービスの場合
38. • テンプレートエンジン（Blade） – Laravel の場合 標準ライブラリが使いやすい 画面ごとに切替えたいコンテンツを @yield ディレクティブで指定する 37 @section ディレクティブ内に 挿入するコンテンツを記述する
39. • バッチ処理（Command） – ノンフレームワークサービスの場合 標準ライブラリが使いやすい バージョンアップを重ねていく内に cron レコードが増えていく 38
40. • バッチ処理（Command） – Laravel の場合 • cron は 1 レコードのみ • 実行スケジュールを PHP で記述できる 標準ライブラリが使いやすい 39
41. • マイグレーション – ノンフレームワークサービスの場合 – Laravel の場合 アプリケーションのバージョンより、 新しいバージョンをファイル名に含 むパッチファイルを実行 コマンドを実行するだけで、マイグ レーションファイルの中から未実行 のファイルのみを自動実行 ロールバックも可能 40 標準ライブラリが使いやすい
42. 標準ライブラリが使いやすい エラーメッセージ スーパーグローバル、 環境情報など スタックトレース エラー発生箇所 41 • デバッグ
43. Laravel で良かったこと • オールインワンでスピード開発に向いていた • 簡単設定でどんなものにも繋がる • 標準ライブラリが使いやすい • ドキュメントが充実していた 42
44. ドキュメントが充実していた • 必要な情報が公式ドキュメントとして準備さ れていた 43 http://laravel.jp/
45. ドキュメントが充実していた • 公式ドキュメントが日本語化されていた 44 https://readouble.com/laravel/5.5/ja/
46. Laravel で困ったこと 45
47. Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 46
48. Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 47
49. Vue.js は思ったより難しかった 48 • Vue.jsとは – クライアントJavaScript フレームワーク – Laravel にバンドルされている
50. Vue.js は思ったより難しかった 49 • Vue.js 導入を検討 – チームメンバーはみな jQuery に慣れ親しんで いる – Laravel との相性は良いはず。 – 「学習コストが低い」という前評判 – 公式のガイドを見てもそんな印象 – 確かに簡単そうだ（と思ってしまった）
51. Vue.js は思ったより難しかった • そして導入を決断！ 50 クライアントサイドは すべてVue.jsで実装してね。 学習コストも低いし。
52. Vue.js は思ったより難しかった • 導入した結果 51 JSライブラリの入力値が取れないんだけど。 jQuery なら１行で書けるのに！ XSS発生しました！ jQuery じゃないので、間に合いません。 jQuery 使っていいですか？
53. Vue.js は思ったより難しかった 52 • 「学習コストが低い」とは言え、ちゃんと勉 強しないとダメだった • jQuery 脳からのパラダイムシフトが必要。 • 他のライブラリと併用するにはノウハウが必 要。（jQuery、Bootstrap、他）
54. Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 53
55. Laravel で困ったこと • Vue.js は思ったより難しかった • Blade (SSR) + Vue.js での脆弱性 54
56. Blade (SSR) + Vue.js での脆弱性 • ある日の後輩との会話 55 Blade＋Vue.jsでXSSが簡 単に発生させれますよ！ 忙しい時期に、重大バグを 見つけてくれてありがとう。
57. • SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理 ブラウザでの処理 Blade (SSR) + Vue.js での脆弱性 <div id="app"> {{ $name }} </div> sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}” <div id="app"> {{ alert(&apos;XSS&apos;) }} </div> <div id="app"> {{ alert(‘XSS’) }} </div> Vue.js が処理 <div id="app"> </div> 56 {{ … }} の中の スクリプトが実行 される！ 処理済みのHTMLデータ レスポンス送信 ブラウザが読込
58. • SSR と Vue.js の組み合わせで起こる XSS サーバーでの処理 ブラウザでの処理 Blade (SSR) + Vue.js での脆弱性 <div id="app"> {{ $name }} </div> sample.blade.php Blade で処理 $name = “{{ alert(‘XSS') }}” <div id="app"> {{ alert(&apos;XSS&apos;) }} </div> <div id="app"> {{ alert(‘XSS’) }} </div> Vue.js が処理 <div id="app"> </div> 57 {{ … }} の中の スクリプトが実行 される！ 処理済みのHTMLデータ レスポンス送信 ブラウザが読込
59. • SSR でユーザー入力値を Vue.js 管轄の領域 に埋め込むだけで、簡単にXSSを実装できて しまう • 開発チームでは “mustache injection” と呼 んでいる Blade (SSR) + Vue.js での脆弱性 58
60. Blade (SSR) + Vue.js での脆弱性 • “mustache injection” 対策 – Middleware で、すべてのリクエストパラメータ をエスケープ – “{{“ や “}}” の文字間に半角空白を挿入する – 入力値が変わってしまうが、やむなし。。 59
61. まとめ 60
62. まとめ • フレームワークがスピード開発に役立った – ミドルウェアとの連携 – MVCの考えに沿ったソース配置 – ビジネスロジックに集中できた！ • とくに Laravel でよかったこと – 豊富な機能 – 日本語公式ドキュメント 61
63. まとめ • Vue.js の注意点 – SSRとの連携 – 仮想DOM と リアルDOM の連携 – アーキテクチャ・パターンの理解 – プロダクトで使うにはコンポーネント化が必須 – jQuery 熟練者への配慮 62
64. まとめ • フレームワーク経験がなくても、新サービス が開発できる。Laravel があれば。 63 おわり