【ASP.NET Core】Blazor 服務器端的 Base Path

時間 2021-01-05

標籤 html nginx web 瀏覽器服務器 app spa 代理 code 欄目 HTML 简体版

原文原文鏈接

提到 Blazor，沒準就會有人問：選用 Server 端仍是 WebAssembly（客戶端）？其實這個不用糾結，老周我的的原則是：Server 端優先。理由很單純：服務器端雖然消耗服務器上的資源，但加載速度快，並且不用下載組件（幾個腳本也不大）。其實嘛，Web 應用都是消耗服務器資源的，否則要服務器幹嘛呢。html

那啥時候選用 Web Assembly 呢？應該在交互比較繁複時。好比，你開發了個遊戲，叫《國民 996》，這樣的話選用客戶端是比較合適。nginx

======================================================================web

Du Du, Stop！題外話結束。今天要說的話題是服務器端的 Blazor應用方面的。各位估計都玩過 Blazor 了，在加載組件的 HTML 文檔中，一般會在 <head> 元素下指定一個應用程序的基礎路徑，也就是 Base Path。就像這樣：瀏覽器

<head>
    <base href="/" />
</head>

而後，<body>裏面的腳本導入就會相對於上面指定的路徑。服務器

    <script src="_framework/blazor.server.js"></script>

在 99.996% 的場合中，你只須要爲應用程序指定「/」做爲基礎路徑就能夠了。當瀏覽器發來請求時，服務器就會從根路徑開始匹配 URL 路由，而後定位到目標組件並加載。app

可是，在 0.004% 的場合中，這個<base>元素可能要加上一個前綴。好比：/demo。那什麼場合呢？Duang，來了：ui

1）ASP.NET Core（Blazor）應用程序綁定本機地址運行，如著名的 localhost:5000；spa

2）使用其餘服務器組件來反向代理，世界聞名的有愛愛S、阿Pache，ng拽nx之類。代理

3）IIS、nginx等上面配置了路徑前綴。code

以 nginx 爲例，假設有這樣的配置：

    server {
        listen       80;
        ……

        location / { root html; index index.html index.htm; } location /blazapp/ { proxy_pass http://localhost:5000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection keep-alive; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Connection "Upgrade"; }

若是訪問根路徑 / ，那麼指向 index.html 等文件；若訪問 /blazapp 前綴打頭的路徑才指向個人 Blazor 應用。 proxy_xxx 配置的轉發規則會把這個路徑前綴也轉發給 ASP.NET Core 應用進程，因此，這時候，我們用來加載 blazor 組件的HTML文檔就要這樣寫 <base> 了。

<head>
    <base href="/blazapp" />
</head>

看，這個 Base Path 就是這麼用的。

注意 blazor 組件的代碼是不須要改動的，好比這個叫 home 的組件。

@page "/home"

<h3>豆腐小鎮歡迎您</h3>

@page 指令後面的URL不須要添加前綴。

但，Startup 類裏面的 Configure 方法裏面的代碼就要作點手腳了。

1）調用 UseForwardedHeaders 方法。這個與 blazor 關係不大，使用反向代理的話都應該調用，以讓應用程序讀取轉發的頭；

2）調用 UsePathBase 方法，設置的路徑前綴要和前面 nginx 中配置的一致。這一句是重點，它的做用是把傳入應用程序的URL中的前綴去掉。

例子：

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseForwardedHeaders();
            app.UsePathBase("/blazapp"); if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles(); //這句別忘了
            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/Host");
            });
        }

這時候，從瀏覽器中訪問 http://localhost/blazapp/home，組件就顯示出來了。

當從瀏覽器發出請求 localhost/blazapp/home 時，nginx 會把路徑 /blazapp/home 轉發給 ASP.NET Core 應用程序。

ASP.NET Core 應用程序收到消息後，因爲調用了 app.UsePathBase("/blazapp")，自動把 /blazapp 這一段砍掉了，因而，傳給 Routing 的 URL 又恢復到 /home，因此，咱們寫的 blazor 組件是不用去改路徑規則的。

Web Assembly 應用也能使用這個 Base Path 設置，不過用處不是很大，除非你一個服務器應用承載多個 webasm 應用。同時下載多個 webasm 應用也用得很少。若是確實要這樣作，那麼你的 Host 項目就要引用多個 webasm 項目，假設叫 app一、app2。這種方案你必須爲每一個 web asm 的項目文件（.csproj）加上 StaticWebAssetBasePath 節點。

例如，app1 應用的項目文件加上：

    <StaticWebAssetBasePath>/path01</StaticWebAssetBasePath>

app2 應用的項目文件里加上：

    <StaticWebAssetBasePath>/path02</StaticWebAssetBasePath>

若是不這樣作，是沒法編譯的，由於 Webassembly 應用默認的路徑前綴是「/」，若是你的 Host 程序引用了 N 個 Web Assembly 應用，那麼就等於用一個「/」指向多個項目，這就衝突了，因此要在項目文件中加上 StaticWebAssetBasePath 配置，以解決此問題。StaticWebAssetBasePath 指定的是邏輯路徑，並不要求真的存在這個目錄（爲了解決衝突用），你的項目文件能夠放在名爲 sb0一、sb02 的目錄下。