書接上文，昨天我們快速的走了一遍wasm的開發(fā)流程（我的『MVP.Blazor』快速創(chuàng)建與部署），總體來說還是很不錯的，無論是從技術上，還是從開發(fā)上，重點是用C#來開啟前端時代，可以開發(fā)SPA單頁面應用，這個本身就是很奇妙的一件事，因為我有一定的VUE.JS基礎，所以入手Blazor.Wasm的話，還是特別快的，可以說是很對脾氣的，無論是雙向綁定、組件開發(fā)、頁面模板、生命周期、父子通訊等等等等上，都很契合。

所以說：只要你會ASP.NETCore和Vue（當然其他的也可以）技術，入門Blazor也就一兩天的事兒。不過在最后一步——托管和部署的時候，出現(xiàn)了一個小問題，當然，也不是問題，是我沒有考慮到的，下邊說一下這個小問題。

1、為什么要選擇Blazor.Server?

上邊我已經(jīng)說過了，Blazor.Wasm開發(fā)起來還是很舒服的，而且也是SPA單頁面應用程序，這里先說下兩者的區(qū)別：

Blazor 技術又分兩種：

• Blazor WebAssembly

• Blazor Server

Blazor WebAssembly 是真正的SPA，頁面的渲染在前端實現(xiàn)，可以實現(xiàn)真正的前后端分離設計。而Blazor.Server可以認為是前者的服務端渲染版本，它使用SignalR實現(xiàn)了客戶端的實時通訊，它的計算跟渲染都在服務端處理。

你可以看明白了吧，其實wasm就像是vue那種單頁面程序，而Blazor.Server更像是基于前者的一種服務端渲染（注意：和MVC不是一回事），第一次刷新是HTTP請求，平時點擊是SignalR處理。

雖然看似wasm有友好，但是部署的時候出現(xiàn)了一個問題，就是它是可以直接在瀏覽器中執(zhí)行，就是WebAssembly在瀏覽器里實現(xiàn)了一個.NET Runtime，所以每次刷新的時候，都會加載全部的資源程序集文件dll：

所以時間會特別慢，盡管做了一些處理：比如官方推薦的PWA技術（可以在客戶端緩存部分dll），也做了競速，然后還有壓縮，當然，還有人說可以使用CDN，額，好像開發(fā)一個SPA程序做了這么多步驟，顯然不是很美味，可能我道行不夠吧。

最后，糾結了糾結，還是選擇了Blazor.Server，同時也看到上篇文章中，有小伙伴留言，更加速了我轉型Server的勁頭：

貌似目前blazor wasm的項目加載都非常慢，我還是優(yōu)先選擇blazor server，微軟吹在2c4g的服務器上部署blazor server能承載十幾萬個session，學過Angular用blazor server特別有親切感，service，component，DI，理念都很一致

是不是看著很心動，那果斷用起來，其實我主要是想解決這個刷新很慢的問題。

好啦，正式開始將項目從wasm遷移到blazor.server中。

2、代碼遷移

因為昨天已經(jīng)說過了wasm的創(chuàng)建過程，而且代碼也都寫好了，特別是.razor頁面，幾乎都不用做處理，直接copy就行，那我就說說注意點。

1、創(chuàng)建server項目

還是昨天的那個頁面，只不過是第一個選項了：

創(chuàng)建完成后，可以看到默認的項目結構，和ASP.NETCore的web項目很像：

簡單解釋一下：

1、wwwroot：靜態(tài)資源文件；

2、Data：數(shù)據(jù)文件（M），定義Model和Service，可以從數(shù)據(jù)庫里獲取數(shù)據(jù)；

3、Pages：視圖（V）和邏輯（VM），和wasm一樣；

4、Shared：共享組件；

5、_Imports.rzor：命名空間導入；

6、App.razor：項目文件；

7、appsettings.json：配置文件；

8、Program.cs：程序總運行入口；

9、Startup.cs：啟動類，做注入和中間件配置；

是不是感覺和ASP.NETCore項目很像，本來就是，看Framworks框架就知道了，反正只要是你玩兒過netcore，昨天對wasm也有一定的了解的話，對項目結構還是比較熟絡的，接下來就是開發(fā)了。

2、默認示例解析

這次官方給的還是三個例子：事件綁定計數(shù)器、數(shù)據(jù)獲取、首頁加載。

除了這三個外，有一個需要注意的是，之前我們使用wasm的時候，是一個SPA，需要提供一個index.html文件，作為整個項目的項目承載頁面，現(xiàn)在我們使用了server服務端渲染后，就不需要了，轉而使用了一個_Host.cshtml的頁面，從后綴名可以看出來，其實也和html很像的一個cshtml頁面，而不是.razor。

那下邊簡單說下獲取數(shù)據(jù)FetchData：

之前我們使用wasm的時候，因為是前后端分離，所以使用的是HttpClient來遠程獲取資源服務器的資源數(shù)據(jù)，但是現(xiàn)在我們使用了服務端以后，可以自己寫業(yè)務邏輯了：

比如增刪改查，持久化等等邏輯：

正如示例的，定義了一個WeatherForecastService.cs服務，然后注入到頁面

@inject WeatherForecastService ForecastService

接著就可以直接使用了：

@code {private WeatherForecast[] forecasts;protected override async Task OnInitializedAsync(){forecasts = await ForecastService.GetForecastAsync(DateTime.Now);} }

但是我今天不打算用這個邏輯，因為我還是想要使用Blog.Core的數(shù)據(jù)，所以，還是打算使用HttpClient來獲取遠程數(shù)據(jù)，而不是自寫邏輯。

那下邊就開始遷移：

3、代碼COPY

為了讓大家能看到兩個項目，所以我直接在之前的解決方案中，創(chuàng)建一個新項目：

Blog.MVP.Blazor.SSR

將wwwroot資源文件，Common公共類，Models模型，Pages頁面，Shared組件等全部拷貝到新項目：

4、修改Data獲取方式

因為默認的server采用的是service的方式，我們要使用httpclient的方式，所以需要簡單做下修改：

添加nuget包

<PackageReference?Include="System.Net.Http.Json"?Version="3.2.0"?/>

命名空間引入_import

@using System.Net.Http.Json

服務注冊到容器startup.cs

services.AddSingleton<HttpClient>();

用絕對路徑發(fā)起api請求

await Http.GetFromJsonAsync<MessageModel<PageModel<BlogArticle>>> ("http://apk.neters.club/api/Blog?page=1&bcategory=MVP_azure_2020&intPageSize=20");

因為現(xiàn)在是服務端的請求，所以不用配置跨域。

5、調試

之前wasm調試的時候，我們通過console.write()，會把結果打印到瀏覽器的控制臺，

但是現(xiàn)在我們可以直接輸出到程序的控制臺dos窗口。

兩個都很方便。

好啦，到這里我們就遷移完成了，接下來我們就托管部署下吧。

3、新的托管與部署

還記得昨天我們是怎么部署的么？

因為wasm是SPA，所以我們發(fā)布后，直接wwwroot部署到nginx，作為一個靜態(tài)站點即可，就像是部署build后的vue那樣。

代碼發(fā)布

但是Blazor.Server不一樣了，畢竟是SSR渲染。我們把項目進行發(fā)布，可以看到發(fā)布后的文件和之前的ASP.NETCore真的一樣，還有.exe可執(zhí)行文件：

那既然都這么熟悉了，就不用我多說了吧，Linux+PM2+Nginx跨平臺流程走起！

Linux部署

我直接寫了要給.sh文件，這樣在服務器里部署，不用FTP，浪費帶寬

git pull; rm -rf .PublishFiles; dotnet build; cd Blog.MVP.Blazor.SSR dotnet publish -o /home/Blog.MVP.Blazor/Blog.MVP.Blazor.SSR/bin/Debug/netcoreapp3.1/publish; cp -r /home/Blog.MVP.Blazor/Blog.MVP.Blazor.SSR/bin/Debug/netcoreapp3.1/publish /home/Blog.MVP.Blazor/.PublishFiles; echo "Successfully!!!! ^ please see the file .PublishFiles";

然后檢查無誤后，通過pm2守護進程

pm2?start?"dotnet?Blog.MVP.Blazor.SSR.dll"?--name?mvp.dll

最后nginx代理

server {listen 80;server_name mvp.neters.club;rewrite?^(.*)$?https://$host$1?permanent;#charset?koi8-r;#access_log logs/host.access.log main;location / {root html;index index.html index.htm;}}server {listen 443 ssl;server_name mvp.neters.club; ssl_certificate /etc/nginx/conf.d/1_mvp.neters.club_bundle.crt;ssl_certificate_key /etc/nginx/conf.d/2_mvp.neters.club.key;ssl_session_timeout 5m;ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;ssl_prefer_server_ciphers on;location / {proxy_pass http://localhost:5050;index index.php index.html index.htm;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;} }

檢查nginx是否正常

nginx -t

重啟nginx服務

nginx -s reload

搞定，可以在線查看效果。

5、總結

https://mvp.neters.club/

通過查看重新發(fā)布的項目，可以看到速度已經(jīng)基本能接受了。

總體來說，Blazor.Server簡直就是Blazor.Wasm和ASP.NetCore的結合體，當然，說白了就是服務端渲染。

我更喜歡的，還是它的組件開發(fā)，

雙向綁定、組件開發(fā)、組件繼承、頁面模板、生命周期、父子通訊
很有前端開發(fā)那味，當然還有很多其他的亮點知識，等待一起發(fā)掘。

打完收工。

總結

以上是生活随笔為你收集整理的最终选型 Blazor.Server：又快又稳！的全部內容，希望文章能夠幫你解決所遇到的問題。

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