出前館アプリ進化論アーキテクチャと組織のリアルな変⾰の舞台裏

by 株式会社出前館

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© Demae-can Co., Ltd. ⾃⼰紹介 • 所属 • LINEヤフー株式会社京都開発室 • 株式会社出前館出向 • これまでの業務経験 • ~2021年 Web Frontend (React/Vue/BFF) • 2021年~ 出前館に参画 (React Native, Flutter) • その他 • JBA公認C級コーチライセンス 🏀 • 2児のパパ植松啓誠株式会社出前館プロダクト本部コンシューマ部アプリ開発グループ 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© Demae-can Co., Ltd. 変⾰フェーズⅠ: 各コンポーネントでの課題把握と改善各コンポーネントの課題 • オンプレミス中⼼で運⽤ • システムの⼤半がオンプレ上で稼働 • データセンターの物理限界でスケールが困難 • サービス特性に合わせたインフラ構成でない • フードデリバリーは昼⾷・⼣⾷にピーク • ピークに合わせたリソース • 運⽤の属⼈化 • 知識・オペレーションの属⼈化インフラ 23

Slide 24

Slide 24 text

Slide 25

Slide 25 text

© Demae-can Co., Ltd. 変⾰フェーズⅠ: 各コンポーネントでの課題把握と改善各コンポーネントの課題バックエンド • サポートが終了したフレームワーク • セキュリティ上の懸念 • モノリシックな構造で責務が混在 • 結合度が⾼く、多くの機能ドメインが絡み合う • 開発速度や品質に⼤きな影響 • ⼀つの巨⼤なデータベース • アーキテクチャの中⼼に巨⼤な共有データベース • 800を超えるテーブルが存在 • 単⼀障害点に 25

Slide 26

Slide 26 text

Slide 27

Slide 27 text

© Demae-can Co., Ltd. 変⾰フェーズⅠ: 各コンポーネントでの課題把握と改善各コンポーネントの課題 • Controllerの肥⼤化 • 巨⼤な1ファイルにロジックが集約 • 7000⾏以上 • 多くのDead Code • 多くのビジネスロジックがclientに点在 • アプリ・Webでコピペロジックが多数点在 • 保守性・ロジックの⼀貫性に課題 • 既存の技術に関する知識・リソース不⾜ • PHPのエンジニア不⾜ Web Frontend 27

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

© Demae-can Co., Ltd. 変⾰フェーズⅠ: 各コンポーネントでの課題把握と改善各コンポーネントの課題⽼舗ITサービスのモダナイズに取り組みはじめたLINEエンジニアたちの挑戦！出前館の改善について和⽥卓⼈さんが聞いた (2021.02.10) https://hatenanews.com/articles/2021/02/10/103000 出前館アプリ開発における体制変化に伴う取り組み React Nativeを活⽤した継続開発のためのルール作成 (2021.12.15) https://logmi.jp/brandtopics/325608 32

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

© Demae-can Co., Ltd. 変⾰フェーズⅠ: 各コンポーネントでの課題把握と改善変⾰フェーズⅠ: 各コンポーネントでの課題把握と改善 • サービスの理解とシステム全体像の理解 • それぞれのチームで仕様/設計のドキュメント化 • ナレッジの蓄積・共有 • 次の段階に向けて愚直に改善 • リファクタリング • 責務分離 • 分散しているコードの共通化 • ライブラリ、フレームワークのアップデート • 環境の移⾏ • APIのinterface変更への対応 35

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャ当初(2021年ごろ)のアプリ⽬線の超概略アーキテクチャ DB でっかいAPI Server でっかい DB API for app Cache Web REST REST 店舗・商品注⽂・決済クーポン会員情報広告 … REST • 運⽤が複雑 • コミュニケーションパス • 多段cacheなどで仕様が不明確 Web Server アプリ⽬線 • ⼊り⼝が複数 • ログの分散 • 攻撃リスク • 運⽤負荷が⾼い • DBが⾼負荷でサービス全体に影響 • 責務の混在 • 様々な場所からDB書き込みサービス⽬線 App 42

Slide 43

Slide 43 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャ現在(未来も含む)のアプリ⽬線の超概略アーキテクチャ BFF Microservices Web GraphQ L gRPC 店舗・商品注⽂・決済クーポン会員情報広告 … • ⼊り⼝を⼀つに • ログの⼀元性 • 認証認可の整合性 • 運⽤負荷軽減 • 責務を明確に • 独⽴性 • スケール • データの所在 • ビジネスロジックがBFFに集約 • (ほぼ)JSON⾊付けがかりに専念 • GraphQLでApp/Webで最適なデータ取得アプリ⽬線サービス⽬線 App 43

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャ Webのリアーキテクチャ API for app Cache Web CodeIgniter BFF Web Next.js • 技術 • PHP -> Typescript • フルサーバーレンダリング -> Single Page Application • ⽬的 • メンテナンス性の向上 • エンジニアリソースの最適化 • BFFへのビジネスロジックの移⾏ • 移⾏ • 100以上の画⾯を移⾏ • 段階的にユーザーフローごとに切り替え • ClientのビジネスロジックをBFFへ • AppもWeb側の移⾏完了後にBFF経由へ移⾏ 49

Slide 50

Slide 50 text

Slide 51

Slide 51 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャ Webのリアーキテクチャ • メンテナンス性 • BFF/Webのコードの混在 • スケーラビリティ • 台数調整などが個別にできない • BFFはアプリからも参照されている • デプロイ/ロールバック時の切り離し • 両⽅同時にリリース/ロールバック BFF Web Apollo Server Next.js BFF(API Routes) Web Next.js 51

Slide 52

Slide 52 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャ Webのリアーキテクチャ BFF Web Apollo Server Next.js • BFFの役割の変化 • As-is • Cacheの共有 • To-be • App/Webのビジネスロジックの共通化 • 各Microservicesのオーケストレーション • 後⽅互換性の吸収 • 認証・認可の集約 • 組織の変化 • BFF: Web Team => BFF Team 52

Slide 53

Slide 53 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャ Webのリアーキテクチャ API for app Cache Web BFF Web Apollo Server Next.js CodeIgniter BFF Web Next.js 53 出前館Webリプレイスで直⾯した技術的課題と解決 (2023.04.25) https://engineering.linecorp.com/ja/blog/web-replace-demaecan

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャバックエンドのリアーキテクチャ DB でっかいAPI Server でっかい DB 店舗・商品注⽂・決済クーポン会員情報広告 Ph1. データとロジックのオーナーシップの確⽴ • 800を越えるテーブルのオーナーシップ整理 • 新規マイクロサービス⽴ち上げ • データアクセス経路の切り替え Ph2. 独⾃DBへの移⾏クーポンDB • サービス間の結合を物理的に切る • スケール戦略がしやすい • APIのInterfaceさえ守れば破壊的な変更も可 58

Slide 59

Slide 59 text

Slide 60

Slide 60 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャバックエンドのリアーキテクチャ DB でっかいAPI Server でっかい DB 店舗・商品注⽂・決済クーポン会員情報広告 … 店舗・商品注⽂・決済クーポン会員情報広告 … Micro Services ⼤規模レガシーシステムのマイクロサービス化における 0→1 ではない-1→1 の新規開発 https://techblog.demaecan.co.jp/entry/20250805/1754383768 60

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

© Demae-can Co., Ltd. API for app Cache Web Web Server 変⾰フェーズⅡ: リアーキテクチャリアーキテクチャに伴うアプリ開発⽬線の変化 REST でっかいAPI Server 店舗・商品注⽂・決済クーポン会員情報広告 … App 7 0 1 0 80以上のAPI • 多くのoverfetch/underfetch • Clientで重複したビジネスロジック改修コストも⾼いしなんとかしたい 63

Slide 64

Slide 64 text

© Demae-can Co., Ltd. API for app Cache Web Web Server 変⾰フェーズⅡ: リアーキテクチャリアーキテクチャに伴うアプリ開発⽬線の変化でっかいAPI Server 店舗・商品注⽂・決済クーポン会員情報広告 … App BFF • BFFに移⾏されたAPIから徐々に移⾏ • overfetch/underfetchも少しずつ解消 • Microservice化もBFF層で吸収だ！ BFF誕⽣徐々に移⾏全てBFF経由に移管 64 GraphQL

Slide 65

Slide 65 text

© Demae-can Co., Ltd. API for app Cache Web Web Server 変⾰フェーズⅡ: リアーキテクチャリアーキテクチャに伴うアプリ開発⽬線の変化でっかいAPI Server 店舗・商品注⽂・決済クーポン会員情報広告 App BFF Microservices • 極⼒BFFで吸収 • 責務の整理でinterfaceが変わる • 負債を残さない • V2, V3… 何を移⾏して何を移⾏してないんだ …? 65 GraphQL Microservices

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Slide 68

Slide 68 text

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

© Demae-can Co., Ltd. 変⾰フェーズⅡ: リアーキテクチャ余談: アプリのリアーキテクチャ • ReactNative -> Flutter へ移⾏ Ask the Speaker or 出前館ブースでお話ししましょう！！ https://techblog.demae-can.co.jp/entry/20250826/1756184068 出前館の⼤変⾰：React NativeからFlutterへの⼤胆な移⾏戦略 73

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

Slide 77

Slide 77 text

© Demae-can Co., Ltd. 次の10年に向けて • 根幹 • ミッションの実現: テクノロジーで時間価値を⾼める • ビジョンの実現: 地域の⼈々の幸せをつなぐライフインフラ • 開発プロセス：より速く、より安定した開発 • いかにユーザーへ価値を素早く届けるか • 事業成⻑を⽌めずに回しるづけられるプロセス • ドキュメントと経緯を残し続ける • ⼀番効いた負債が「なぜこうなっているかわからない」状態 • 仕様だけではなく意思決定の経緯も残す 77