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
200
Next.jsとTurborepoで挑む! マイクロフロントエンドのリアル
reiwa-travel
June 12, 2024
Tweet
Share
More Decks by reiwa-travel
See All by reiwa-travel
NEWT-Tech-Talk_Daisuke-Miyata_20240827
reiwatravel_0405
0
17
reiwatravel_company‐deck
reiwatravel_0405
0
8.9k
reiwatravel_company‐deck_engineering
reiwatravel_0405
0
1.9k
docswell-KJ4GN1.pdf
reiwatravel_0405
0
44
NEWTの10Xを実現する プロダクト優先順位の考え方について
reiwatravel_0405
0
150
NEWT Tech Talk vol.8_事業フェーズに応じて開発スタイルをアップデートしてきた話
reiwatravel_0405
0
130
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Adopting Sorbet at Scale
ufuk
73
8.9k
The Pragmatic Product Professional
lauravandoore
31
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Testing 201, or: Great Expectations
jmmastey
38
7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Designing for humans not robots
tammielis
249
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
A Philosophy of Restraint
colly
202
16k
RailsConf 2023
tenderlove
28
840
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のフロントエンドへの適⽤ • 独⽴デプロイ • 障害の分離
※ 厳密にはマイクロサービスに対する原則であり、いくつか存在する原則から⼀部を抜粋したもの