23 | 靜態(tài)文件中間件：前后端分離開發(fā)合并部署騷操作

這里還有一個比較特殊的用法

一般情況下，我們前后端分離的架構(gòu)，前端會編譯成一個 index.html 文件和若干個 CSS 文件和 JavaScript 和圖片文件

CSS 文件和 JavaScript 和圖片文件一般會部署在 CDN 服務(wù)器上，這個 index 文件就需要我們建立一個宿主來 host 它

并且前端的一般路由的話，我們現(xiàn)在都會用 HTML5 的 History 的路由模式

這個時候前端就會對后端有一個特殊的訴求，除了 API 的請求以外，其他的請求的響應(yīng)都應(yīng)該是 index.html 這個靜態(tài)文件

要達(dá)到這個目的，我們可以借助我們的中間件的執(zhí)行原理來實(shí)現(xiàn)

首先假設(shè)我們的 index.html 就是我們前端編譯好的靜態(tài)文件，我們放置在 wwwroot 下面，前端編譯的任何文件都放在 wwwroot 下面

然后我們再做一件事件就是 UseStaticFiles，我們把目錄訪問整個去掉

//services.AddDirectoryBrowser();

首先映射靜態(tài)文件

app.UseStaticFiles();

靜態(tài)文件映射出來之后實(shí)際上還有一個訴求，就是當(dāng)我們訪問其他特殊的頁面地址的時候，比如說 /order/get 這樣子的頁面的時候，也應(yīng)該響應(yīng)我們的靜態(tài)文件

這個時候我們可以把這樣一段邏輯加入進(jìn)來

// 判斷我們當(dāng)前的請求是否滿足條件 app.MapWhen(context => {// 如果我們的請求不是以 API 開頭的請求return !context.Request.Path.Value.StartsWith("/api"); }, appBuilder => {// 如果滿足條件，我就走我下面這一段中間件的邏輯var option = new RewriteOptions();// 重寫為 /index.htmloption.AddRewrite(".*", "/index.html", true);appBuilder.UseRewriter(option);// 重寫完之后再使用我們的靜態(tài)文件中間件appBuilder.UseStaticFiles(); });

這樣子可以達(dá)到一個效果就是我們訪問任意的非 API 目錄的時候，我們都可以得到 index.html

啟動程序

https://localhost:5001/api/weatherforecast

可以正常訪問

API 的請求我們都是讓它通過的，不是 API 的時候才會攔截

這個時候如果訪問

https://localhost:5001/order

會發(fā)現(xiàn)獲得的是靜態(tài)文件

如果說靜態(tài)文件是存在的，這個時候?qū)嶋H上會響應(yīng)原有的靜態(tài)文件，比如說訪問

https://localhost:5001/a/index.html

這樣子就可以發(fā)現(xiàn)我們能讓靜態(tài)文件的目錄正常工作，并且能將其他的我們需要的地址都重定向到 index.html

當(dāng)然這里還有另外一種寫法，就是不用 UseRewriter 的方式，而是用 Run 的方式，也是就用斷路器的方式

// 判斷我們當(dāng)前的請求是否滿足條件 app.MapWhen(context => {// 如果我們的請求不是以 API 開頭的請求return !context.Request.Path.Value.StartsWith("/api"); }, appBuilder => {如果滿足條件，我就走我下面這一段中間件的邏輯//var option = new RewriteOptions();重寫為 /index.html//option.AddRewrite(".*", "/index.html", true);//appBuilder.UseRewriter(option);重寫完之后再使用我們的靜態(tài)文件中間件//appBuilder.UseStaticFiles();appBuilder.Run(async c =>{// 讀取靜態(tài)文件，并且輸出給我們的 Responsevar file = env.WebRootFileProvider.GetFileInfo("index.html");c.Response.ContentType = "text/html";using (var fileStream = new FileStream(file.PhysicalPath, FileMode.Open, FileAccess.Read)){await StreamCopyOperation.CopyToAsync(fileStream, c.Response.Body, null, BufferSize, c.RequestAborted);}}); });

這種寫法有一個缺點(diǎn)就是，沒辦法像靜態(tài)文件中間件那樣，輸出正確的 Http 請求頭

對比一下兩種方式的輸出的請求頭的不同

啟動程序，訪問

https://localhost:5001/order

打開調(diào)試工具，可以看到對 order 的我們的響應(yīng)頭就只有 4 個

其他的靜態(tài)文件，響應(yīng)頭會多出來 etag，data，last-modified

這些的話就是我們關(guān)于 HTTP 緩存可以用到的頭，所以說我們還是推薦使用上面這種方式，靜態(tài)中間件的方式，而不是自己輸出文件的方式

總結(jié)

以上是生活随笔為你收集整理的.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（下）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。