Next.jsとTurborepoで挑む！ マイクロフロントエンドのリアル

Transcript

1. Next.jsとTurborepoで挑む！ マイクロフロントエンドのリアル
2. 2
     @_yamatsum        @yamatsum 令和トラベル / Frontend Team 松本 泰幸 ⾃⼰紹介 前職 LINEヤフー    DevOps、CI/CD 1歳の⼦供👶 好きなVim Neovim
3. AGENDA
 3
 1. マイクロフロントエンドってなに？ 2. NEWTが実践するマイクロフロントエンド 3. 何がうれしい？ 4. 何が困った？どう対処してる？
4. © 2023 Reiwa Travel, Inc.
 マイクロフロントエンドって なに？
5. 5
 マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの”
6. 6
 マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの” BE FE BE FE BE BE モノリス マイクロサービス
7. 7
 マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの” BE FE BE FE BE BE モノリス マイクロサービス BE FE BE BE マイクロフロントエンド FE FE
8. 8
 マイクロフロントエンドの設計 • 定義 ◦ ⽔平分割 or 垂直分割 • 構成（⽔平分割） ◦ クライアントサイド‧エッジサイド‧サーバサイド • ルーティング（垂直分割） • コミュニケーション（データのやり取り） ◦ Webストレージ、クエリ⽂字列、カスタムイベント 出典：マイクロフロントエンドの組成パターン より Fig. 84 vertical-and-horizontal-segmentation
9. © 2023 Reiwa Travel, Inc.
 NEWTが実践する マイクロフロントエンド
10. 10
 NEWTのフロントエンドの基本構成 • Turborepoでモノレポを構成 • 全てのWebアプリはNext.jsで作成 ◦ Webアプリは４つ ◦ Pages Router • APIとの疎通はGraphQL • チームは4(+1)⼈ apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - (後で説明) packages ui - UIライブラリ core - (後で説明)
11. NEWTでのマイクロフロントエンド 11
 ⽔平分割 各LPはデザイナーがWebflowで作成している ツアーの価格など動的なコンテンツの表⽰が必要になる ツアーカードごとにiframeを利⽤してビューを作成している apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - iframe⽤
12. NEWTでのマイクロフロントエンド 12
 垂直分割 Next.jsのbasePathを利⽤してエンドポイントごとでrewriteを⾏う アプリが異なっても全て同⼀ドメインになる newt.net / /hotel /mag tour(旅行ツアー) hotel(旅行ホテル) magazine(旅行ガイド) れ rewrite rewrite
13. © 2023 Reiwa Travel, Inc.
 何が良かった？
14. 14
 良かったこと • ⼩さなデプロイ ◦ Preview環境が独⽴する • 障害の分離 ◦ デバッグ ◦ ロールバック • 保守のしやすさ • 段階的なローンチ
15. © 2023 Reiwa Travel, Inc.
 何が困った？どうカバーしてる？
16. 16
 困ったこと① • コードの重複 e.g. hotelの詳細ページ /hotel/[id] /hwi/hotel-[id] newt.net / /hotel /mag tour hotel magazine tour hotel
17. 17
 困ったこと① - コードの重複の対処 • コードの共有化 • モノレポのルートでGraphQL codegenを⾏う ◦ schemaから⽣成した型もcoreに配置する ◦ codegenのpluginやconfigは揃える必要がある apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - iframe⽤ packages ui - UIライブラリ core - ロジックを含む共通ライブラリ
18. 18
 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント ▪ next/image → _next/image ▪ ISR → _next/data
19. 19
 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント ▪ next/image → _next/image ▪ ISR → _next/data
20. 20
 困ったこと② - Next.js固有のrewriteやbasePathの問題 2023/10 2023/12 2024/1 2024/4
21. 21
 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント ▪ next/image → _next/image ▪ ISR → _next/data
22. 22
 困ったこと② - Next.js固有のrewriteやbasePathの問題 /hotel/[id] /hwi/hotel-[id] newt.net / /hotel /mag tour hotel magazine tour hotel /[country]/hotel-[id] rewrite? hotel?
23. 23
 困ったこと② - Next.js固有のrewriteやbasePathの問題 /hotel/[id] /hwi/hotel-[id] newt.net / /hotel /mag tour hotel magazine tour hotel hotel? /[country]/hotel-[id] rewrite? /hotel/[country]/hotel-[id]
24. 24
 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント ▪ next/image → <basePath>/_next/image ▪ ISR → <basePath>/_next/data
25. 25
 困ったこと③ • ライブラリの管理 ◦ 同⼀ライブラリの複数バージョンが存在しえる • Dependabotに頼る ◦ workspaceをみてPRを⾃動⽣成してくれる ◦ PRが溜まらない仕組みを作る https://engineering.reiwatravel.co.jp/blog/frontend-library-update
26. 26
 困ったこと④ • 観測性の低下 ◦ アプリケーションログはSentryで検知してSlack通知 ◦ アクセスログやそのほかのエラーログはプロジェクトごとに分散 • VercelのLogDrainでCloud Loggingに集約
27. 27
 困ったこと⑤ • プレビュー環境 ◦ アプリの向き先が異なる ◦ 認証をアプリごとに設定する必要がある • PRごとに環境変数を設定する • VercelのPassword ProtectionはProプランでは課⾦が必要 ◦ middlewareでアプリごとにBasic認証を設定する
28. 28
 まとめ • マイクロフロントエンドによりデプロイは⼩さくなり、 独⽴した開発が可能になる • Next.jsのrewriteやbasePathには落とし⽳が多い • 全てのプロジェクトやチームに当てはまるものではなく、利点が⽋点 を上回った時は武器になり得る
29. フロントエンジニア募集中 旅⾏ドメイン✖モダンスタック
30. Thank you!
 30
31. 31
 マイクロフロントエンドの原則 • ビジネスドメインのモデル化 ◦ DDDのフロントエンドへの適⽤ • 独⽴デプロイ • 障害の分離 ※ 厳密にはマイクロサービスに対する原則であり、いくつか存在する原則から⼀部を抜粋したもの