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

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

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

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

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

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

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

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

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

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

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

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

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

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

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) で統合

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

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

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

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

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

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

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

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

More Decks by AijiUejima

Other Decks in Technology

Featured

Transcript