© 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