Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

7f506d27712da472e93e2042a27993f5?s=47 kamatte
June 25, 2020

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

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

7f506d27712da472e93e2042a27993f5?s=128

kamatte

June 25, 2020
Tweet

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