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

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

kamatte
June 25, 2020

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

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

kamatte

June 25, 2020
Tweet

Other Decks in Programming

Transcript

  1. © DMM.com
    DMM百万長者

    フロントエンド
    クラウドアーキテクチャ
    そしてその次へ...
    合同会社DMM.com セールスソリューション本部 アミューズメント事業部
    公営競技グループ エンジニアチームリーダー 兼 データマーケティング室 室長
    上井 慎之介
    2020/06/25 Think! Frontend #01

    View full-size slide

  2. © DMM.com 2
    自己紹介
    上井 慎之介
    Shinnosuke Uwai
    好きなお酒: ストロングゼロ
    苦手なお酒: ほろよい
    2017年 新卒入社
    バックエンド、フロント、クラウドやる男
    21世紀のWebシンデレラ
    上井慎之介のすべて

    View full-size slide

  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のこととか

    View full-size slide

  4. © DMM.com 4

    View full-size slide

  5. © DMM.com
    1. DMM百万長者 とは
    2. フロントエンド 技術的特徴
    3. インフラアーキテクチャ
    4. ㊙ そしてその次へ...
    5. まとめ
    5
    Agenda
    DMM百万長者の事例紹介
    そしてその次への展望

    View full-size slide

  6. © DMM.com 6
    Agenda
    DMMの中でもどマイナーなサービス
    1. DMM百万長者 とは
    2. フロントエンド 技術的特徴
    3. インフラアーキテクチャ
    4. ㊙ そしてその次へ...
    5. まとめ

    View full-size slide

  7. © DMM.com 7
    100man.dmm.com

    View full-size slide

  8. © DMM.com
    DMM百万長者 とは
    オートレースの仕組みを利用した富くじ感覚のサービス(日本国公認)
    確率1/4096で143万円が当たります!!!!
    2019年9月リリース
    8
    簡単
    買って待つだけ
    オートレースの知識不要
    ほぼ毎日抽せん 確率
    ほかの富くじと比べると
    高いらしい
    1/2401になる日も
    ほぼ毎日
    百万長者が誕生

    View full-size slide

  9. © DMM.com
    1. DMM百万長者 とは
    2. フロントエンド 技術的特徴
    3. インフラアーキテクチャ
    4. ㊙ そしてその次へ...
    5. まとめ
    9
    Agenda
    どんなの使ってるか

    View full-size slide

  10. © DMM.com
    フロントエンドの技術的特徴
    • Nuxt.js
    • SPA(SSR)
    • PWA
    • Webプッシュ
    • Headless CMS
    10

    View full-size slide

  11. © DMM.com
    Nuxt.js
    良かったこと
    • 開発効率 高
    • 新メンバーの学習もスムーズ
    イマイチだったこと
    • テストが難しいところアリ(asyncDataとか)
    • パフォーマンスは良くないかも(Node.jsがそもそも?)
    • 高負荷なページを1回SSRするとサーバーが死
    • 適宜クライアントサイドレンダリングさせる
    11

    View full-size slide

  12. © DMM.com
    Webプッシュ
    • Firebase Cloud Messaging
    • iOS, mac Safari 以外に対応
    • CV率はさほど高くない
    • ヘビーユーザーのCV率 高
    12

    View full-size slide

  13. © DMM.com
    Headless CMS
    • 運用のあらゆる事柄を一元管理
    • お知らせ
    • Webプッシュ
    • バナー etc...
    • 開発・運用 工数 大幅減
    • 予約投稿が可能
    13

    View full-size slide

  14. © DMM.com
    1. DMM百万長者 とは
    2. フロントエンド 技術的特徴
    3. インフラアーキテクチャ
    4. ㊙ そしてその次へ...
    5. まとめ
    14
    Agenda
    本題かも

    View full-size slide

  15. © DMM.com
    全体 概略図
    15

    View full-size slide

  16. © DMM.com
    フロントエンドにまつわるポイント
    16
    CDN
    静的ファイルの配信
    cdn.100man.dmm.com
    100man.dmm.com
    api.100man.dmm.com
    ドメイン分離
    Fargate
    Dockerコンテナを
    サーバーレスで実行

    View full-size slide

  17. © DMM.com
    CDN(CloudFront + S3)
    1. デプロイ時のバージョン差異防止
    2. 静的ファイル配信の可用性・速度向上
    Nuxt.js での静的ファイル配信が I/O のボトルネック
    Nuxt の内部ミドルウェアに使われている connect のせい
    静的ファイル配信は CDN
    17

    View full-size slide

  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

    View full-size slide

  19. © DMM.com
    ドメイン分離
    全社メンテナンス時の静的ファイル配信維持
    サービスドメインのAレコードをメンテナンスサーバーに向ける
    同じドメイン: メンテに入ったらOGP画像などが死
    ドメイン分離: メンテ時でも生かす
    面倒なこと: ServiceWorkerのCORS対策が必要
    19
    フロント 100man.dmm.com
    CDN cdn.100man.dmm.com

    View full-size slide

  20. © DMM.com
    AWS Fargate
    Dockerコンテナをサーバーレスで実行
    概ね満足
    ただ・・・スパイク / アタック 時のスケールアウトが間に合わない
    • 1分間くらい503になることが何度か
    • Nuxt.js(Node.js ?)のパフォーマンスが良くない
    20

    View full-size slide

  21. © DMM.com
    1. DMM百万長者 とは
    2. フロントエンド 技術的特徴
    3. インフラアーキテクチャ
    4. ㊙ そしてその次へ...
    5. まとめ
    21
    Agenda
    本題かも

    View full-size slide

  22. © DMM.com 22
    とあるサービス

    フルリプレース

    進行中


    View full-size slide

  23. © DMM.com
    最近やってみたこと
    • サーバーを全Lambda化
    • Fargateのスケールの遅い問題の対抗策
    • コストダウン
    • Lambda → RDS Proxy → RDS (Aurora)
    • RDS Proxy の登場により、
    Lambda → RDS のコネクション爆発問題が解消
    • AWS CDK による IaC
    23

    View full-size slide

  24. © DMM.com
    雑 概略図
    24

    View full-size slide

  25. © DMM.com
    実際どう?
    動作は概ね問題なし
    AWS CDKでインフラも簡単構築
    ただ・・・
    • Lambdaのコールドスタート 遅い(しかもNuxt側だけ)
    • Provisioned Concurrency で解決できる
    • Nuxtどうするかなー
    • RDS Proxyはプレビュー版
    • AWS CDKにも対応なし
    25

    View full-size slide

  26. © DMM.com
    おまけ(AWS CDKでNuxt)
    1. AWS謹製の aws-serverless-express を導入
    https://github.com/awslabs/aws-serverless-express
    2. Nuxtのサーバーのコードを書く
    26

    View full-size slide

  27. © DMM.com
    おまけ(AWS CDKでNuxt)
    27

    View full-size slide

  28. © DMM.com
    おまけ(AWS CDKでNuxt)
    28

    View full-size slide

  29. © DMM.com
    1. DMM百万長者 とは
    2. フロントエンド 技術的特徴
    3. インフラアーキテクチャ
    4. ㊙ そしてその次へ...
    5. まとめ
    29
    Agenda
    本題かも

    View full-size slide

  30. © DMM.com
    まとめ
    • DMM百万長者はモダンなフロントエンド
    • インフラの工夫
    • CDN
    • ドメイン分離
    • Fargate
    • このアーキテクチャを進化させるために模索中
    30

    View full-size slide

  31. © DMM.com
    またね
    31

    View full-size slide