Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
8年もののサービスをフルリプレースした話
Search
Kazu
December 08, 2021
Programming
0
1.7k
8年もののサービスをフルリプレースした話
Kazu
December 08, 2021
Tweet
Share
More Decks by Kazu
See All by Kazu
サーバーレスを体感できるアプリを作った話.pdf
kazu1496
0
130
Other Decks in Programming
See All in Programming
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
AIともっと楽するE2Eテスト
myohei
7
2.9k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
260
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
640
What's new in AppKit on macOS 26
1024jp
0
130
VS Code Update for GitHub Copilot
74th
2
670
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
190
PicoRuby on Rails
makicamel
2
140
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Invisible Side of Design
smashingmag
301
51k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
320
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Thoughts on Productivity
jonyablonski
69
4.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
How GitHub (no longer) Works
holman
314
140k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Transcript
© DMM.com 8年もののサービスを フルリプレースした話 セールスソリューション本部 レース事業部 石倉 和真 2021/12/08 Think!
FrontEnd #04
© DMM.com 石倉和真 Ishikura Kazumasa 2 自己紹介 所属 • レース事業部(公営競技サービス作ってます)
• 2020年 新卒入社 領域 • フロントエンド(メイン) • バックエンド(サブ) 趣味 • 音楽(作編曲・ギター・鑑賞) • ゲーム(APEX)
© DMM.com 3 レース事業部が提供するサービス
© DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング
3.2. GraphQL 4. フルリプレースしてみて 4 目次
© DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング
3.2. GraphQL 4. フルリプレースしてみて 5 目次
© DMM.com 6 リプレース背景 1. 負債脱却 およそ8年間技術的な刷新なしでレガシー要素万歳 完全に作り直して脱却 2. 保守性向上
半分外注 → 完全内製化 = 開発速度向上 モダン技術採用で保守難易度の低下、人を採りやすくする 3. 競争力の爆発的向上 競輪業界売上が年々向上、新規参入相次ぐ 古いUI/UXのままでは勝ち目が無い → UI/UX、機能を大刷新し、競争力を爆発
© DMM.com 7 リプレースに向けて • 経験を活かす DMM百万長者の開発で得た知見を最大限活用 その上でさらなる技術向上を目指す • チャレンジ精神
新たな技術への挑戦 ナレッジ蓄積・さらなる改善に繋がるのでは
© DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング
3.2. GraphQL 4. フルリプレースしてみて 8 目次
© DMM.com 9 技術選定・アーキテクチャ(一部) フロントエンド 言語 Typescript フレームワーク React(SPA)※ 厳密には「ライブラリ」
インフラ AWS S3 + CloudFront バックエンド 言語 Golang フレームワーク gqlgen, Echo インフラ AWS Fargate API GraphQL(一部REST)
© DMM.com 技術選定比較 10 百万長者 競輪 フロントエンド 言語 JavaScript Typescript
FW Nuxt.js(Vue + SSR) React(SPA) インフラ Fargate S3 + CloudFront S3 + CloudFront API REST GraphQL
© DMM.com 11 技術選定する上で • SSRはしない 過去の経験から(セキュリティ管理やスパイクアクセス時に捌き切れず落ちるetc...) 運用コスト増大を懸念 SEO・OGP問題はダイナミック・レンダリングで解決できそう •
APIにGraphQL採用 未知への挑戦 弊社での採用事例が少ないため、ナレッジ蓄積の意も込めて
© DMM.com • SSRはしない 過去の経験から(セキュリティ管理やスパイクアクセス時に捌き切れず落ちるetc...) 運用コスト増大を懸念 SEO・OGP問題はダイナミック・レンダリングで解決できそう • APIにGraphQL採用 未知への挑戦
弊社での採用事例が少ないため、ナレッジ蓄積の意も込めて 12 技術選定比較
© DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング
3.2. GraphQL 4. フルリプレースしてみて 13 目次
© DMM.com ダイナミック・レンダリング 14
© DMM.com 15 ダイナミック・レンダリングとは クローラのリクエストのみ事前にレンダリングしたHTMLを返却し、 ユーザのリクエストはレンダラを経由せず、通常通りレスポンスするテクニック 引用: ダイナミック レンダリングを実装する |
Google 検索デベロッパー ガイド | Google Developers https://developers.google.com/search/docs/guides/dynamic-rendering?hl=ja
© DMM.com 16 ダイナミック・レンダリング実装 • レンダラ部 Lambda@Edge上でヘッドレスChromeを操作する CloudFrontイベントにフックしてUA判定やレンダリングを行う • ツール
chrome-aws-lambda(Lambda上でPuppeteerを操作できるライブラリ) Rendertronはサーバを用意する必要があったりと面倒だった(GCPなら簡単みたい?)
© DMM.com 17 ダイナミック・レンダリング実装 引用: Lambda 関数をトリガーできる CloudFront イベント https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-cloudfront-trigger-events.html
© DMM.com 18 図解 UAからクローラかその他か判定
© DMM.com 19 図解 ※リクエストURIをindex.htmlに上書きした上でリターン 通常ユーザの場合 ※URIを上書く理由は、S3に静的ファイルをリクエストする際に存在しないファイルを参照してしまうため
© DMM.com 20 図解 ヘッドレスChromeでリクエストされたページに アクセスし、取得したHTMLを返却する クローラの場合
© DMM.com 21 感想 よかった点 • SSRせずともOGP対応できた • リダイレクト処理なども簡単に仕込める 困った点
• レスポンスタイムが遅い(およそ8,9秒) レンダラ部のLambdaメモリを512MB -> 2048MB で3 秒程度に収まった
© DMM.com GraphQL 22
© DMM.com 23 GraphQLとは • Facebookが提唱するWebAPI規格 • 厳格なスキーマ ◦ スキーマ言語でスキーマ定義
◦ スキーマ定義にフロント・バック従う ◦ 型付き • クエリ言語による操作 ◦ エンドポイントは1つ ◦ クエリで情報の取得/更新
© DMM.com 1. GraphQLとは 2. ツールとその活用 3. 感想 24 目次
© DMM.com 25 代表的なライブラリ • Apollo • React, Vue, Angular
などに対応 • 柔軟性を重視した設計で且つ入門ハードルが比較的低め • 独自のキャッシュ機構と状態管理機構を備えている • Relay • Facebook製。React,React Nativeなどに対応 • 堅牢性やパフォーマンスを重視した設計でかっちりとしたルールベース
© DMM.com ツールとその活用 GraphQL Code Generater でコード自動生成を実現 サーバ側のスキーマ定義を参照して以下を生成 • スキーマの型定義
• Query/Mutationのカスタムフック 26
© DMM.com ツールとその活用 27 型定義 カスタムフック 自動生成 クエリ定義
© DMM.com 1. GraphQLとは 2. ツールとその活用 3. 感想 28 目次
© DMM.com 29 感想 よかった点 • コード自動生成により手間の大幅削減 • インターフェースが固まった状態で開発に臨めるため手戻りがほとんどない •
実装とAPIドキュメントとで乖離が生まれない 困った点(GraphQLに対してではないけど ...) • スキーマが変わるたびにローカル環境が壊れる&テストが落ちる ◦ ブランチやリリースタグ指定でスキーマ定義参照することで解決 • ApolloClientでどこまでのデータを管理するか ◦ ReactiveVariavlesでローカルステートもApolloで管理がよさそう
© DMM.com 30 総評 スキーマ駆動開発 最高👊
© DMM.com 1. リプレース背景 2. 技術選定・アーキテクチャ 3. 採用技術についてのお話 3.1. ダイナミック・レンダリング
3.2. GraphQL 4. フルリプレースしてみて 31 目次
© DMM.com 32 フルリプレースしてみて • 新卒1年目からフルリプレースを経験できた • わかりやすい!使いやすい!早い!モダンなサイトへと進化を遂げた • データ分析基盤の構築、Datadogの活用により施策考案への材料も増えた
© DMM.com 33 生まれ変わったDMM競輪を よろしくお願いします