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
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
20250613-SSKMvol.15
diostray
0
100
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.3k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
150
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
440
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Facilitating Awesome Meetings
lara
54
6.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
A designer walks into a library…
pauljervisheath
207
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Statistics for Hackers
jakevdp
799
220k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
KATA
mclloyd
30
14k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.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競輪を よろしくお願いします