SPA モード LP と GitHub Pages デプロイのアーキテクチャ

SPA モード LP と GitHub Pages デプロイのアーキテクチャ An architecture diagram generated by Archify. GitHub Actions · deploy.yml · ビルド & デプロイ · GitHub Actions GitHub Actions deploy.yml Vite ビルド · SPA + prerender · ビルド & デプロイ Vite ビルド SPA + prerender デプロイ構成 · subdir ・ 404.html · ビルド & デプロイ デプロイ構成 subdir ・ 404.html gh-pages ブランチ · peaceiris · ビルド & デプロイ gh-pages ブランチ peaceiris GitHub Pages · 静的配信 · Architecture component · GitHub GitHub Pages 静的配信 ブラウザ · SPA 起動 · SPA ランタイム ブラウザ SPA 起動 SPA シェル · _shell.html · SPA ランタイム SPA シェル _shell.html TanStack Router · クライアント遷移 · SPA ランタイム TanStack Router クライアント遷移 プリレンダルート · / ・ /features · SPA ランタイム プリレンダルート / ・ /features build dist/client push 配信 静的アセット 取得 起動 遷移 ビルド & デプロイ SPA ランタイム Legend Frontend Backend Cloud External

SPA モード

  • • Vite + @tanstack/react-start
  • • spa.prerender で / と /features を HTML 化
  • • base = /tanstack-start-gh-pages/

デプロイ

  • • GitHub Actions が dist/client をサブディレクトリへ展開
  • • 404.html と ルートリダイレクトを同梱
  • • peaceiris/actions-gh-pages で gh-pages へ push

配信

  • • GitHub Pages が静的配信
  • • SPA シェルでクライアント遷移
  • • base パスでアセットを解決