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
NEWT Tech Talk vol.7 Next.jsとTurborepoで挑む!マイクロフ...
Search
ya2s
April 24, 2024
0
110
NEWT Tech Talk vol.7 Next.jsとTurborepoで挑む!マイクロフロントエンドのリアル
ya2s
April 24, 2024
Tweet
Share
More Decks by ya2s
See All by ya2s
デザイン資産をレゴ化!MCPで誰でも作れるLP基盤
ya2s
0
400
Next.js Imageコンポーネントの 舞台裏をのぞく👀
ya2s
0
18
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Faster Mobile Websites
deanohume
310
31k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Thoughts on Productivity
jonyablonski
70
4.9k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Unsuck your backbone
ammeep
671
58k
How GitHub (no longer) Works
holman
315
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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のフロントエンドへの適⽤ • 独⽴デプロイ • 障害の分離
※ 厳密にはマイクロサービスに対する原則であり、いくつか存在する原則から⼀部を抜粋したもの