Asp .Net Core Spa (一) - 入門

第一次寫文章, 很久之前就想寫來着了, 文章哪里不清楚的, 也請多多提出意見。

最近發現用 .net core + spa (single page application) 這個組合的人也變多了, 所以寫一套 各種 關於 這個組合的實踐方案, 也算是留個記錄。

主要針對 .net core 2.1 以后的版本。主要原因是 之前的版本 spa 的實現還是基於 mvc 的pipeline 但是在 .net core 2.1 之后 引入了 UseSpa 這個 中間件后 Spa 已經完成了和mvc的分離 包括 SSR (服務端渲染)。

 

這是第一篇 入門 主要講解 .net core 的 基礎 spa 模版。項目案例用的 React， Angular 和 Vue 也類似， 不過Vue 貌似沒有和Cli的整合 API

 

1. 創建項目

新項目 -> .Net Core -> ASP .NET Core Web Application -> React.js (暫時不選 Redux, Redux 很重要 但是幾個框架都有自己不同的狀態管理)

這里用的 Core 2.2 和 2.1 沒什么太大變化

 

2. 項目目錄

.Net Core Spa 項目，和NodeJs 項目類似，不過以 .Net Core為服務端。 主要服務 包括 靜態文件，API 和 服務器渲染

./ClientApp Spa項目

./ClientApp/public Spa靜態資源

./ClientApp/build Spa靜態發布文件

 

3. 中間件和設置

主要套路都在這里

1. 定義Spa靜態文件根目錄，這里的文件 將被注冊到Spa靜態文件路由

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build";
});

,默認是用的是 CientApp/build. 所有在 這個文件夾下的文件 會被直接 映射到 root url 之下

例如: ClientApp/build/react.js 這個文件就會被 映射到 localhost:5000/react.js

 

2. 使用Spa靜態文件服務

app.UseSpaStaticFiles();

這個中間件將會啟用靜態文件映射

 

3. 使用Spa網頁

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

這個就是代替了mvc 渲染 spa的中間件了，在沒有服務器渲染的時候，我們定義了默認的SourcePath。

主要利用於跑node指令，和index.html入口無關，默認網頁入口是 Spa靜態文件根目錄/index.html

當然 這里例子用的是 UseReactDevelopmentServer 這個必須配合 create-react-app (react-script)使用， 他會創建一個node event 然后監控 console

當react-script 啟動的時候 會自動和 .net core產生proxy， 使你的.net core localhost 可以看見spa的頁面，不過編譯速度很慢。推薦關閉 使用 webpack-dev-server + api proxy 來提高開發速度

 

5. 修改中間件管道

默認的中間件管道並不是很完美，因為mvc中間件的性質 一旦請求進入了mvc中間件，請求是不會走道后面的中間件的。

這里就要修改中間件順序啦。。然后利用到我們偉大的 app.Map 和 app.MapWhen

app.UseHttpsRedirection();

app.Map("/api", apiApp => {
    apiApp.UseMvc(routes => routes.MapRoute("default", "{controller}/{action=Index}/{id?}"));
});

app.UseStaticFiles();
app.UseSpaStaticFiles();

我們把中間件改成這樣，用Map 來限制 只有 /api 的路由才能進入 mvc中間件，當然用MapWhen也是可以的.

兩者主要區別就在:

   1. Map只針對Url，而MapWhen側可以對整個請求作出判斷

   2. Map之后的Url會切除Map到的路由，而MapWhen則不變

我上面這個例子 在Map 檢測到 /api 后才會進入mvc, 但是進入mvc的時候 api其實已經被去掉了, 所以controller不再需要強制標明 api/[controller], 只需要 [controller] 即可

 

6. csproj

其實有很多編譯或者發布指令是通過項目的.csproj 來實現的

默認的指令有 DebugEnsureNodeEnv 和 PublishRunWebpack 分別是 npm install 和 npm install & run build

 

小結

項目本身其實很簡單，也很容易上手，配合mvc 搭建的api 和新一代的前端框架，.net core的性能和發布的簡易型，其實是可以嘗試的。

這里有個我一直在更新的Boilerplate項目 https://github.com/JiarongGu/ReactCoreTemplate

 

一篇一篇來吧。。下一篇就說說 SSR的問題