ASP.NET Core - 靜態檔案

本章將學習如何處理檔案。幾乎每個 Web 應用程式都需要一個重要的功能，那就是能夠從檔案系統提供檔案（靜態檔案）。

靜態檔案，例如我們檔案系統中的 JavaScript 檔案、影像、CSS 檔案，是 ASP.NET Core 應用程式可以直接提供給客戶端的資源。
靜態檔案通常位於 web 根目錄 (wwwroot) 資料夾中。
預設情況下，這是我們唯一可以直接從檔案系統提供檔案的目錄。

示例

現在讓我們來看一個簡單的例子，我們將瞭解如何在應用程式中提供這些檔案。

在這裡，我們想向 FirstAppDemo 應用程式新增一個簡單的 HTML 檔案，此 HTML 檔案必須放入 web 根目錄 (wwwroot) 資料夾中。在解決方案資源管理器中右鍵單擊 wwwroot 資料夾，然後選擇 **新增 → 新建項**。

在中間窗格中，選擇 **HTML 頁** 並將其命名為 **index.html**，然後單擊 **新增** 按鈕。

您將看到一個簡單的 **index.html** 檔案。讓我們新增一些簡單的文字和標題，如下所示。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="utf-8" /> 
      <title>Welcome to ASP.NET Core</title> 
   </head> 

   <body> 
      Hello, Wolrd! this message is from our first static HTML file.  
   </body> 
</html>

執行應用程式並在瀏覽器中訪問 **index.html** 時，您會看到 **app.Run** 中介軟體丟擲異常，因為我們的應用程式中目前沒有任何內容。

沒有中介軟體會去查詢檔案系統上的任何檔案來提供服務。要解決此問題，請透過右鍵單擊解決方案資源管理器中的專案並選擇“管理 NuGet 包”，轉到 **NuGet 包管理器**。

搜尋 **Microsoft.AspNet.StaticFiles**，這將找到靜態檔案中介軟體。讓我們安裝此 NuGet 包，現在我們應該有其他方法可以在 Configure 方法中使用來註冊中介軟體。

讓我們在 Configure 方法中新增 **UseStaticFiles** 中介軟體，如下面的程式所示。

using Microsoft.AspNet.Builder; 
using Microsoft.AspNet.Hosting; 
using Microsoft.AspNet.Http; 

using Microsoft.Extensions.DependencyInjection; 
using Microsoft.Extensions.Configuration;  

namespace FirstAppDemo { 
   public class Startup { 
      public Startup() { 
         var builder = new ConfigurationBuilder() 
            .AddJsonFile("AppSettings.json"); 
         Configuration = builder.Build(); 
      }  
      public IConfiguration Configuration { get; set; }  
      
      // This method gets called by the runtime. 
      // Use this method to add services to the container. 
      // For more information on how to configure your application, 
      // visit http://go.microsoft.com/fwlink/?LinkID=398940 
      public void ConfigureServices(IServiceCollection services) { 
      }  
      
      // This method gets called by the runtime.  
      // Use this method to configure the HTTP request pipeline. 
      public void Configure(IApplicationBuilder app) { 
         app.UseIISPlatformHandler();  
         app.UseDeveloperExceptionPage(); app.UseRuntimeInfoPage(); 
         app.UseStaticFiles(); 
         
         app.Run(async (context) => { 
            throw new System.Exception("Throw Exception"); 
            var msg = Configuration["message"]; 
            await context.Response.WriteAsync(msg); 
         }); 
      }  
        
      // Entry point for the application. 
      public static void Main(string[] args) => WebApplication.Run<Startup>(args); 
   } 
}

除非您覆蓋選項並傳入一些不同的配置引數，否則靜態檔案的操作是針對給定的請求檢視 **請求路徑**。然後將此請求路徑與檔案系統和檔案系統上的內容進行比較。

如果靜態檔案看到它可以使用的檔案，它將提供該檔案，而不會呼叫下一個中介軟體。
如果它沒有找到匹配的檔案，它將簡單地繼續下一個中介軟體。

讓我們儲存 **Startup.cs** 檔案並重新整理您的瀏覽器。

您現在可以看到 index.html 檔案。您在 wwwroot 中放置的任何內容——任何 JavaScript 檔案、CSS 檔案或 HTML 檔案，您都可以提供它們。

現在，如果您希望 index.html 成為您的預設檔案，這是一個 IIS 一直擁有的功能。
您可以始終為 IIS 提供要查詢的預設檔案列表。如果有人訪問目錄的根目錄或在這種情況下訪問網站的根目錄，並且 IIS 找到名為 index.html 的檔案，它將自動提供該檔案。
現在讓我們從進行一些更改開始。首先，我們需要刪除強制錯誤，然後新增另一箇中間件，即 UseDefaultFiles。以下是 Configure 方法的實現。

// This method gets called by the runtime.  
// Use this method to configure the HTTP request pipeline. 
public void Configure(IApplicationBuilder app)  { 
   app.UseIISPlatformHandler();  
   app.UseDeveloperExceptionPage(); 
   
   app.UseRuntimeInfoPage();  
   app.UseDefaultFiles(); 
   app.UseStaticFiles();  
   
   app.Run(async (context) => { 
      var msg = Configuration["message"]; 
      await context.Response.WriteAsync(msg); 
   });  
}

此中介軟體將檢視傳入的請求，並檢視它是否是目錄的根目錄，以及是否存在任何匹配的預設檔案。
您可以覆蓋此中介軟體的選項來告訴它要查詢哪些預設檔案，但 Index.html 預設情況下是預設檔案之一。

讓我們儲存 **Startup.cs** 檔案，然後在瀏覽器中轉到 Web 應用程式的根目錄。

您現在可以看到 index.html 是您的預設檔案。安裝中介軟體的順序很重要，因為如果您將 UseDefaultFiles 放在 UseStaticFiles 之後，您將不會獲得相同的結果。

如果您要使用 UseDefaultFiles 和 UseStaticFiles，您可能還需要另一箇中間件，該中介軟體位於 Microsoft.aspnet.staticfiles NuGet 包中，那就是 **FileServer 中介軟體**。這實際上以正確的順序包含 Default Files 和 Static Files。

// This method gets called by the runtime.  
// Use this method to configure the HTTP request pipeline. 
public void Configure(IApplicationBuilder app) { 
   app.UseIISPlatformHandler();  
   app.UseDeveloperExceptionPage(); 
   
   app.UseRuntimeInfoPage();  
   app. UseFileServer();  
   
   app.Run(async (context) => { 
      var msg = Configuration["message"]; 
      await context.Response.WriteAsync(msg); 
   }); 
}

讓我們再次儲存 **Startup.cs** 檔案。重新整理瀏覽器後，您將看到與以下螢幕截圖中所示相同的結果。

列印頁面