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

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

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

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

Blazor 技術(shù)又分兩種：

• Blazor WebAssembly

• Blazor Server

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

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

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

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

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

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

是不是看著很心動(dòng)，那果斷用起來，其實(shí)我主要是想解決這個(gè)刷新很慢的問題。

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

2、代碼遷移

因?yàn)樽蛱煲呀?jīng)說過了wasm的創(chuàng)建過程，而且代碼也都寫好了，特別是.razor頁面，幾乎都不用做處理，直接copy就行，那我就說說注意點(diǎn)。

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

還是昨天的那個(gè)頁面，只不過是第一個(gè)選項(xiàng)了：

創(chuàng)建完成后，可以看到默認(rèn)的項(xiàng)目結(jié)構(gòu)，和ASP.NETCore的web項(xiàng)目很像：

簡單解釋一下：

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：命名空間導(dǎo)入；

6、App.razor：項(xiàng)目文件；

7、appsettings.json：配置文件；

8、Program.cs：程序總運(yùn)行入口；

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

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

2、默認(rèn)示例解析

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

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

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

之前我們使用wasm的時(shí)候，因?yàn)槭乔昂蠖朔蛛x，所以使用的是HttpClient來遠(yuǎn)程獲取資源服務(wù)器的資源數(shù)據(jù)，但是現(xiàn)在我們使用了服務(wù)端以后，可以自己寫業(yè)務(wù)邏輯了：

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

正如示例的，定義了一個(gè)WeatherForecastService.cs服務(wù)，然后注入到頁面

@inject WeatherForecastService ForecastService接著就可以直接使用了：@code { private WeatherForecast[] forecasts; protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); }}

但是我今天不打算用這個(gè)邏輯，因?yàn)槲疫€是想要使用Blog.Core的數(shù)據(jù)，所以，還是打算使用HttpClient來獲取遠(yuǎn)程數(shù)據(jù)，而不是自寫邏輯。

那下邊就開始遷移：

3、代碼COPY

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

Blog.MVP.Blazor.SSR

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

4、修改Data獲取方式

因?yàn)槟J(rèn)的server采用的是service的方式，我們要使用httpclient的方式，所以需要簡單做下修改：

添加nuget包

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

命名空間引入_import

@using System.Net.Http.Json

服務(wù)注冊到容器startup.cs

services.AddSingleton<HttpClient>();

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

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

因?yàn)楝F(xiàn)在是服務(wù)端的請求，所以不用配置跨域。

5、調(diào)試

之前wasm調(diào)試的時(shí)候，我們通過console.write()，會(huì)把結(jié)果打印到瀏覽器的控制臺(tái)，

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

兩個(gè)都很方便。

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

3、新的托管與部署

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

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

代碼發(fā)布

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

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

Linux部署

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

git pull;rm -rf .PublishFiles;dotnet build;cd Blog.MVP.Blazor.SSRdotnet 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守護(hù)進(jìn)程

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服務(wù)

nginx -s reload

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

5、總結(jié)

https://mvp.neters.club/

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

總體來說，Blazor.Server簡直就是Blazor.Wasm和ASP.NetCore的結(jié)合體，當(dāng)然，說白了就是服務(wù)端渲染。

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

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

打完收工。

總結(jié)

以上是生活随笔為你收集整理的active server pages 错误 asp 0126_最终选型 Blazor.Server：又快又稳！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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