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

by reiwa-travel

Slide 1

Slide 1 text

Slide 2

Slide 2 text

2  @_yamatsum @yamatsum 令和トラベル / Frontend Team 松本泰幸⾃⼰紹介前職 LINEヤフー DevOps、CI/CD 1歳の⼦供👶 好きなVim Neovim

Slide 3

Slide 3 text

AGENDA  3  1. マイクロフロントエンドってなに？ 2. NEWTが実践するマイクロフロントエンド 3. 何がうれしい？ 4. 何が困った？どう対処してる？

Slide 4

Slide 4 text

Slide 5

Slide 5 text

5  マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの”

Slide 6

Slide 6 text

6  マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの” BE FE BE FE BE BE モノリスマイクロサービス

Slide 7

Slide 7 text

7  マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの” BE FE BE FE BE BE モノリスマイクロサービス BE FE BE BE マイクロフロントエンド FE FE

Slide 8

Slide 8 text

8  マイクロフロントエンドの設計 ● 定義 ○ ⽔平分割 or 垂直分割 ● 構成（⽔平分割） ○ クライアントサイド‧エッジサイド‧サーバサイド ● ルーティング（垂直分割） ● コミュニケーション（データのやり取り） ○ Webストレージ、クエリ⽂字列、カスタムイベント出典：マイクロフロントエンドの組成パターンより Fig. 84 vertical-and-horizontal-segmentation

Slide 9

Slide 9 text

Slide 10

Slide 10 text

10  NEWTのフロントエンドの基本構成 ● Turborepoでモノレポを構成 ● 全てのWebアプリはNext.jsで作成 ○ Webアプリは４つ ○ Pages Router ● APIとの疎通はGraphQL ● チームは4(+1)⼈ apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - (後で説明) packages ui - UIライブラリ core - (後で説明)

Slide 11

Slide 11 text

NEWTでのマイクロフロントエンド 11  ⽔平分割各LPはデザイナーがWebﬂowで作成しているツアーの価格など動的なコンテンツの表⽰が必要になるツアーカードごとにiframeを利⽤してビューを作成している apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - iframe⽤

Slide 12

Slide 12 text

NEWTでのマイクロフロントエンド 12  垂直分割 Next.jsのbasePathを利⽤してエンドポイントごとでrewriteを⾏うアプリが異なっても全て同⼀ドメインになる newt.net / /hotel /mag tour(旅行ツアー) hotel(旅行ホテル) magazine(旅行ガイド) れ rewrite rewrite

Slide 13

Slide 13 text

Slide 14

Slide 14 text

14  良かったこと ● ⼩さなデプロイ ○ Preview環境が独⽴する ● 障害の分離 ○ デバッグ ○ ロールバック ● 保守のしやすさ ● 段階的なローンチ

Slide 15

Slide 15 text

Slide 16

Slide 16 text

16  困ったこと① ● コードの重複 e.g. hotelの詳細ページ /hotel/[id] /hwi/hotel-[id] newt.net / /hotel /mag tour hotel magazine tour hotel

Slide 17

Slide 17 text

17  困ったこと① - コードの重複の対処 ● コードの共有化 ● モノレポのルートでGraphQL codegenを⾏う ○ schemaから⽣成した型もcoreに配置する ○ codegenのpluginやconﬁgは揃える必要がある apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - iframe⽤ packages ui - UIライブラリ core - ロジックを含む共通ライブラリ

Slide 18

Slide 18 text

18  困ったこと② ● Next.js固有のrewriteやbasePathの問題 ○ バグが多い ○ 例外が許されない ○ build成果物のエンドポイント ■ next/image → _next/image ■ ISR → _next/data

Slide 19

Slide 19 text

19  困ったこと② ● Next.js固有のrewriteやbasePathの問題 ○ バグが多い ○ 例外が許されない ○ build成果物のエンドポイント ■ next/image → _next/image ■ ISR → _next/data

Slide 20

Slide 20 text

20  困ったこと② - Next.js固有のrewriteやbasePathの問題 2023/10 2023/12 2024/1 2024/4

Slide 21

Slide 21 text

21  困ったこと② ● Next.js固有のrewriteやbasePathの問題 ○ バグが多い ○ 例外が許されない ○ build成果物のエンドポイント ■ next/image → _next/image ■ ISR → _next/data

Slide 22

Slide 22 text

22  困ったこと② - Next.js固有のrewriteやbasePathの問題 /hotel/[id] /hwi/hotel-[id] newt.net / /hotel /mag tour hotel magazine tour hotel /[country]/hotel-[id] rewrite? hotel?

Slide 23

Slide 23 text

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]

Slide 24

Slide 24 text

24  困ったこと② ● Next.js固有のrewriteやbasePathの問題 ○ バグが多い ○ 例外が許されない ○ build成果物のエンドポイント ■ next/image → /_next/image ■ ISR → /_next/data

Slide 25

Slide 25 text

25  困ったこと③ ● ライブラリの管理 ○ 同⼀ライブラリの複数バージョンが存在しえる ● Dependabotに頼る ○ workspaceをみてPRを⾃動⽣成してくれる ○ PRが溜まらない仕組みを作る https://engineering.reiwatravel.co.jp/blog/frontend-library-update

Slide 26

Slide 26 text

26  困ったこと④ ● 観測性の低下 ○ アプリケーションログはSentryで検知してSlack通知 ○ アクセスログやそのほかのエラーログはプロジェクトごとに分散 ● VercelのLogDrainでCloud Loggingに集約

Slide 27

Slide 27 text

27  困ったこと⑤ ● プレビュー環境 ○ アプリの向き先が異なる ○ 認証をアプリごとに設定する必要がある ● PRごとに環境変数を設定する ● VercelのPassword ProtectionはProプランでは課⾦が必要 ○ middlewareでアプリごとにBasic認証を設定する

Slide 28

Slide 28 text

28  まとめ ● マイクロフロントエンドによりデプロイは⼩さくなり、独⽴した開発が可能になる ● Next.jsのrewriteやbasePathには落とし⽳が多い ● 全てのプロジェクトやチームに当てはまるものではなく、利点が⽋点を上回った時は武器になり得る

Slide 29

Slide 29 text

フロントエンジニア募集中旅⾏ドメイン✖モダンスタック

Slide 30

Slide 30 text

Thank you!  30

Slide 31

Slide 31 text

31  マイクロフロントエンドの原則 ● ビジネスドメインのモデル化 ○ DDDのフロントエンドへの適⽤ ● 独⽴デプロイ ● 障害の分離 ※ 厳密にはマイクロサービスに対する原則であり、いくつか存在する原則から⼀部を抜粋したもの