Skip to content

MS_ASPNETCoreSPATemplate

Jump to bottom
nishi_74322014 edited this page Aug 21, 2026 · 1 revision

ASP.NET Core SPAテンプレート

概要

補足（原文の見立ては的中した）: 「Visual Studio と統合させない方が良い」
という原文の結論は、その後の Microsoft 自身の方針転換と一致した。

時期 ASP.NET Core の SPA テンプレート
2.0〜2.2 JavaScript Services（SpaServices / NodeServices）で深く統合
3.0〜5.0 Microsoft.AspNetCore.SpaServices.Extensions に簡素化
2019 SpaServices / NodeServices の廃止が告知（後述）
.NET 6 以降 **dotnet new angular / react は\
フロントエンドを別プロセスで動かす**構成に
.NET 8 以降 dotnet new react 等を削除。\
**Visual Studio の「JavaScript/TypeScript プロジェクト（.esproj）」で\
フロントとバックを別プロジェクトにする**方式へ

つまり、「1 つのプロジェクトに SPA と ASP.NET Core を同居させる」
というモデル自体が公式に取り下げられ、
原文が推す**「分離する」**方式が現在の標準になっている。

テンプレート

Visual Studio標準テンプレート

ASP.NET Core Angularテンプレート

ASP.NET Core React.jsテンプレート

ASP.NET Core React+Reduxテンプレート

ASP.NET Core Vue.jsテンプレート

.NET Core SDK 2.0.x であれば、dotnet new vue で生成可能。

補足（現在のテンプレート事情／最新化）: dotnet new から
SPA テンプレートはほぼ姿を消した。

テンプレート 現況
dotnet new angular .NET 8 で削除
dotnet new react .NET 8 で削除
dotnet new reactredux .NET 6 で削除
dotnet new vue 公式には存在しない（コミュニティ製）
Visual Studio の「React and ASP.NET Core」等 現行（.esproj を使う 2 プロジェクト構成）

現在の推奨は次の 2 通りである。

【A】完全に分離する（最も一般的）
   frontend/   … npm create vite@latest 等で作る。独立して開発・ビルド
   backend/    … dotnet new webapi
     → CORS または前段のリバース プロキシで繋ぐ
     → CI/CD も別々に組める

【B】Visual Studio の「JavaScript プロジェクト（.esproj）」で束ねる
   MySolution.sln
     ├ MyApp.Client (.esproj)   … Vite / npm を VS が起動
     └ MyApp.Server (.csproj)   … ASP.NET Core
     → F5 で両方起動。プロキシ設定も雛形が入る

A が主流で、原文の主張（分離すべき）そのものである。
B は「Visual Studio で完結させたい」場合の折衷案にあたる。

なお、C# だけで SPA を書きたい場合は
Blazor（WebAssembly / Server / .NET 8 の統合モデル）が
別の選択肢として用意されている。

カスタム・テンプレート

Visual Studioを使用する。

前述のVisual Studio 標準テンプレートを
カスタマイズすれば良い。

Visual Studioを使用しない。

色々検討した結果、

  • SPA（フロントエンド）を、
  • ASP.NET Core（バックエンド）の

プロジェクトと結合させない方がイイと言う結論に至った。
（案の定、JavaScript Servicesも、廃止になったもよう。）

  • 理由

    • この理由は、例えば、
      create-react-appで、
      生成した場合、
      依存関係（Webpack、Babel、ESLint など）が隠蔽されイイ感じになるため。

    • これ（フロントエンド）を、バックエンドのプロジェクトと結合する場合は、
      必要に応じて、
      npm run eject でコレらの依存関係を取り出してカスタマイズする必要がある（と思われる）。

    • しかし、フロントエンドの専門性が高いので、
      ココはバイリンガルにしない方が最適であると考える。

      • 習得コストが高いためバイリンガルは困難。
        ・フロントエンド・エンジニアがバックエンドを追加で覚える。
        ・バックエンド・エンジニアがフロントエンドを追加で覚える。

      • （Cordova＋Reactなど）
        フロントエンドに限定すれば、
        組み合わせの情報は、割と見つかることがあるがバックエンドは...。

  • 移行

    • Visual Studio 標準テンプレートがなかなか良くできている。

    • こちらは、TypeScriptを使用しているため、
      必要に応じて移行が必要になる。

      • コチラを参考にして任意の ECMAScript バージョンにコンパイル可能。
      • 以下のコマンドでイイ感じにコンパイルで変換できた。
tsc --noImplicitUseStrict --target es2015

補足（分離した場合の繋ぎ方）: 原文の結論に沿って分離する場合、
開発時と本番で繋ぎ方が変わる点が実務上の要点になる。

【開発時】フロントの開発サーバ（Vite / webpack-dev-server）を使う
   ブラウザ → localhost:5173（Vite）
                └ /api/* だけを localhost:5001（ASP.NET Core）へプロキシ
     → ホット リロードが効く。CORS も不要

【本番】ビルド済みの静的ファイルを配信する
   (a) ASP.NET Core の wwwroot に配置して同一オリジンで配信
   (b) CDN / 静的ホスティングに置き、API だけ ASP.NET Core（要 CORS）

// vite.config.js（開発時のプロキシ）
export default {
  server: {
    proxy: { '/api': { target: 'https://localhost:5001', secure: false } }
  }
}
// (a) SPA を同一オリジンで配信する場合
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllers();
app.MapFallbackToFile("index.html");   // クライアント側ルーティングに委ねる

MapFallbackToFile が要点で、
これが無いと SPA のディープ リンク（/users/1 を直接開く）が 404 になる。

(a) を選べば CORS も認証 Cookie の問題も起きないため、
「プロジェクトは分けるが、配信は同一オリジン」
という構成が実務では扱いやすい。

補足（npm run eject は現在ほぼ不要）: 原文が触れている
create-react-app の eject は、
CRA 自体が非推奨（React 公式のドキュメントから削除）となったため、
現在は前提が変わっている。

用途 現在の第一候補
React の雛形 Vite（npm create vite@latest）
フルスタック React Next.js
Angular Angular CLI（ng new）
Vue Vite（npm create vue@latest）

Vite は設定ファイル（vite.config.js）が最初から見えるため、
eject に相当する操作が不要である。

参考

JavaScript Services

案の定、廃止とのこと。

Visual Studio CodeによるSPA開発

コレから MS 界隈でもデファクト化していく見込み。

補足: この見立ても的中しており、
フロントエンド開発は Visual Studio Code が事実上の標準
になった。ASP.NET Core 側も VS Code + C# Dev Kit で開発できるため、
「フロントは VS Code、バックエンドは Visual Studio」という
使い分けをする必要も薄れている。

CodeZine（コードジン）

ASP.NET Core 2.0でSPAテンプレートを使おう

Microsoft Learn

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

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally