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
DMM百万長者のフロントエンド クラウドアーキテクチャ
Search
kamatte
June 25, 2020
Programming
2
2.2k
DMM百万長者のフロントエンド クラウドアーキテクチャ
Think! Frontend #01 で発表したスライドです。
https://dmm.connpass.com/event/177895/
kamatte
June 25, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
130
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
210
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
940
現代のVueとTypeScript - 型安全の活用術
minako__ph
4
3.2k
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
110
LangChainの現在とv0.3にむけて
os1ma
4
790
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
140
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
120
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
930
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
2
310
暴走のウホーレン 〜想いってのはvimrcにしないと伝わらないんだぜ〜 / iosdc_japan_2024
uhooi
1
250
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
What's in a price? How to price your products and services
michaelherold
242
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
A Tale of Four Properties
chriscoyier
155
22k
In The Pink: A Labor of Love
frogandcode
139
22k
Designing with Data
zakiwarfel
98
5k
Being A Developer After 40
akosma
83
580k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
Testing 201, or: Great Expectations
jmmastey
36
7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Transcript
© DMM.com DMM百万長者 の フロントエンド クラウドアーキテクチャ そしてその次へ... 合同会社DMM.com セールスソリューション本部 アミューズメント事業部
公営競技グループ エンジニアチームリーダー 兼 データマーケティング室 室長 上井 慎之介 2020/06/25 Think! Frontend #01
© DMM.com 2 自己紹介 上井 慎之介 Shinnosuke Uwai 好きなお酒: ストロングゼロ
苦手なお酒: ほろよい 2017年 新卒入社 バックエンド、フロント、クラウドやる男 21世紀のWebシンデレラ 上井慎之介のすべて
© DMM.com 3 DMM inside • DMM百万長者を支える技術 https://inside.dmm.com/entry/2020/03/02/100man-introduction • Nuxt.js
v2とGAE/SE Node.jsで SPA×SSR×PWA×サーバーレスを実現する https://inside.dmm.com/entry/2018/11/06/nuxt2-pwa-gae-se • Nuxt.jsとFirebaseで SPA×SSR×PWA×サーバーレスを実現する https://inside.dmm.com/entry/2018/04/10/nuxt-firebase Nuxt.jsのこととか
© DMM.com 4
© DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ
4. ㊙ そしてその次へ... 5. まとめ 5 Agenda DMM百万長者の事例紹介 そしてその次への展望
© DMM.com 6 Agenda DMMの中でもどマイナーなサービス 1. DMM百万長者 とは 2. フロントエンド
技術的特徴 3. インフラアーキテクチャ 4. ㊙ そしてその次へ... 5. まとめ
© DMM.com 7 100man.dmm.com
© DMM.com DMM百万長者 とは オートレースの仕組みを利用した富くじ感覚のサービス(日本国公認) 確率1/4096で143万円が当たります!!!! 2019年9月リリース 8 簡単 買って待つだけ
オートレースの知識不要 ほぼ毎日抽せん 確率 ほかの富くじと比べると 高いらしい 1/2401になる日も ほぼ毎日 百万長者が誕生
© DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ
4. ㊙ そしてその次へ... 5. まとめ 9 Agenda どんなの使ってるか
© DMM.com フロントエンドの技術的特徴 • Nuxt.js • SPA(SSR) • PWA •
Webプッシュ • Headless CMS 10
© DMM.com Nuxt.js 良かったこと • 開発効率 高 • 新メンバーの学習もスムーズ イマイチだったこと
• テストが難しいところアリ(asyncDataとか) • パフォーマンスは良くないかも(Node.jsがそもそも?) • 高負荷なページを1回SSRするとサーバーが死 • 適宜クライアントサイドレンダリングさせる 11
© DMM.com Webプッシュ • Firebase Cloud Messaging • iOS, mac
Safari 以外に対応 • CV率はさほど高くない • ヘビーユーザーのCV率 高 12
© DMM.com Headless CMS • 運用のあらゆる事柄を一元管理 • お知らせ • Webプッシュ
• バナー etc... • 開発・運用 工数 大幅減 • 予約投稿が可能 13
© DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ
4. ㊙ そしてその次へ... 5. まとめ 14 Agenda 本題かも
© DMM.com 全体 概略図 15
© DMM.com フロントエンドにまつわるポイント 16 CDN 静的ファイルの配信 cdn.100man.dmm.com 100man.dmm.com api.100man.dmm.com ドメイン分離
Fargate Dockerコンテナを サーバーレスで実行
© DMM.com CDN(CloudFront + S3) 1. デプロイ時のバージョン差異防止 2. 静的ファイル配信の可用性・速度向上 Nuxt.js
での静的ファイル配信が I/O のボトルネック Nuxt の内部ミドルウェアに使われている connect のせい 静的ファイル配信は CDN 17
© DMM.com CDN(CloudFront + S3) 可用性 18 rps Nuxt CDN
100 100 % 100 % 200 83 % 100 % 300 44 % 100 % 400 28 % 100 % 500 12 % 88 % 600 0 % 86 % 700 0 % 82 % レスポンスタイム rps Nuxt CDN 100 0.77 sec 0.25 sec 200 8.58 sec 0.70 sec 300 25.43 sec 1.56 sec 400 54.16 sec 2.41 sec 500 43.09 sec 0.60 sec 600 N/A 3.54 sec 700 N/A 7.30 sec
© DMM.com ドメイン分離 全社メンテナンス時の静的ファイル配信維持 サービスドメインのAレコードをメンテナンスサーバーに向ける 同じドメイン: メンテに入ったらOGP画像などが死 ドメイン分離: メンテ時でも生かす 面倒なこと:
ServiceWorkerのCORS対策が必要 19 フロント 100man.dmm.com CDN cdn.100man.dmm.com
© DMM.com AWS Fargate Dockerコンテナをサーバーレスで実行 概ね満足 ただ・・・スパイク / アタック 時のスケールアウトが間に合わない
• 1分間くらい503になることが何度か • Nuxt.js(Node.js ?)のパフォーマンスが良くない 20
© DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ
4. ㊙ そしてその次へ... 5. まとめ 21 Agenda 本題かも
© DMM.com 22 とあるサービス フルリプレース 進行中
© DMM.com 最近やってみたこと • サーバーを全Lambda化 • Fargateのスケールの遅い問題の対抗策 • コストダウン •
Lambda → RDS Proxy → RDS (Aurora) • RDS Proxy の登場により、 Lambda → RDS のコネクション爆発問題が解消 • AWS CDK による IaC 23
© DMM.com 雑 概略図 24
© DMM.com 実際どう? 動作は概ね問題なし AWS CDKでインフラも簡単構築 ただ・・・ • Lambdaのコールドスタート 遅い(しかもNuxt側だけ)
• Provisioned Concurrency で解決できる • Nuxtどうするかなー • RDS Proxyはプレビュー版 • AWS CDKにも対応なし 25
© DMM.com おまけ(AWS CDKでNuxt) 1. AWS謹製の aws-serverless-express を導入 https://github.com/awslabs/aws-serverless-express 2.
Nuxtのサーバーのコードを書く 26
© DMM.com おまけ(AWS CDKでNuxt) 27
© DMM.com おまけ(AWS CDKでNuxt) 28
© DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ
4. ㊙ そしてその次へ... 5. まとめ 29 Agenda 本題かも
© DMM.com まとめ • DMM百万長者はモダンなフロントエンド • インフラの工夫 • CDN •
ドメイン分離 • Fargate • このアーキテクチャを進化させるために模索中 30
© DMM.com またね 31