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.3k
DMM百万長者のフロントエンド クラウドアーキテクチャ
Think! Frontend #01 で発表したスライドです。
https://dmm.connpass.com/event/177895/
kamatte
June 25, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
Effect の双対、Coeffect
yukikurage
4
1.3k
無関心の谷
kanayannet
0
140
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
460
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
0
280
ReadMoreTextView
fornewid
0
240
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
460
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.2k
型安全RESTで爆速プロトタイピング – Hono RPC実践
tacke_jp
0
110
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
290
XSLTで作るBrainfuck処理系
makki_d
0
170
從零到一:搭建你的第一個 Observability 平台
blueswen
1
760
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Raft: Consensus for Rubyists
vanstee
138
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
BBQ
matthewcrist
89
9.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
870
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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