Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
DMM百万長者のフロントエンド クラウドアーキテクチャ
kamatte
June 25, 2020
Programming
2
1.9k
DMM百万長者のフロントエンド クラウドアーキテクチャ
Think! Frontend #01 で発表したスライドです。
https://dmm.connpass.com/event/177895/
kamatte
June 25, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
kakutanitalk2022_opening_act
shirotamaki
0
110
Writing Greener Java Applications
hollycummins
0
330
フロントエンドで学んだことをデータ分析で使ってみた話
daichi_igarashi
0
170
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
530
子育てとEMと転職と
_atsushisakai
1
330
Cloudflare Workersと状態管理
chimame
2
470
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
200
Form実装基本を学び直してみた
hyugatsukui
0
230
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
550
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
220
OSSから学んだPR Descriptionの書き方
fugakkbn
4
120
AWSにおける標的型Bot対策
hacomono
0
390
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Code Review Best Practice
trishagee
50
11k
A Philosophy of Restraint
colly
193
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
22
1.4k
Statistics for Hackers
jakevdp
785
210k
The Language of Interfaces
destraynor
149
21k
Why Our Code Smells
bkeepers
PRO
326
55k
Atom: Resistance is Futile
akmur
256
24k
What's in a price? How to price your products and services
michaelherold
233
9.7k
KATA
mclloyd
12
9.7k
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