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

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

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

ニフティ株式会社

March 08, 2023
Tweet

More Decks by ニフティ株式会社

Other Decks in Programming

Transcript

  1. Copyright © NIFTY Corporation All Rights Reserved. 

    ニフティトップのNext.jsでの
    キャッシュ戦略を考えた話
    佐々木 優

    会員システムグループ 


    View Slide

  2. Copyright © NIFTY Corporation All Rights Reserved. 
 2

    あらためて自己紹介

    ニフティ株式会社


    佐々木 優


    ● 新卒入社4年目


    ● @niftyトップページ開発/運用


    ● 自転車・国内旅行にハマり中



    View Slide

  3. Copyright © NIFTY Corporation All Rights Reserved. 

    キャッシュとは何か?

    3


    View Slide

  4. Copyright © NIFTY Corporation All Rights Reserved. 

    キャッシュとは?

    ● 一度利用したブラウザやサーバー側にあるデータを

    一時的に保存する機能



    キャッシュの種類

    ● ブラウザキャッシュ

    ● CDNのキャッシュ

    など


    ※CDN = サーバーからの応答を

     肩代わりするためのもの

    4

    キャッシュの概要 


    View Slide

  5. Copyright © NIFTY Corporation All Rights Reserved. 
 5

    キャッシュの目的

    コスト削減

    ● 画像などのコンテンツをキャッシュさせることで

    サーバー側へのリクエストにかかるコストを削減できる



    インフラリソースの負荷軽減

    ● ブラウザやCDNを用いることでサーバー側への負荷を肩代
    わりできる



    パフォーマンス向上

    ● 銀の弾丸ではないがWebページのレスポンスタイムを減らす
    ことができる


    View Slide

  6. Copyright © NIFTY Corporation All Rights Reserved. 
 6

    キャッシュの目的

    コスト削減

    ● 画像などのコンテンツをキャッシュさせることで

    サーバー側へのリクエストにかかるコストを削減できる



    インフラリソースの負荷軽減

    ● ブラウザやCDNを用いることでサーバー側への負荷を肩代
    わりできる



    パフォーマンス向上

    ● 銀の弾丸ではないがWebページのレスポンスタイムを減らす
    ことができる


    View Slide

  7. Copyright © NIFTY Corporation All Rights Reserved. 

    @niftyトップページでも

    キャッシュ戦略を考えてみました!

    7


    View Slide

  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トップページについて


    View Slide

  9. Copyright © NIFTY Corporation All Rights Reserved. 

    CDNのキャッシュ

    ● CloudFront

    ● Serverless Framework(Next.jsをサーバレス環境へデプロイ
    するために使用)



    ブラウザキャッシュ

    ● 基本はNext.jsで管理

    9

    @niftyトップページキャッシュ構成


    View Slide

  10. Copyright © NIFTY Corporation All Rights Reserved. 

    CDNのキャッシュ

    ● CloudFront

    ● Serverless Framework(Next.jsをサーバレス環境へデプロイす
    るために使用)



    ブラウザキャッシュ

    ● 基本はNext.jsで管理

    10

    @niftyトップページキャッシュ構成


    View Slide

  11. Copyright © NIFTY Corporation All Rights Reserved. 

    CDNのキャッシュ

    ● CloudFront

    ● Serverless Framework(Next.jsをサーバレス環境へデプロイす
    るために使用)



    ブラウザキャッシュ

    ● 基本はNext.jsで管理

    11

    @niftyトップページキャッシュ構成

    ブラウザ→CloudFront
    へのリクエスト料金が発
    生💰

    View Slide

  12. Copyright © NIFTY Corporation All Rights Reserved. 

    CDNのキャッシュ

    ● CloudFront

    ● Serverless Framework(Next.jsをサーバレス環境へデプロイ
    するために使用)



    ブラウザキャッシュ

    ● 基本はNext.jsで管理

    12

    @niftyトップページキャッシュ構成

    ブラウザ→CloudFront
    へのリクエスト料金が発
    生💰

    View Slide

  13. Copyright © NIFTY Corporation All Rights Reserved. 

    CDNのキャッシュ

    ● CloudFront

    ● Serverless Framework(Next.jsをサーバレス環境へデプロイ
    するために使用)



    ブラウザキャッシュ

    ● 基本はNext.jsで管理

    13

    @niftyトップページキャッシュ構成

    よりユーザーに近い位置でのキャッシュ
    CDNへのリクエストも軽減できる 💪
    ブラウザ→CloudFront
    へのリクエスト料金が発
    生💰

    View Slide

  14. Copyright © NIFTY Corporation All Rights Reserved. 

    どうキャッシュさせるのが良いか?


    14


    View Slide

  15. Copyright © NIFTY Corporation All Rights Reserved. 

    キャッシュするもの


    ● 画像やCSS、JSファイルなどあまり更新されない
    コンテンツはキャッシュさせる!

    ● 特に画像はデータ転送量が大きいので効果大

    ● Next.jsでは静的コンテンツはデフォルトでキャッ
    シュされる設定になっている



    15

    キャッシュ戦略①


    View Slide

  16. Copyright © NIFTY Corporation All Rights Reserved. 

    キャッシュさせないもの


    ● APIなどユーザーによって返される内容が異
    なるものはキャッシュさせない!

    ● @niftyトップページにはログイン機能があり多
    数の枠で利用している

    ● 安全側に倒す方針を採用




    16

    キャッシュ戦略②


    View Slide

  17. Copyright © NIFTY Corporation All Rights Reserved. 


    設定はなるべくシンプルに


    ● まずはシンプルに考える!

    ● CDNとブラウザで同じキャッシュ設定に

    ● できるだけユーザーに近い部分でキャッシュ
    させる

    17

    キャッシュ戦略③


    View Slide

  18. Copyright © NIFTY Corporation All Rights Reserved. 

    無事リリース完了!

    一見問題無さそうだが...

    18


    View Slide

  19. Copyright © NIFTY Corporation All Rights Reserved. 

    next/imageの画像のブラウザキャッシュが短く設定されて
    いた

    ● next/image

    →Next.jsで画像を最適化してくれる技術


    ● 本来不要なリクエストが発生

    →CloudFrontのコストも増加


    ● Severless Frameworkのデプロイ時に

    Next.jsのキャッシュ設定が上書きされててしまう

    19

    失敗談①


    View Slide

  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

    View Slide

  21. Copyright © NIFTY Corporation All Rights Reserved. 

    結果

    ● 無事にnext/imageのブラウザキャッシュが効いた!

    ● CloudFrontへのリクエストが減った!

    ● 1000USD/月 程度のコストを削減できた!

    21

    どうなったのか?


    View Slide

  22. Copyright © NIFTY Corporation All Rights Reserved. 

    Good

    ● 事前にキャッシュパターンを決めていた


    Bad

    ● リリース後に正しくキャッシュが設定されているかの

    チェックが抜けていた

    ● CloudFrontのコスト増加に気づけなかった


    Try

    ● リリース後にはキャッシュ設定のチェックを行う

    ● 普段からCost Explorerなどでコストを把握する癖をつける

    振り返り①

    22


    View Slide

  23. Copyright © NIFTY Corporation All Rights Reserved. 

    振り返り②

    Learn

    ● 静的コンテンツはなるべくブラウザキャッシュさせる

    →更新頻度の低いコンテンツをまとめて管理できる設計


    ● キャッシュを常に把握できる状態にしておく

    →今の設定が本当に正しいのか?を検証可能に


    ● 全てを一度に設定しようとしない

    →キャッシュなしの設定から徐々にキャッシュさせていく




    23


    View Slide

  24. Copyright © NIFTY Corporation All Rights Reserved. 

    おわりに

    まとめ

    ● @niftyトップページでキャッシュ戦略考えた

    ● キャッシュを正しく把握/設計することでインフラコストの削減に
    繋がった

    ● 失敗談から得た知見について






    24


    View Slide

  25. Copyright © NIFTY Corporation All Rights Reserved. 


    View Slide