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

70万通りのURLを持つWebサービスを Next.jsにリプレイスして高速化した話

AijiUejima
October 28, 2021

70万通りのURLを持つWebサービスを Next.jsにリプレイスして高速化した話

ジャムジャム!!Jamstack_2に登壇した際の発表資料です。
https://jamjamjamstack.connpass.com/event/226467/

ご質問あれば、Twitter: aiji42_dev までどうぞ。

AijiUejima

October 28, 2021
Tweet

More Decks by AijiUejima

Other Decks in Technology

Transcript

  1. 0
    ジャムジャム!!Jamstack_2
    70万通りのURLを持つWebサービスを
    Next.jsにリプレイスして⾼速化した話

    View Slide

  2. 1
    © 2021 Ateam Inc. 1
    Uejima Aiji
    リードエンジニア@株式会社エイチームライフスタイル
    Twitter: aiji42_dev
    8年のキャリアの中で、フロントエンジニアよりも
    バックエンドエンジニアとしてのキャリアのほうが長い (3:7くらい)
    でも最近はフロントエンドがメイン

    View Slide

  3. 2
    © 2021 Ateam Inc. 2
    今日はURLが膨大なサービスに
    Next.jsを導入した際の

    View Slide

  4. 3
    © 2021 Ateam Inc. 3
    立ちはだかった壁と
    その乗り越え方を紹介します

    View Slide

  5. 4
    © 2021 Ateam Inc. 4
    題材となるサービス

    View Slide

  6. 5
    © 2021 Ateam Inc. 5
    ライフエンディングに関する情報サイト
    自分や家族にぴったりのお墓・霊園を探し、
    資料請求をするサービス

    View Slide

  7. 6
    © 2021 Ateam Inc. 6
    トップ 記事 霊園詳細
    1K Pages 700K Pages 30K Pages
    エントリー
    霊園リスト&検索

    View Slide

  8. 7
    © 2021 Ateam Inc. 7
    トップ 記事 霊園リスト&検索 霊園詳細
    1K Pages 700K Pages 30K Pages
    エントリー
    エリア(市区町村・駅)x霊園特徴(樹木葬, 納骨堂...etc.)

    View Slide

  9. 8
    © 2021 Ateam Inc. 8
    もともとはパフォーマンスが非常に悪かった

    View Slide

  10. 9
    © 2021 Ateam Inc. 9
    引用: https://addyosmani.com/blog/web-vitals-extension/

    View Slide

  11. 10
    © 2021 Ateam Inc. 10
    LCP (Largest Contentful Paint)
    CLS (Cumulative Layout Shift)

    View Slide

  12. 11
    © 2021 Ateam Inc. 11
    2020年
    CoreWebVitalsをSEO評価に導入するとのアナウンスがあった
    https://developers.google.com/search/blog/2020/11/timing-for-page-experience

    View Slide

  13. 12
    © 2021 Ateam Inc. 12
    手を打つ必要があるということで

    View Slide

  14. 13
    © 2021 Ateam Inc. 13
    Next.jsを用いたJamstack化による
    CoreWebVitalsの改善を行った

    View Slide

  15. 14
    © 2021 Ateam Inc. 14
    その結果
    大幅なパフォーマンス改善に成功!

    View Slide

  16. 15
    © 2021 Ateam Inc. 15
    LCP CLS

    View Slide

  17. 16
    © 2021 Ateam Inc. 16
    本題に入る前に

    View Slide

  18. 17
    © 2021 Ateam Inc. 17
    SSR / SG / ISR

    View Slide

  19. 18
    © 2021 Ateam Inc. 18
    この3つの用語を居酒屋を例にしておさらい

    View Slide

  20. 19
    © 2021 Ateam Inc. 19
    SSR (Server Side Rendering)

    View Slide

  21. 20
    © 2021 Ateam Inc. 20
    注文を受けて、
    その都度ドリンクを注いで提供

    View Slide

  22. 21
    © 2021 Ateam Inc. 21
    時間はかかるがキンキンに冷えている
    (リアルタイム志向)

    View Slide

  23. 22
    © 2021 Ateam Inc. 22
    SG (Static Generate)
    (少し前まで SSG と呼ばれていた)

    View Slide

  24. 23
    © 2021 Ateam Inc. 23
    開店前にドリンクを作り置きしておく

    View Slide

  25. 24
    © 2021 Ateam Inc. 24
    提供は爆速
    しかし鮮度は保証できない
    ※注文が入ってもストックの数は減らない

    View Slide

  26. 25
    © 2021 Ateam Inc. 25
    ISR (Incremental Static Regenerate)

    View Slide

  27. 26
    © 2021 Ateam Inc. 26
    作り置きするのはSGと同じ
    ドリンクを提供した際に
    鮮度が落ちていたら次の注文に備えて作り直す

    View Slide

  28. 27
    © 2021 Ateam Inc. 27
    提供は爆速
    注文頻度の高いメニューは鮮度良

    View Slide

  29. 28
    © 2021 Ateam Inc. 28
    今日お話するライフドットではISRを採用しています
    そしてVercelにデプロイしています

    View Slide

  30. 29
    © 2021 Ateam Inc. 29
    前提知識のインストールができたところで本題

    View Slide

  31. 30
    © 2021 Ateam Inc. 30
    70万通りのURLを持つサービスを
    Next.jsに導入する際の一番大きな壁

    View Slide

  32. 31
    © 2021 Ateam Inc. 31
    デプロイ時間

    View Slide

  33. 32
    © 2021 Ateam Inc. 32
    70万通りのページを生成するのにどれだけ時間がかかるか?

    View Slide

  34. 33
    © 2021 Ateam Inc. 33
    1ページ生成100msと仮定しても

    View Slide

  35. 34
    © 2021 Ateam Inc. 34
    約19時間半

    View Slide

  36. 35
    © 2021 Ateam Inc. 35
    デプロイで1日が終わってしまう

    View Slide

  37. 36
    © 2021 Ateam Inc. 36
    先程の居酒屋の例で解決策を探る

    View Slide

  38. 37
    © 2021 Ateam Inc. 37
    メニューが多い居酒屋はどうしているのか?

    View Slide

  39. 38
    © 2021 Ateam Inc. 38
    人気メニューや手間のかかるメニューは
    作り置き(仕込みを)して

    View Slide

  40. 39
    © 2021 Ateam Inc. 39
    それ以外のメニューは
    注文を受けてから作っている

    View Slide

  41. 40
    © 2021 Ateam Inc. 40
    実際のサービスに当てはめると

    View Slide

  42. 41
    © 2021 Ateam Inc. 41
    PV上位コンテンツをデプロイ時に生成し

    View Slide

  43. 42
    © 2021 Ateam Inc. 42
    それ以外はリクエストのタイミングで生成して
    以降のリクエストはキャッシュを返却する

    View Slide

  44. 43
    © 2021 Ateam Inc. 43
    ということができればデプロイ時間を短縮できるし
    パフォーマンスも問題なさそう

    View Slide

  45. 44
    © 2021 Ateam Inc. 44
    ではNext.jsにおいてビルドするターゲットは何で決まるのか

    View Slide

  46. 45
    © 2021 Ateam Inc. 45
    getStaticPaths: SG/ISRのデプロイ時のビルドターゲット(パス)を決定する関数
    返り値に fallback: true(or "blocking") を指定すると、
    ビルドターゲットにないパスでリクエストを受けた際にビルドを行う。(遅延ビルド)

    View Slide

  47. 46
    © 2021 Ateam Inc. 46
    getStaticPathsの設定で
    3種類のデプロイパータンを作ることができる

    View Slide

  48. 47
    © 2021 Ateam Inc. 47
    フルデプロイビルドパターン 全ページをデプロイ時にビルド
    • 全ページ一定のアクセス量があるページ群に有効
    • BFFと通信してコンテンツを生成する場合、最大でも4桁程度のページ数が現実的
    フルデプロイビルドパターン
    [slag].tsx
    PV

    PV

    View Slide

  49. 48
    © 2021 Ateam Inc. 48
    フルリクエストビルドパターン デプロイ時のビルドを全スキップし、リクエスト時にビルド
    • デプロイは高速 <> 初アクセスはコンテンツを生成する分、多少TTFBが遅くなる
    • URLパターンがかけ合わせ等で指数関数的に増加するページ群に有効
    フルリクエストビルドパターン
    product/[id]/sub.tsx
    PV

    PV

    View Slide

  50. 49
    © 2021 Ateam Inc. 49
    ハイブリッドビルドパターン 一部のページをデプロイ時、それ以外をリクエスト時にビルド
    • アクセス数に偏りがあるページ群で強い効果を発揮 (例: 主要都市と地方)
    • デプロイ時間と相談しながらビルド対象数を選択する
    デプロイビルド リクエストビルド
    search/[prefecture]/[city]/[condition].tsx
    PV

    PV

    View Slide

  51. 50
    © 2021 Ateam Inc. 50
    この3種類を適切に設定し

    View Slide

  52. 51
    © 2021 Ateam Inc. 51
    ライフドットでは全PVにおける6~7割が
    初回アクセスでもビルド済みURLに到達できるようにした
    (※PVの分散は均一ではないことに注意)

    View Slide

  53. 52
    © 2021 Ateam Inc. 52
    記事 霊園リスト&検索 霊園詳細
    フルデプロイビルド ハイブリッドビルド(単一条件)
    +
    フルリクエストビルド(掛合わせ条件)
    ハイブリッドビルド(メインページ)
    +
    フルリクエストビルド(サブページ)

    View Slide

  54. 53
    © 2021 Ateam Inc. 53
    デプロイに要する時間はこうなった

    View Slide

  55. 54
    © 2021 Ateam Inc. 54
    記事 霊園リスト&検索 霊園詳細
    フルデプロイビルド ハイブリッドビルド(単一条件)
    +
    フルリクエストビルド(掛合わせ条件)
    ハイブリッドビルド(メインページ)
    +
    フルリクエストビルド(サブページ)
    45分

    View Slide

  56. 55
    © 2021 Ateam Inc. 55
    しかし

    View Slide

  57. 56
    © 2021 Ateam Inc. 56
    Vercel(チームプラン)の
    パイプラインのタイムアウトは45分

    View Slide

  58. 57
    © 2021 Ateam Inc. 57
    45分の間にビルドだけでなく
    エッジへの配備まで完了させなければならない

    View Slide

  59. 58
    © 2021 Ateam Inc. 58
    ビルド時間の長さに比例してエラーの発生確率も上がる
    デプロイ終盤のエラー発生は辛いので
    15分くらいでデプロイが完了できればなあ。。。

    View Slide

  60. 59
    © 2021 Ateam Inc. 59
    ならば
    さらにデプロイ時間を短縮!

    View Slide

  61. 60
    © 2021 Ateam Inc. 60
    さっきの居酒屋の例に話を戻そう

    View Slide

  62. 61
    © 2021 Ateam Inc. 61

    View Slide

  63. 62
    © 2021 Ateam Inc. 62

    View Slide

  64. 63
    © 2021 Ateam Inc. 63
    目的別でサービスを縦割りし
    それぞれのデプロイを独立して行うことで時間短縮

    View Slide

  65. 64
    © 2021 Ateam Inc. 64
    www.lifedot.jp
    Vercel
    ・・・
    ・・・

    View Slide

  66. 65
    © 2021 Ateam Inc. 65
    product.vercel.lifedot.jp
    search.vercel.lifedot.jp article.vercel.lifedot.jp
    目的別でサービスを縦割り

    View Slide

  67. 66
    © 2021 Ateam Inc. 66
    www.lifedot.jp
    /db/*/
    /pref-*/city-*/*/
    /pref-*/st-*/*/
    /pref-*/cond-*/*/
    /ohaka/[a-z]+/
    product.vercel.lifedot.jp
    article.vercel.lifedot.jp
    search.vercel.lifedot.jp
    CDN
    (CloudFront)
    +
    エッジコンピューティング
    (LambdaEdge)
    で統合

    View Slide

  68. 67
    © 2021 Ateam Inc. 67
    この構成でTTFBは50ms~100ms強
    ※通信環境によって多少異なる
    ※それぞれ計測しているページは別(無作為に選別)

    View Slide

  69. 68
    © 2021 Ateam Inc. 68
    十分な速度が出ている
    (Googleは200msを下回ること推奨している)

    View Slide

  70. 69
    © 2021 Ateam Inc. 69
    そして肝心なビルド時間は

    View Slide

  71. 70
    © 2021 Ateam Inc. 70
    記事 霊園リスト&検索 霊園詳細
    15分 15分 15分
    それぞれ並行してビルドされるので
    15分に短縮

    View Slide

  72. 71
    © 2021 Ateam Inc. 71
    🎉

    View Slide

  73. 72
    © 2021 Ateam Inc. 72
    そもそもどうやってサービスのコードを分割するのか?

    View Slide

  74. 73
    © 2021 Ateam Inc. 73
    一部分の変更で
    全体のデプロイが実行されるのは効率が悪い

    View Slide

  75. 74
    © 2021 Ateam Inc. 74
    リポジトリを分ける?
    共有レイアウト・コンポネントはどうする?

    View Slide

  76. 75
    © 2021 Ateam Inc. 75
    開発も効率化したい!

    View Slide

  77. 76
    © 2021 Ateam Inc. 76
    Nxでのモノレポ戦略を採用

    View Slide

  78. 77
    © 2021 Ateam Inc. 77
    NxとはJSベースのモノレポ用開発ツール

    View Slide

  79. 78
    © 2021 Ateam Inc. 78
    特徴

    View Slide

  80. 79
    © 2021 Ateam Inc. 79
    Storybook, Cypress, Jest, ESLint
    などが標準配備される
    テストを書く文化を浸透させやすい
    https://nx.dev

    View Slide

  81. 80
    © 2021 Ateam Inc. 80
    package.json と node_modules がリポジトリに1つなので
    依存パッケージのアップデートなどバージョン管理が楽
    ※よく比較にあがる lerna などはルートと各appごとに発生する
    (ただし志向や用途が違うので単純比較していいものではない)

    View Slide

  82. 81
    © 2021 Ateam Inc. 81
    vs code や IntelliJ用の公式プラグインがあり
    クリックでビルド&サーブしたりテスト実行できる
    複雑なコマンド学習をメンバーに強要しなくて良い

    View Slide

  83. 82
    © 2021 Ateam Inc. 82
    appsとlibsが基本構造
    共通モジュールはlibsに配備
    自動的にプロジェクト名でエイリアスされる
    無意識的にnpmモジュールライクな参照が可能
    import { Header } "@lifedot/components"
    import { useStockList } "@lifedot/hooks"
    libs
    apps
    article
    search
    product
    components
    relay(graphql)
    hooks, router, layouts, ...etc.
    @lifedot/components

    View Slide

  84. 83
    © 2021 Ateam Inc. 83
    apps
    article
    search
    product
    product.vercel.lifedot.jp
    search.vercel.lifedot.jp
    article.vercel.lifedot.jp
    Vercel の "Ignored Build Step" と組み合わせることで
    変更が生じたappsのみデプロイできる


    update

    View Slide

  85. 84
    © 2021 Ateam Inc. 84
    各PJが独立して15分でデプロイが可能
    &
    プロジェクトを絞ってデプロイできるようになった

    View Slide

  86. 85
    © 2021 Ateam Inc. 85
    🎉

    View Slide

  87. 86
    © 2021 Ateam Inc. 86
    今日紹介したこと

    View Slide

  88. 87
    © 2021 Ateam Inc. 87
    1. 3パターンのデプロイ方法と遅延ビルドの活用
    • フルデプロイビルド
    • フルリクエストビルド
    • ハイブリッドビルド
    2. サービスの縦割りと
    CDN+エッジコンピューティングによる統合
    3. Nxによるリポジトリのモノレポ化

    View Slide

  89. 88
    © 2021 Ateam Inc. 88
    今日紹介しきれなかったこと

    View Slide

  90. 89
    © 2021 Ateam Inc. 89
    1. バンドルサイズの削減格闘記
    2. 効率の良いキャッシュを目指した変動 revalidate
    3. GraphQLによるパフォーマンス改善の話

    View Slide

  91. 90
    © 2021 Ateam Inc. 90
    またの機会にお話させていただきます

    View Slide

  92. 91
    © 2021 Ateam Inc. 91
    ご質問やもっと詳しく聞きたい方は Twitter でどうぞ!
    @aiji42_dev

    View Slide

  93. 92
    ITにできることを、次々と。

    View Slide