Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next.jsとTurborepoで挑む! マイクロフロントエンドのリアル
Search
reiwa-travel
June 12, 2024
0
700
Next.jsとTurborepoで挑む! マイクロフロントエンドのリアル
reiwa-travel
June 12, 2024
Tweet
Share
More Decks by reiwa-travel
See All by reiwa-travel
QA Career Talk vol.5 〜QAエンジニアの生存戦略~
reiwatravel_0405
0
170
20250527_NEWT‐Tech-Talk_semba
reiwatravel_0405
0
320
20250527_NEWT‐Tech-Talk_hosoi
reiwatravel_0405
0
270
20250527_NEWT‐Tech-Talk_fukuda
reiwatravel_0405
0
310
20250527_NEWT‐Tech-Talk_magara
reiwatravel_0405
0
340
reiwatravel_20250416_vpoe-magara_lt
reiwatravel_0405
1
1.4k
reiwatravel_20250225-newt-tech-talk-14_lt2
reiwatravel_0405
1
360
20241128_NEWT‐Tech-Talk_nakano
reiwatravel_0405
0
170
CTO-of-the-year-2024_reiwatravel
reiwatravel_0405
0
100
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Making Projects Easy
brettharned
116
6.3k
Embracing the Ebb and Flow
colly
86
4.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
What's in a price? How to price your products and services
michaelherold
246
12k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GraphQLとの向き合い方2022年版
quramy
49
14k
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
Next.jsとTurborepoで挑む! マイクロフロントエンドのリアル
2 @_yamatsum @yamatsum 令和トラベル / Frontend Team 松本
泰幸 ⾃⼰紹介 前職 LINEヤフー DevOps、CI/CD 1歳の⼦供👶 好きなVim Neovim
AGENDA 3 1. マイクロフロントエンドってなに? 2. NEWTが実践するマイクロフロントエンド 3. 何がうれしい? 4. 何が困った?どう対処してる?
© 2023 Reiwa Travel, Inc. マイクロフロントエンドって なに?
5 マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの”
6 マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの” BE FE BE FE BE BE モノリス
マイクロサービス
7 マイクロフロントエンドとは “マイクロサービスアーキテクチャの概念をフロントエンドに拡張したもの” BE FE BE FE BE BE モノリス
マイクロサービス BE FE BE BE マイクロフロントエンド FE FE
8 マイクロフロントエンドの設計 • 定義 ◦ ⽔平分割 or 垂直分割 • 構成(⽔平分割)
◦ クライアントサイド‧エッジサイド‧サーバサイド • ルーティング(垂直分割) • コミュニケーション(データのやり取り) ◦ Webストレージ、クエリ⽂字列、カスタムイベント 出典:マイクロフロントエンドの組成パターン より Fig. 84 vertical-and-horizontal-segmentation
© 2023 Reiwa Travel, Inc. NEWTが実践する マイクロフロントエンド
10 NEWTのフロントエンドの基本構成 • Turborepoでモノレポを構成 • 全てのWebアプリはNext.jsで作成 ◦ Webアプリは4つ ◦ Pages
Router • APIとの疎通はGraphQL • チームは4(+1)⼈ apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - (後で説明) packages ui - UIライブラリ core - (後で説明)
NEWTでのマイクロフロントエンド 11 ⽔平分割 各LPはデザイナーがWebflowで作成している ツアーの価格など動的なコンテンツの表⽰が必要になる ツアーカードごとにiframeを利⽤してビューを作成している apps tour - 海外ツアー
hotel - 海外ホテル magazine - 旅⾏ガイド frame - iframe⽤
NEWTでのマイクロフロントエンド 12 垂直分割 Next.jsのbasePathを利⽤してエンドポイントごとでrewriteを⾏う アプリが異なっても全て同⼀ドメインになる newt.net / /hotel /mag tour(旅行ツアー)
hotel(旅行ホテル) magazine(旅行ガイド) れ rewrite rewrite
© 2023 Reiwa Travel, Inc. 何が良かった?
14 良かったこと • ⼩さなデプロイ ◦ Preview環境が独⽴する • 障害の分離 ◦ デバッグ
◦ ロールバック • 保守のしやすさ • 段階的なローンチ
© 2023 Reiwa Travel, Inc. 何が困った?どうカバーしてる?
16 困ったこと① • コードの重複 e.g. hotelの詳細ページ /hotel/[id] /hwi/hotel-[id] newt.net /
/hotel /mag tour hotel magazine tour hotel
17 困ったこと① - コードの重複の対処 • コードの共有化 • モノレポのルートでGraphQL codegenを⾏う ◦
schemaから⽣成した型もcoreに配置する ◦ codegenのpluginやconfigは揃える必要がある apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - iframe⽤ packages ui - UIライブラリ core - ロジックを含む共通ライブラリ
18 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント
▪ next/image → _next/image ▪ ISR → _next/data
19 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント
▪ next/image → _next/image ▪ ISR → _next/data
20 困ったこと② - Next.js固有のrewriteやbasePathの問題 2023/10 2023/12 2024/1 2024/4
21 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント
▪ next/image → _next/image ▪ ISR → _next/data
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 困ったこと② - 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 困ったこと② • Next.js固有のrewriteやbasePathの問題 ◦ バグが多い ◦ 例外が許されない ◦ build成果物のエンドポイント
▪ next/image → <basePath>/_next/image ▪ ISR → <basePath>/_next/data
25 困ったこと③ • ライブラリの管理 ◦ 同⼀ライブラリの複数バージョンが存在しえる • Dependabotに頼る ◦ workspaceをみてPRを⾃動⽣成してくれる
◦ PRが溜まらない仕組みを作る https://engineering.reiwatravel.co.jp/blog/frontend-library-update
26 困ったこと④ • 観測性の低下 ◦ アプリケーションログはSentryで検知してSlack通知 ◦ アクセスログやそのほかのエラーログはプロジェクトごとに分散 • VercelのLogDrainでCloud
Loggingに集約
27 困ったこと⑤ • プレビュー環境 ◦ アプリの向き先が異なる ◦ 認証をアプリごとに設定する必要がある • PRごとに環境変数を設定する
• VercelのPassword ProtectionはProプランでは課⾦が必要 ◦ middlewareでアプリごとにBasic認証を設定する
28 まとめ • マイクロフロントエンドによりデプロイは⼩さくなり、 独⽴した開発が可能になる • Next.jsのrewriteやbasePathには落とし⽳が多い • 全てのプロジェクトやチームに当てはまるものではなく、利点が⽋点 を上回った時は武器になり得る
フロントエンジニア募集中 旅⾏ドメイン✖モダンスタック
Thank you! 30
31 マイクロフロントエンドの原則 • ビジネスドメインのモデル化 ◦ DDDのフロントエンドへの適⽤ • 独⽴デプロイ • 障害の分離
※ 厳密にはマイクロサービスに対する原則であり、いくつか存在する原則から⼀部を抜粋したもの