Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

reiwa-travel
June 12, 2024
200

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

reiwa-travel

June 12, 2024
Tweet

Transcript

  1. 2
     @_yamatsum        @yamatsum 令和トラベル / Frontend Team 松本

    泰幸 ⾃⼰紹介 前職 LINEヤフー    DevOps、CI/CD 1歳の⼦供👶 好きなVim Neovim
  2. 8
 マイクロフロントエンドの設計 • 定義 ◦ ⽔平分割 or 垂直分割 • 構成(⽔平分割)

    ◦ クライアントサイド‧エッジサイド‧サーバサイド • ルーティング(垂直分割) • コミュニケーション(データのやり取り) ◦ Webストレージ、クエリ⽂字列、カスタムイベント 出典:マイクロフロントエンドの組成パターン より Fig. 84 vertical-and-horizontal-segmentation
  3. 10
 NEWTのフロントエンドの基本構成 • Turborepoでモノレポを構成 • 全てのWebアプリはNext.jsで作成 ◦ Webアプリは4つ ◦ Pages

    Router • APIとの疎通はGraphQL • チームは4(+1)⼈ apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - (後で説明) packages ui - UIライブラリ core - (後で説明)
  4. 14
 良かったこと • ⼩さなデプロイ ◦ Preview環境が独⽴する • 障害の分離 ◦ デバッグ

    ◦ ロールバック • 保守のしやすさ • 段階的なローンチ
  5. 17
 困ったこと① - コードの重複の対処 • コードの共有化 • モノレポのルートでGraphQL codegenを⾏う ◦

    schemaから⽣成した型もcoreに配置する ◦ codegenのpluginやconfigは揃える必要がある apps tour - 海外ツアー hotel - 海外ホテル magazine - 旅⾏ガイド frame - iframe⽤ packages ui - UIライブラリ core - ロジックを含む共通ライブラリ
  6. 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]
  7. 27
 困ったこと⑤ • プレビュー環境 ◦ アプリの向き先が異なる ◦ 認証をアプリごとに設定する必要がある • PRごとに環境変数を設定する

    • VercelのPassword ProtectionはProプランでは課⾦が必要 ◦ middlewareでアプリごとにBasic認証を設定する
  8. 31
 マイクロフロントエンドの原則 • ビジネスドメインのモデル化 ◦ DDDのフロントエンドへの適⽤ • 独⽴デプロイ • 障害の分離

    ※ 厳密にはマイクロサービスに対する原則であり、いくつか存在する原則から⼀部を抜粋したもの