Blazor Server 与 WASM 混合部署模式教程

10次阅读

Blazor Server 与 Blazor WASM 混合部署可兼顾首屏速度、离线能力与服务端实时性,关键在于按场景拆分路由并用反向代理智能分发:/admin/ 走 Server 实现实时监控与权限敏感操作,/docs/、/app/* 走 WASM 支持离线访问与 PWA,共享。NET Standard 类库与统一 API 鉴权,Nginx 配置路由转发与静态资源托管。

Blazor Server 与 WASM 混合部署模式教程

Blazor Server 和 Blazor WASM 并非互斥方案,混合部署能兼顾首屏速度、离线能力与服务端实时性——关键在于按场景拆分 路由,用反向代理做智能分发。

明确各自适用场景

Blazor Server 适合需要高实时性、强服务端依赖、低客户端算力要求的页面,比如后台管理中的实时监控看板、权限敏感的数据录入表单;Blazor WASM 更适合静态内容多、需离线访问、SEO 友好或跨平台 PWA 场景,例如帮助中心、产品介绍页、用户自助仪表盘(含本地缓存逻辑)。

路由级分离:前端 决定加载模式

不推荐在同一个项目里混用两种渲染模型,而是将应用按功能域拆成两个独立项目(BlazorServerAppBlazorWasmApp),再通过统一入口(如 ASP.NET Core Hosted 网站)协调。核心是让 浏览器 首次请求时就命中对应宿主:

  • /admin/* → 反向代理转发到 Blazor Server 应用(SignalR 连接保持)
  • /docs/*、/app/* → 静态托管 Blazor WASM 的 _framework/ 资源,由 Nginx 或 CDN 直接返回
  • 根路径 / 可设为重定向页或轻量门户页,用 JavaScript 检测网络 / 设备后跳转最优入口

共享代码与状态协同

共用类库(.NET Standard 2.1+)存放模型、服务接口、验证逻辑和可复用组件(注意:WASM 不支持部分 System.* API,如文件 IO、线程池)。状态同步靠 后端 统一 API 中心:

  • Blazor WASM 通过 HttpClient 调用 REST/GraphQL 接口,JWT 鉴权
  • Blazor Server 使用同样的接口封装(如 Refit 或自定义 ServiceClient),但可额外启用 SignalR Hub 实现实时推送(如通知提醒)
  • 用户登录态建议由 IdentityServer 或 ASP.NET Core Identity 统一管理,Cookie + Bearer Token 双模支持

部署与反向代理配置示例(Nginx)

一个典型 nginx.conf 片段:

location /admin/ {
  proxy_pass https://blazor-server-app/;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection “upgrade”;
}
location /docs/ {
  alias /var/www/blazor-wasm/docs/;
}
location /app/ {
  alias /var/www/blazor-wasm/app/;
}
location / {
  try_files $uri $uri/ /index.html;
}

注意:WASM 静态资源需开启 gzip、设置正确 MIME 类型(特别是 .dll 文件为 application/wasm),Server 端需配置 CORS 允许 WASM 域名调用 API。

基本上就这些。混合不是为了炫技,而是让每个请求走最合适的路径——Server 做它擅长的实时交互,WASM 承担轻量、自主、离线的部分。架构清晰了,维护和扩展反而更简单。

星耀云
版权声明:本站原创文章,由 星耀云 2025-12-20发表,共计1464字。
转载说明:转载本网站任何内容,请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。
text=ZqhQzanResources