8年もののサービスをフルリプレースした話

Transcript

1. © DMM.com 8年もののサービスを フルリプレースした話 セールスソリューション本部 レース事業部 石倉 和真 2021/12/08 Think! FrontEnd #04
2. © DMM.com 石倉和真 Ishikura Kazumasa 2 自己紹介 所属 • レース事業部（公営競技サービス作ってます） • 2020年 新卒入社 領域 • フロントエンド（メイン） • バックエンド（サブ） 趣味 • 音楽（作編曲・ギター・鑑賞） • ゲーム（APEX）
3. © DMM.com 3 レース事業部が提供するサービス
4. © DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング 3.2. GraphQL 4. フルリプレースしてみて 4 目次
5. © DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング 3.2. GraphQL 4. フルリプレースしてみて 5 目次
6. © DMM.com 6 リプレース背景 1. 負債脱却 およそ８年間技術的な刷新なしでレガシー要素万歳 完全に作り直して脱却 2. 保守性向上 半分外注 → 完全内製化 = 開発速度向上 モダン技術採用で保守難易度の低下、人を採りやすくする 3. 競争力の爆発的向上 競輪業界売上が年々向上、新規参入相次ぐ 古いUI/UXのままでは勝ち目が無い → UI/UX、機能を大刷新し、競争力を爆発
7. © DMM.com 7 リプレースに向けて • 経験を活かす DMM百万長者の開発で得た知見を最大限活用 その上でさらなる技術向上を目指す • チャレンジ精神 新たな技術への挑戦 ナレッジ蓄積・さらなる改善に繋がるのでは
8. © DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング 3.2. GraphQL 4. フルリプレースしてみて 8 目次
9. © DMM.com 9 技術選定・アーキテクチャ（一部） フロントエンド 言語 Typescript フレームワーク React（SPA）※ 厳密には「ライブラリ」 インフラ AWS S3 + CloudFront バックエンド 言語 Golang フレームワーク gqlgen, Echo インフラ AWS Fargate API GraphQL（一部REST）
10. © DMM.com 技術選定比較 10 百万長者 競輪 フロントエンド 言語 JavaScript Typescript FW Nuxt.js（Vue + SSR） React（SPA） インフラ Fargate S3 + CloudFront S3 + CloudFront API REST GraphQL
11. © DMM.com 11 技術選定する上で • SSRはしない 過去の経験から（セキュリティ管理やスパイクアクセス時に捌き切れず落ちるetc...） 運用コスト増大を懸念 SEO・OGP問題はダイナミック・レンダリングで解決できそう • APIにGraphQL採用 未知への挑戦 弊社での採用事例が少ないため、ナレッジ蓄積の意も込めて
12. © DMM.com • SSRはしない 過去の経験から（セキュリティ管理やスパイクアクセス時に捌き切れず落ちるetc...） 運用コスト増大を懸念 SEO・OGP問題はダイナミック・レンダリングで解決できそう • APIにGraphQL採用 未知への挑戦 弊社での採用事例が少ないため、ナレッジ蓄積の意も込めて 12 技術選定比較
13. © DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング 3.2. GraphQL 4. フルリプレースしてみて 13 目次
14. © DMM.com ダイナミック・レンダリング 14
15. © DMM.com 15 ダイナミック・レンダリングとは クローラのリクエストのみ事前にレンダリングしたHTMLを返却し、 ユーザのリクエストはレンダラを経由せず、通常通りレスポンスするテクニック 引用: ダイナミック レンダリングを実装する | Google 検索デベロッパー ガイド | Google Developers https://developers.google.com/search/docs/guides/dynamic-rendering?hl=ja
16. © DMM.com 16 ダイナミック・レンダリング実装 • レンダラ部 Lambda@Edge上でヘッドレスChromeを操作する CloudFrontイベントにフックしてUA判定やレンダリングを行う • ツール chrome-aws-lambda（Lambda上でPuppeteerを操作できるライブラリ） Rendertronはサーバを用意する必要があったりと面倒だった（GCPなら簡単みたい？）
17. © DMM.com 17 ダイナミック・レンダリング実装 引用: Lambda 関数をトリガーできる CloudFront イベント https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-cloudfront-trigger-events.html
18. © DMM.com 18 図解 UAからクローラかその他か判定
19. © DMM.com 19 図解 ※リクエストURIをindex.htmlに上書きした上でリターン 通常ユーザの場合 ※URIを上書く理由は、S3に静的ファイルをリクエストする際に存在しないファイルを参照してしまうため
20. © DMM.com 20 図解 ヘッドレスChromeでリクエストされたページに アクセスし、取得したHTMLを返却する クローラの場合
21. © DMM.com 21 感想 よかった点 • SSRせずともOGP対応できた • リダイレクト処理なども簡単に仕込める 困った点 • レスポンスタイムが遅い（およそ8,9秒） レンダラ部のLambdaメモリを512MB -> 2048MB で3 秒程度に収まった
22. © DMM.com GraphQL 22
23. © DMM.com 23 GraphQLとは • Facebookが提唱するWebAPI規格 • 厳格なスキーマ ◦ スキーマ言語でスキーマ定義 ◦ スキーマ定義にフロント・バック従う ◦ 型付き • クエリ言語による操作 ◦ エンドポイントは1つ ◦ クエリで情報の取得/更新
24. © DMM.com 1. GraphQLとは 2. ツールとその活用 3. 感想 24 目次
25. © DMM.com 25 代表的なライブラリ • Apollo • React, Vue, Angular などに対応 • 柔軟性を重視した設計で且つ入門ハードルが比較的低め • 独自のキャッシュ機構と状態管理機構を備えている • Relay • Facebook製。React,React Nativeなどに対応 • 堅牢性やパフォーマンスを重視した設計でかっちりとしたルールベース
26. © DMM.com ツールとその活用 GraphQL Code Generater でコード自動生成を実現 サーバ側のスキーマ定義を参照して以下を生成 • スキーマの型定義 • Query/Mutationのカスタムフック 26
27. © DMM.com ツールとその活用 27 型定義 カスタムフック 自動生成 クエリ定義
28. © DMM.com 1. GraphQLとは 2. ツールとその活用 3. 感想 28 目次
29. © DMM.com 29 感想 よかった点 • コード自動生成により手間の大幅削減 • インターフェースが固まった状態で開発に臨めるため手戻りがほとんどない • 実装とAPIドキュメントとで乖離が生まれない 困った点（GraphQLに対してではないけど ...） • スキーマが変わるたびにローカル環境が壊れる＆テストが落ちる ◦ ブランチやリリースタグ指定でスキーマ定義参照することで解決 • ApolloClientでどこまでのデータを管理するか ◦ ReactiveVariavlesでローカルステートもApolloで管理がよさそう
30. © DMM.com 30 総評 スキーマ駆動開発 最高👊
31. © DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング 3.2. GraphQL 4. フルリプレースしてみて 31 目次
32. © DMM.com 32 フルリプレースしてみて • 新卒1年目からフルリプレースを経験できた • わかりやすい！使いやすい！早い！モダンなサイトへと進化を遂げた • データ分析基盤の構築、Datadogの活用により施策考案への材料も増えた
33. © DMM.com 33 生まれ変わったDMM競輪を よろしくお願いします󰢛