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

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