裝載及部署 ASP.NET Core Blazor

本文說明如何裝載和部署 Blazor 應用程式。

發行應用程式

應用程式會在發行組態中發佈以供部署。

Visual Studio

1. 從 [建置] 功能表中選取 [發佈 {APPLICATION}] 命令，其中 是應用程式的名稱。
2. 選取「發佈目標」。 若要在本機發佈，請選取 [資料夾]。 選取 下一步。
3. 在本機發佈時，接受預設資料夾位置或指定不同的位置。 選取 [完成 ] 以儲存設定檔。 選取 關閉。
4. 若要在發佈應用程式之前清除目標的發佈資料夾，請選取 [顯示所有設定]。 選取 [配置文件>發佈選項>][刪除所有現有的檔案]，再發佈。 選取 [儲存]。
5. 選擇 發佈 按鈕。

Visual Studio Code 和 .NET CLI

將命令行打開並定位到專案的根目錄。

使用dotnet publish命令來部署應用程式：

dotnet publish

在 .NET 8 之前，預設發行組態為 Debug。 發佈以 .NET 7 或更早版本為目標的應用程式時，請將 "-c|--configuration" 選項與 "Release" 一同傳遞至命令，以Release組態進行發佈：

dotnet publish -c Release

發佈應用程式會觸發專案相依性的還原並建置專案，然後才會建立資產以供部署。 在建置程序中，會移除未使用的方法和組件，減少應用程式的下載大小和載入時間。

清空目標發佈資料夾

在命令殼層中使用 dotnet publish 命令發佈應用程式時，命令會根據專案的目前狀態產生部署所需的檔案，並將檔案放入指定的輸出資料夾中。 發佈應用程式之前，命令不會自動清除目標資料夾。

若要在發佈應用程式之前自動清空目標資料夾，請將下列 MSBuild 目標新增至根.csproj元素底下的 app 項目檔 （<Project>） 中：

<Target Name="_RemovePublishDirBeforePublishing" BeforeTargets="BeforePublish">
  <RemoveDir Directories="$(PublishDir)" Condition="'$(PublishDir)' != ''" />
</Target>

默認發佈位置

• Blazor Web App：應用程式會發行至 /bin/Release/{TARGET FRAMEWORK}/publish 資料夾，其中 {TARGET FRAMEWORK} 占位元符表示目標架構。 將 publish 資料夾的內容部署至主機。
• 獨立 Blazor WebAssembly：應用程式會發佈至 bin/Release/{TARGET FRAMEWORK}/publish 或 bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish 資料夾。 若要將應用程式部署為靜態網站，請將 wwwroot 資料夾的內容複製到靜態網站主機。

IIS

若要在 IIS 中裝載 Blazor 應用程式，請參閱下列資源：

• IIS 裝載
  • 將 ASP.NET Core 應用程式發佈到 IIS
  • 使用 IIS 在 Windows 上託管 ASP.NET Core
• 裝載和部署 ASP.NET Core 伺服器端 Blazor 應用程式：Blazor Web App (適用於 .NET 8 或更新版本）和 Blazor Server 應用程式 (適用於 .NET 7 或更早版本），在 IIS 上執行，包括在執行 Windows 操作系統的 Azure 虛擬機器（VM）和 Azure App Service 上的 IIS。
• 使用 IIS 裝載和部署 ASP.NET CoreBlazor WebAssembly：獨立Blazor WebAssembly應用程式（所有 .NET 版本）和託管Blazor WebAssembly的應用程式（.NET 7 或更早版本）。
• IIS 子應用程式裝載
  • 發佈應用程式之前，請先遵循 應用程式基底路徑指引 。 這些範例使用 /CoolApp 的應用程式基底路徑，並且顯示如何從應用程式設定或其他設定提供者取得基底路徑。
  • 遵循 [進階設定] 中的子應用程式組態指引。 根網站底下的子應用程式資料夾路徑會成為子應用程式的虛擬路徑。 針對 /CoolApp 的應用程式基底路徑，Blazor 應用程式會放在根網站下名為 CoolApp 的資料夾，而子應用程式會採用 /CoolApp 的虛擬路徑。

不支援在 ASP.NET Core 應用程式之間共用應用程式集區，包括 Blazor 的應用程式。 使用 IIS 裝載時，針對每個應用程式使用一個應用程式集區，並避免使用 IIS 的虛擬目錄來裝載多個應用程式。

JavaScript 配套程序支援

執行階段 Blazor 依賴 JavaScript（JS）檔案、編譯成 WebAssembly 程式代碼的 .NET 執行階段，以及封裝為 WebAssembly 檔案的 .NET 組件。 Blazor建置應用程式時，運行Blazor時間會相依於來自不同組建位置的這些檔案。 由於此限制，Blazor 的構建輸出無法與 JS 打包工具兼容，例如 Gulp、Webpack 和 Rollup。

若要在JS產生與配套程式相容的組建輸出，請將WasmBundlerFriendlyBootConfig應用程式的項目檔中的 MSBuild 屬性設定為 true ：

<WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>

重要

這項功能只有在發佈應用程式時才會產生適合打包工具的輸出。

輸出無法在瀏覽器中直接運行，但 JS 工具可以使用它將 JS 檔案與其他開發人員提供的腳本一起打包。

啟用 WasmBundlerFriendlyBootConfig 時，產生的 JS 包含應用程式中所有資產的 import 指示詞，以便綁定程式識別相依性。 瀏覽器無法載入許多資產，但套件組合器通常可以設定為依檔類型辨識資產以處理載入。 有關如何設定打包工具的詳細資訊，請參閱打包工具的說明文件。

注意

使用合併器客製插件將匯入檔案映射至各自的檔案位置 JS ，應當能夠實現組合建置輸出。 我們目前不提供這類外掛程式。

注意

將 files 外掛程式取代為 url，應用程式的所有 JS 檔案，包括 Blazor 中以 base64 編碼的 JS-WebAssembly 運行時，全部打包到輸出中。 檔案的大小明顯大於使用files插件整理的檔案大小（例如，大了 300%），因此在產生適合套件工具處理的輸出時，不建議一般使用url插件。

下列範例應用程式是以 Rollup 為基礎。 使用其他 JS 配套程式時，也適用類似的概念。

範例 Blazor WebAssembly 。BlazorWebAssemblyReactDotNetWebAssemblyReactBlazor

Blazor WebAssembly快取的各個方面都適用於Blazor Web App

Blazor 節點中的 Blazor WebAssembly 套件快取和 HTTP 快取指引著重於獨立 Blazor WebAssembly 應用程式，但這些文章中用戶端快取的數個層面也適用於 Blazor Web App採用互動式 WebAssembly 或互動式自動轉譯模式的應用程式。 如果在客戶端呈現內容的 Blazor Web App 遇到靜態資產或套件組合快取問題，請參閱這些文章中的指引來疑難排解問題。

• ASP.NET 核心 Blazor WebAssembly 快取和完整性檢查失敗
• 避免升級 ASP.NET Core Blazor 應用程式時發生 HTTP 快取問題

Blazor Server MapFallbackToPage 設定

本節僅適用 Blazor Server 應用程式。 MapFallbackToPage 在 Blazor Web App 和 Blazor WebAssembly 應用程式中暫不支援這項服務。

在應用程式需要具有自訂資源和 Razor 元件的個別區域情況下：

• 在應用程式的 Pages 資料夾內建立資料夾來保存資源。 例如，應用程式的系統管理員區段是在名為 Admin (Pages/Admin) 的新資料夾中建立。

• 為區域建立根頁面 (_Host.cshtml)。 例如，從應用程式的主要根頁面 (Pages/Admin/_Host.cshtml) 建立 Pages/_Host.cshtml 檔案。 請勿在管理員 @page 頁面中提供 _Host 指示詞。

• 將版面配置新增至區域的資料夾 (例如 Pages/Admin/_Layout.razor)。 在個別區域的版面配置中，將 <base> 標籤設定為 href 以符合區域的資料夾 (例如 <base href="/Admin/" />)。 為了示範目的，請將 ~/ 新增至頁面中的靜態資源。 例如：

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css (範例應用程式的命名空間為 BlazorSample)
  • ~/_framework/blazor.server.js (Blazor 指令碼)

• 如果區域應該有自己的靜態資產資料夾，請新增資料夾，並將其位置指定為 Program.cs 中的靜態檔案中介軟體 (例如 app.UseStaticFiles("/Admin/wwwroot"))。

• Razor 元件會新增至區域的資料夾。 至少，將 Index 元件新增至區域資料夾，並確保使用區域的正確 @page 指示詞。 例如，根據應用程式的預設 Pages/Admin/Index.razor 檔案新增 Pages/Index.razor 檔案。 指示管理員區域做為檔案頂端的路由範本 (@page "/admin")。 視需要新增其他元件。 例如，具有 Pages/Admin/Component1.razor 指示詞的 @page 和路由範本 @page "/admin/component1。

• 在 Program.cs 中，緊接在 MapFallbackToPage 頁面的後援根頁面路徑之前，呼叫 _Host 以取得區域的要求路徑：

  ...
  app.UseRouting();
  
  app.MapBlazorHub();
  app.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/Admin/_Host");
  app.MapFallbackToPage("/_Host");
  
  app.Run();