MS_SpaServices - NetDevInfraWGinOSSConsortium/NetDevInfraWiki GitHub Wiki

Spa Services

概要

SPA を構築する場合に一般的に便利なインフラストラクチャを提供する。

詳細

SpaServices

SPA フレームワークやライブラリを使用する。

SpaTemplates

  • Webpack とクライアント側アセットをビルドする。

  • これは、Visual Studio標準テンプレート生成の基盤となっている、
    dotnet new XXX（SPA 系引数）は、コレによって実装されている。

補足（SpaServices が提供していた機能）: 原文は簡潔なので、
何が「便利なインフラストラクチャ」だったのかを具体化しておく。

機能 内容
Webpack Dev Middleware webpack-dev-server を .NET プロセスから起動し、リクエストをプロキシ
Hot Module Replacement（HMR） ファイル変更時にブラウザを再読込せずに差し替え
サーバー サイド プリレンダリング 初回表示を Node.js 側で HTML にして返す（SEO・初期表示速度）
MapSpaFallbackRoute どの URL でも index.html を返す（クライアント側ルーティングのため） ★ 
// 当時の Startup.cs
app.UseSpaStaticFiles();
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
        // または spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

移行メモ（現況：大半が廃止、一部だけ残った）: SpaServices は
廃止されたが、すべてが消えたわけではない——
ここが分かりにくい点なので整理する。

パッケージ 状況
Microsoft.AspNetCore.SpaServices 廃止（.NET 5 で提供終了）
Microsoft.AspNetCore.NodeServices 廃止（Node Services）
Microsoft.AspNetCore.SpaTemplates 廃止（テンプレートは dotnet new に統合後、縮小）
Microsoft.AspNetCore.SpaServices.Extensions 残った（機能を絞って継続） 
【Extensions に残った機能】
   ・UseSpa / UseSpaStaticFiles（index.html へのフォールバック）
   ・UseProxyToSpaDevelopmentServer（開発サーバへのプロキシ）★
   ・UseAngularCliServer / UseReactDevelopmentServer

【消えた機能】
   ・Webpack Dev Middleware（.NET から webpack を直接動かす）
   ・サーバー サイド プリレンダリング（Node.js を本番で抱える方式）

残った機能と消えた機能の境目に、設計判断が表れている。

【残ったもの】 .NET 側で完結する、薄い機能
     → HTML を返す、プロキシする
【消えたもの】 .NET が Node.js の面倒を見る、厚い機能
     → ビルド、SSR

さらに .NET 8 以降、テンプレートも変わった。

【.NET 8 以降の SPA テンプレート】
   ・Visual Studio の【JavaScript プロジェクト（.esproj）】を使う ★
      → フロントは【独立したプロジェクト】になった
      → [.esproj（JavaScript・TypeScriptプロジェクトシステム）] 参照
   ・バックエンドとフロントエンドがソリューション内で【分離】
   ・Vite が既定のビルド ツールに（React テンプレート）

これは ASP.NET Core SPAテンプレート の
原文が主張していた「フロントとバックを分離せよ」に、
Microsoft 自身が寄せた形である。

補足（現在の SPA + ASP.NET Core の構成）: 実務でよく採られる
3 つの構成を挙げておく。

① 完全分離（推奨）

【フロント】 別プロジェクト（Vite + React/Vue/Angular）
              → 静的ファイルとして CDN / Static Web Apps に配置
【バック】   ASP.NET Core Web API（JSON を返すだけ）

 ・開発時は Vite の dev server（プロキシで API を叩く）
 ・CORS または同一ドメイン（リバース プロキシ）で繋ぐ
 ・【それぞれ独立してデプロイ・スケールできる】★

② 同一プロジェクトで配信（中間）

app.UseStaticFiles();
app.MapControllers();
app.MapFallbackToFile("index.html");   // ← SPA のルーティング対応
 ・ビルド済みの SPA を wwwroot に置いて、ASP.NET Core が配信
 ・デプロイが 1 つで済む（小規模なら楽）
 ・SpaServices を使わずに実現できる ★

③ SpaServices.Extensions を使う（開発時のプロキシ）

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (app.Environment.IsDevelopment())
        spa.UseProxyToSpaDevelopmentServer("http://localhost:5173");
});
 ・開発時、.NET のポートに来たリクエストを Vite に転送
 ・F5 一発で両方立ち上がる（開発体験は良い）
 ・ただし、【フロントの起動を .NET が管理する】という
   廃止された方式の名残でもある

MapFallbackToFile の意味（②で最重要）:

【なぜ必要か】
   SPA は【クライアント側でルーティング】する
     /products/5 は SPA 内部の画面であり、サーバにファイルはない

   ① 利用者が画面内で遷移 → JS が処理。サーバに問い合わせない ○
   ② 利用者が /products/5 を【直接開く・再読込する】
        → サーバに GET /products/5 が飛ぶ
        → ファイルがないので【404】 ✗

【解】 どの URL でも index.html を返し、あとは JS に任せる
       → MapFallbackToFile("index.html")

API のルートより後に書く必要がある
（先に書くと API まで index.html が返る）。

参考

Microsoft Learn

Tags: 移行, プログラミング, .NET開発, .NET Core, ASP.NET, ASP.NET MVC

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

⚠️ **GitHub.com Fallback** ⚠️