MS_ASPNETSPA

ASP.NET SPA

• 戻る（ASP.NET、Single-page application）
  • ASP.NET SPA
  • SPAとMPA
  • Blazor

概要

• ASP.NETによる Single-page application 開発。
• ASP.NET Web APIとフロントエンド開発技術を組み合わせる。

補足（「ASP.NET SPA」という製品はない）: これは特定のフレームワーク名ではなく、
「サーバー側を ASP.NET Web API にし、
フロントを JavaScript の SPA にする」という構成の呼び名である。

歴史的には、Visual Studio 2012 の「ASP.NET Single Page Application」
テンプレート（Knockout + Upshot.js）に由来するが、
このテンプレート自体は早々に廃止された
（本ページ末尾の「全く流行らず」という評価もこれを指す。
SPAとMPAを参照）。

詳細

• Visual Studio（以下 VS）における SPA 開発サポートは劇的に進化している。

• 現在、様々な標準機能・拡張機能が提供されている。

  • Web Essentials＋
    ASP.NET Core SPAテンプレートのように
    無理やりフロントエンドを組み込む代わりに、
    バックエンドとフロントエンドを完全に分離して管理する方式が標準化。
  • .esproj（JavaScript/TypeScript プロジェクト）は、
    C# プロジェクト（.csproj）VB プロジェクト（.vbproj）とは別に、
    フロントエンド専用のプロジェクトファイル（.esproj）が導入された。

補足（この「分離」の意味）: VS 2022 で .esproj が導入された背景は、
「フロントエンドは npm のエコシステムに任せる」という割り切りである。

世代	方式	問題
VS 2012〜	SPA テンプレート（Knockout 同梱）	フレームワークが固定され、すぐ陳腐化
VS 2015〜	AddSpaStaticFiles / UseSpaProxy	.csproj が npm ビルドを呼ぶ。ビルドが遅く不安定
VS 2022〜	.esproj（別プロジェクト）	フロントは Vite / npm で独立。バックエンドと疎結合

実務上は、.esproj を使わず
**リポジトリを分ける（あるいはフォルダを分けて CI を分ける）**のも一般的で、
「.NET 側から見えなくする」ことが要点である。

Web Essentials

特に SPA 開発ではインストールすると良い。

補足: Web Essentials は Mads Kristensen 氏による VS 拡張の詰め合わせ。
現在は機能の多くが VS 本体に取り込まれるか、
個別の拡張に分割されている。

ASP.NET Core SPAテンプレート

最近の SPA による実装を希望する場合は、
ASP.NET Core の SPA テンプレートを使用すると良い。

補足（最新化）: ASP.NET Core の SPA テンプレートは変遷が激しい。

• Angular / React テンプレート（dotnet new angular / react）は
  .NET 8 以降、.esproj ベースの「Vite 前提」の構成に置き換えられた。
• 従来の Microsoft.AspNetCore.SpaServices（Node をサーバー内で起動する仕組み）は
  非推奨。Microsoft.AspNetCore.SpaProxy で
  「開発時だけ Vite の dev server にプロキシする」方式が標準になっている。

本番構成では、フロントは静的ファイルとして配信し
（CDN や wwwroot）、API とは CORS（CORS）または
同一オリジンのリバース プロキシで繋ぐのが定石である。

.esproj（JavaScript・TypeScriptプロジェクトシステム）

参考

• ASP.NET Web API
• WebAPIの認証
• クロス ドメイン接続 / CORS
• SPAとMPA
• Single-page application

補足（SPA の認証は Cookie か Bearer か）: SPA を作る際に
必ず判断が要るのが認証方式である。

構成	推奨
フロントと API が同一サイト	Cookie（SameSite=Lax ＋ アンチフォージェリ）
フロントと API が別オリジン	Bearer（JWT）／または BFF を立てて Cookie に寄せる

localStorage にトークンを保存する構成は
XSS 一発で全件持ち出されるため、現在は推奨されない
（OAuth 2.0 for Browser-Based Apps は BFF パターンを推奨）。
詳細は ASP.NET Core における 認証を参照。

---

Tags: 移行, .NET開発, .NET Core, ASP.NET, ASP.NET SPA, JavaScript