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
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
290
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Java on Azure で LangGraph!
kohei3110
0
170
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
A2A プロトコルを試してみる
azukiazusa1
2
1.2k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
280
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
WindowInsetsだってテストしたい
ryunen344
1
200
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Raft: Consensus for Rubyists
vanstee
140
7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
RailsConf 2023
tenderlove
30
1.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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