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
180
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
350
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
Scaling GitHub
holman
459
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
4 Signs Your Business is Dying
shpigford
184
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Raft: Consensus for Rubyists
vanstee
140
7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Facilitating Awesome Meetings
lara
54
6.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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のフロントエンドへの適⽤ • 独⽴デプロイ • 障害の分離
※ 厳密にはマイクロサービスに対する原則であり、いくつか存在する原則から⼀部を抜粋したもの