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
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
180
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
190
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
340
Amazon Bedrock Multi Agentsを試してきた
tm2
1
180
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.4k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
0
120
AWS re:Invent 2024個人的まとめ
satoshi256kbyte
0
140
Amazon Nova Reelの可能性
hideg
0
240
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
210
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
1
2.9k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
310
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
The Invisible Side of Design
smashingmag
299
50k
Building an army of robots
kneath
302
45k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Statistics for Hackers
jakevdp
797
220k
Producing Creativity
orderedlist
PRO
343
39k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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