NIFTY Tech Talk #09 ニフティトップのNext.jsでのキャッシュ戦略を考えた話

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved. 
 ニフティトップのNext.jsでの キャッシュ戦略を考えた話 佐々木　優
 会員システムグループ 

2. Copyright © NIFTY Corporation All Rights Reserved. 
 2
 あらためて自己紹介
 ニフティ株式会社
 
 佐々木 優
 
 • 新卒入社4年目
 
 • @niftyトップページ開発/運用
 
 • 自転車・国内旅行にハマり中
 
 

3. Copyright © NIFTY Corporation All Rights Reserved. 
 キャッシュとは何か？
 3

4. Copyright © NIFTY Corporation All Rights Reserved. 
 キャッシュとは？
 • 一度利用したブラウザやサーバー側にあるデータを
 一時的に保存する機能
 
 
 キャッシュの種類
 • ブラウザキャッシュ
 • CDNのキャッシュ
 など
 
 ※CDN = サーバーからの応答を
 　肩代わりするためのもの
 4
 キャッシュの概要 

5. Copyright © NIFTY Corporation All Rights Reserved. 
 5
 キャッシュの目的
 コスト削減
 • 画像などのコンテンツをキャッシュさせることで
 サーバー側へのリクエストにかかるコストを削減できる
 
 
 インフラリソースの負荷軽減
 • ブラウザやCDNを用いることでサーバー側への負荷を肩代 わりできる
 
 
 パフォーマンス向上
 • 銀の弾丸ではないがWebページのレスポンスタイムを減らす ことができる

6. Copyright © NIFTY Corporation All Rights Reserved. 
 6
 キャッシュの目的
 コスト削減
 • 画像などのコンテンツをキャッシュさせることで
 サーバー側へのリクエストにかかるコストを削減できる
 
 
 インフラリソースの負荷軽減
 • ブラウザやCDNを用いることでサーバー側への負荷を肩代 わりできる
 
 
 パフォーマンス向上
 • 銀の弾丸ではないがWebページのレスポンスタイムを減らす ことができる

7. Copyright © NIFTY Corporation All Rights Reserved. 
 @niftyトップページでも
 キャッシュ戦略を考えてみました！
 7

8. Copyright © NIFTY Corporation All Rights Reserved. 
 サイトの概要
 • ニフティの会員向けポータルサイト
 • 月間82万UU、1,989万PV！！ ※2023/01実績
 • 2022年7月にシステム基盤刷新を行った
 ◦ ReactベースのNext.js + 
 Serverless Framework + CDN構成
 
 
 
 
 詳細は 『NIFTY Tech Talk #4 レガシーシステムからの脱却』を
 ご参照ください！
 https://www.youtube.com/watch?v=Ttium-UNEEU
 8
 @niftyトップページについて

9. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 • CloudFront
 • Serverless Framework（Next.jsをサーバレス環境へデプロイ するために使用）
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 9
 @niftyトップページキャッシュ構成

10. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 • CloudFront
 • Serverless Framework（Next.jsをサーバレス環境へデプロイす るために使用）
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 10
 @niftyトップページキャッシュ構成

11. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 • CloudFront
 • Serverless Framework（Next.jsをサーバレス環境へデプロイす るために使用）
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 11
 @niftyトップページキャッシュ構成
 ブラウザ→CloudFront へのリクエスト料金が発 生💰
12. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 • CloudFront
 • Serverless Framework（Next.jsをサーバレス環境へデプロイ するために使用）
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 12
 @niftyトップページキャッシュ構成
 ブラウザ→CloudFront へのリクエスト料金が発 生💰
13. Copyright © NIFTY Corporation All Rights Reserved. 
 CDNのキャッシュ
 • CloudFront
 • Serverless Framework（Next.jsをサーバレス環境へデプロイ するために使用）
 
 
 ブラウザキャッシュ
 • 基本はNext.jsで管理
 13
 @niftyトップページキャッシュ構成
 よりユーザーに近い位置でのキャッシュ CDNへのリクエストも軽減できる 💪 ブラウザ→CloudFront へのリクエスト料金が発 生💰
14. Copyright © NIFTY Corporation All Rights Reserved. 
 どうキャッシュさせるのが良いか？
 
 14

15. Copyright © NIFTY Corporation All Rights Reserved. 
 キャッシュするもの
 
 • 画像やCSS、JSファイルなどあまり更新されない コンテンツはキャッシュさせる！
 • 特に画像はデータ転送量が大きいので効果大
 • Next.jsでは静的コンテンツはデフォルトでキャッ シュされる設定になっている
 
 
 15
 キャッシュ戦略①

16. Copyright © NIFTY Corporation All Rights Reserved. 
 キャッシュさせないもの
 
 • APIなどユーザーによって返される内容が異 なるものはキャッシュさせない！
 • @niftyトップページにはログイン機能があり多 数の枠で利用している
 • 安全側に倒す方針を採用
 
 
 
 16
 キャッシュ戦略②

17. Copyright © NIFTY Corporation All Rights Reserved. 
 
 設定はなるべくシンプルに
 
 • まずはシンプルに考える！
 • CDNとブラウザで同じキャッシュ設定に
 • できるだけユーザーに近い部分でキャッシュ させる
 17
 キャッシュ戦略③

18. Copyright © NIFTY Corporation All Rights Reserved. 
 無事リリース完了！
 一見問題無さそうだが...
 18

19. Copyright © NIFTY Corporation All Rights Reserved. 
 next/imageの画像のブラウザキャッシュが短く設定されて いた
 • next/image
 →Next.jsで画像を最適化してくれる技術
 
 • 本来不要なリクエストが発生
 →CloudFrontのコストも増加
 
 • Severless Frameworkのデプロイ時に
 Next.jsのキャッシュ設定が上書きされててしまう
 19
 失敗談①

20. Copyright © NIFTY Corporation All Rights Reserved. 
 対処
 • Next.jsでブラウザキャッシュを効かせるためのルール を追加
 
 　　　next/imageのブラウザキャッシュを直接指定してみる
 20
 失敗談②
 async headers() { return [ { source: '/_next/image:slug*', headers: [ { key: 'Cache-Control', value: 'public, max-age=31536000, must-revalidate', }, ], }, } 
 例）
 next.config.js
21. Copyright © NIFTY Corporation All Rights Reserved. 
 結果
 • 無事にnext/imageのブラウザキャッシュが効いた！
 • CloudFrontへのリクエストが減った！
 • 1000USD/月 程度のコストを削減できた！
 21
 どうなったのか？

22. Copyright © NIFTY Corporation All Rights Reserved. 
 Good
 • 事前にキャッシュパターンを決めていた
 
 Bad
 • リリース後に正しくキャッシュが設定されているかの
 チェックが抜けていた
 • CloudFrontのコスト増加に気づけなかった
 
 Try
 • リリース後にはキャッシュ設定のチェックを行う
 • 普段からCost Explorerなどでコストを把握する癖をつける
 振り返り①
 22

23. Copyright © NIFTY Corporation All Rights Reserved. 
 振り返り②
 Learn
 • 静的コンテンツはなるべくブラウザキャッシュさせる
 →更新頻度の低いコンテンツをまとめて管理できる設計
 
 • キャッシュを常に把握できる状態にしておく
 →今の設定が本当に正しいのか？を検証可能に
 
 • 全てを一度に設定しようとしない
 →キャッシュなしの設定から徐々にキャッシュさせていく
 
 
 
 23

24. Copyright © NIFTY Corporation All Rights Reserved. 
 おわりに
 まとめ
 • @niftyトップページでキャッシュ戦略考えた
 • キャッシュを正しく把握/設計することでインフラコストの削減に 繋がった
 • 失敗談から得た知見について
 
 
 
 
 
 24

25. Copyright © NIFTY Corporation All Rights Reserved.