DMM百万長者のフロントエンド クラウドアーキテクチャ

Think! Frontend #01 で発表したスライドです。
https://dmm.connpass.com/event/177895/

Transcript

1. © DMM.com DMM百万長者 の フロントエンド クラウドアーキテクチャ そしてその次へ... 合同会社DMM.com セールスソリューション本部 アミューズメント事業部 公営競技グループ エンジニアチームリーダー 兼 データマーケティング室 室長 上井 慎之介 2020/06/25 Think! Frontend #01
2. © DMM.com 2 自己紹介 上井 慎之介 Shinnosuke Uwai 好きなお酒: ストロングゼロ 苦手なお酒: ほろよい 2017年 新卒入社 バックエンド、フロント、クラウドやる男 21世紀のWebシンデレラ 上井慎之介のすべて
3. © 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のこととか
4. © DMM.com 4
5. © DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ 4. ㊙ そしてその次へ... 5. まとめ 5 Agenda DMM百万長者の事例紹介 そしてその次への展望
6. © DMM.com 6 Agenda DMMの中でもどマイナーなサービス 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ 4. ㊙ そしてその次へ... 5. まとめ
7. © DMM.com 7 100man.dmm.com
8. © DMM.com DMM百万長者 とは オートレースの仕組みを利用した富くじ感覚のサービス（日本国公認） 確率1/4096で143万円が当たります！！！！ 2019年9月リリース 8 簡単 買って待つだけ オートレースの知識不要 ほぼ毎日抽せん 確率 ほかの富くじと比べると 高いらしい 1/2401になる日も ほぼ毎日 百万長者が誕生
9. © DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ 4. ㊙ そしてその次へ... 5. まとめ 9 Agenda どんなの使ってるか
10. © DMM.com フロントエンドの技術的特徴 • Nuxt.js • SPA（SSR） • PWA • Webプッシュ • Headless CMS 10
11. © DMM.com Nuxt.js 良かったこと • 開発効率 高 • 新メンバーの学習もスムーズ イマイチだったこと • テストが難しいところアリ（asyncDataとか） • パフォーマンスは良くないかも（Node.jsがそもそも？） • 高負荷なページを1回SSRするとサーバーが死 • 適宜クライアントサイドレンダリングさせる 11
12. © DMM.com Webプッシュ • Firebase Cloud Messaging • iOS, mac Safari 以外に対応 • CV率はさほど高くない • ヘビーユーザーのCV率 高 12
13. © DMM.com Headless CMS • 運用のあらゆる事柄を一元管理 • お知らせ • Webプッシュ • バナー etc... • 開発・運用 工数 大幅減 • 予約投稿が可能 13
14. © DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ 4. ㊙ そしてその次へ... 5. まとめ 14 Agenda 本題かも
15. © DMM.com 全体 概略図 15
16. © DMM.com フロントエンドにまつわるポイント 16 CDN 静的ファイルの配信 cdn.100man.dmm.com 100man.dmm.com api.100man.dmm.com ドメイン分離 Fargate Dockerコンテナを サーバーレスで実行
17. © DMM.com CDN（CloudFront + S3） 1. デプロイ時のバージョン差異防止 2. 静的ファイル配信の可用性・速度向上 Nuxt.js での静的ファイル配信が I/O のボトルネック Nuxt の内部ミドルウェアに使われている connect のせい 静的ファイル配信は CDN 17
18. © 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
19. © DMM.com ドメイン分離 全社メンテナンス時の静的ファイル配信維持 サービスドメインのAレコードをメンテナンスサーバーに向ける 同じドメイン: メンテに入ったらOGP画像などが死 ドメイン分離: メンテ時でも生かす 面倒なこと: ServiceWorkerのCORS対策が必要 19 フロント 100man.dmm.com CDN cdn.100man.dmm.com
20. © DMM.com AWS Fargate Dockerコンテナをサーバーレスで実行 概ね満足 ただ・・・スパイク / アタック 時のスケールアウトが間に合わない • 1分間くらい503になることが何度か • Nuxt.js（Node.js ?）のパフォーマンスが良くない 20
21. © DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ 4. ㊙ そしてその次へ... 5. まとめ 21 Agenda 本題かも
22. © DMM.com 22 とあるサービス
 フルリプレース
 進行中

23. © DMM.com 最近やってみたこと • サーバーを全Lambda化 • Fargateのスケールの遅い問題の対抗策 • コストダウン • Lambda → RDS Proxy → RDS （Aurora） • RDS Proxy の登場により、 Lambda → RDS のコネクション爆発問題が解消 • AWS CDK による IaC 23
24. © DMM.com 雑 概略図 24
25. © DMM.com 実際どう？ 動作は概ね問題なし AWS CDKでインフラも簡単構築 ただ・・・ • Lambdaのコールドスタート 遅い（しかもNuxt側だけ） • Provisioned Concurrency で解決できる • Nuxtどうするかなー • RDS Proxyはプレビュー版 • AWS CDKにも対応なし 25
26. © DMM.com おまけ（AWS CDKでNuxt） 1. AWS謹製の aws-serverless-express を導入 https://github.com/awslabs/aws-serverless-express 2. Nuxtのサーバーのコードを書く 26
27. © DMM.com おまけ（AWS CDKでNuxt） 27
28. © DMM.com おまけ（AWS CDKでNuxt） 28
29. © DMM.com 1. DMM百万長者 とは 2. フロントエンド 技術的特徴 3. インフラアーキテクチャ 4. ㊙ そしてその次へ... 5. まとめ 29 Agenda 本題かも
30. © DMM.com まとめ • DMM百万長者はモダンなフロントエンド • インフラの工夫 • CDN • ドメイン分離 • Fargate • このアーキテクチャを進化させるために模索中 30
31. © DMM.com またね 31