ASP.NET Core 極簡風 - 嵌入 .html/.css/.js 靜態檔案徹底實現單檔部署

ASP.NET Core 極簡風 - Minimal API 提到只需加一行 UseFileServer()，ASP.NET Core 空白網站就可以像 ASP.NET MVC 一樣，將 .html/.css/.js/圖檔放在 wwwroot 資料夾，支援靜態檔案存取。若要實測，用 dotnet new web 開一個 Minimal API 空白網站，在專案新增 wwwroot 資料夾，放入 ui.html 及 .png [1]，Program.cs 則加入一行 UseFileServer() [2]，按下 F5 偵測程式，瀏覽器網址輸入 /ui.html [3]，網頁順利顯示，是不是超簡單？

適逢農曆新年，順便藉這個 ASP.NET Core 範例跟大家拜年，祝大家健康平安，萬事順心。

如果要用靜態檔案 HTML 當首頁，將其名命為 index.html 放在 wwwroot 下，並移除 app.Get("/", ...) 即可。

使用 dotnet publish -c Release -r win-x64 -p:PublishSingleFile=true --no-self-contained 產生部署檔(參考：使用 dotnet 命令列工具發行 .NET 6 專案)，除了 .exe 外，wwwroot 也會一併輸出：

除了 exe 檔外還需要複製 wwwroot 資料夾減損簡潔性，在我心目中，像 Gitea、Hugo 靠單一執行檔搞定才稱得上是王者風範。所幸，ASP.NET Core 已有內建方法能讓我們實現夢想。(隨著了解愈深，我愈覺得 ASP.NET Core 已成熟到可普遍商用的程度)

ASP.NET Core 有個 Manifest Embedded File Provider，可將 .html/.css/.js/圖檔等靜態檔以內嵌資源(Embedded Resource)形式包進 .exe 或 .dll 檔使用，步驟不多：

1. 使用 dotnet add package Microsoft.Extensions.FileProviders.Embedded 參照 NuGet 套件
2. 修改 .csproj，加上 <GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest> 並以 <EmbeddedResource Include="..." /> 宣告要轉為內嵌資源的目錄或檔案。例如：我將 wwwroot 更名為 ui 資料夾，其下的 index.html 與 happy-new-year.png 用 EmbeddedResource 宣告為內嵌資源，完整名稱為 minApiStFiles.ui.index.html 及 minApiStFiles.ui.happy-new-year.png。csproj 修改如下：

    <Project Sdk="Microsoft.NET.Sdk.Web">
      <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <Nullable>enable</Nullable>
        <ImplicitUsings>enable</ImplicitUsings>
        <GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest>
      </PropertyGroup>
      <ItemGroup>
        <EmbeddedResource Include="ui\**" />
      </ItemGroup>
      <ItemGroup>
        <PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="6.0.1" />
      </ItemGroup>
    </Project>
   

3. 修改 Program.cs，UseFileServer() 時傳入 FileServerOptions，宣告 ManifestEmbeddedFileProvider 並提示命名空間以 ui 起首：

   var builder = WebApplication.CreateBuilder(args);
   var app = builder.Build();
   
   app.UseFileServer(new FileServerOptions {
       RequestPath = "",
       FileProvider = new Microsoft.Extensions.FileProviders
                       .ManifestEmbeddedFileProvider(
           typeof(Program).Assembly, "ui"
       ) 
   });
   //app.MapGet("/", () => "Hello World!");
   
   app.Run();
   

   註：如果改用 ManifestEmbeddedFileProvider 前曾用過 wwwroot 實體檔案，bin 目錄會殘留 .staticwebasets.runtim.json，請手動刪除或用 dotnet clean 清除，否則會出現找不到 wwwroot 錯誤。我在這上面卡了二十分鐘... orz

就醬，只靠一個 exe 檔，ASP.NET Core 憑空生出 index.html 與 happy-new-year.png，這才是我理想中的極簡風。

ASP.NET Core 好威，.NET 6 真棒!