深入浅出Blazor webassembly之一种简单的部署方法

===================================
为什么SPA 需要设置 fallback ?
===================================

简单讲: 就是用来支持浏览器直接访问非主页url.

详细说明: 以blazor模版项目为例, 先访问首页, 然后点击主页上的 counter 链接, 浏览器地址变为 http://localhost:5000/counter. 但如果直接在浏览器访问 counter 的url, 会报 404 错误, 原因是:

1.前一个方法, 浏览器输入首页地址, 浏览器会向服务器端发成访问 index.html 请求,这个文件在服务器端存在, 是可以正常访问的,  然后浏览器渲染完主页, 点击主页上的counter 链接, 浏览器端直接切到 counter 视图, 因为 blazor web assembly是 SPA 页面, 所以真实的页面还是在 index.html, 浏览器地址上的变化是 blazor 框架修改的.

2.后一个方法, 直接在浏览器输入 http://localhost:5000/counter 后, 浏览器会向server 端请求 counter 资源, 因为 server 端并没有 counter.html 文件, 所以就会报 404 错误, 这个问题是所有SPA 框架都需要解决的, 即client side router 都有这个问题,  主流的 SPA 框架都是通过web server的 fallback 实现work-around.

 

===================================
blazor-devserver.exe 的特点
===================================

开发环境有时候需要用于demo, 这里介绍使用官方提供的 blazor-devserver.exe, 特别适合作为demo用,

优点有:

⒈ 使用非常方便, 开发环境自带该工具, 不需要额外安装nginx 或 配置 IIS

2. 自动支持fallback, 支持浏览器直接访问非主页url.

3. 自动支持资源压缩.  在IDE开发模式下, 对于官方模板项目, 浏览器一般需要下载多达10M的资源, 如果使用压缩方式, 可以节省4M以上流量

缺点:

1. 不支持远程访问, 只能在localhost上访问.

2. 不支持设置端口设置.

 

==============================

blazor-devserver.exe 的步骤

==============================

blazor-devserver.exe 不需要做任何配置即支持url rewrite,  假设项目名为 blazor2app , 完整步骤如下:

1. 进入项目根目录, 使用发布命令进行编译 , 按照 release 配置模式编译

    dotnet publish -c Release

   加上 Release 选项后,  进入publish 输出目录,  可以看到wwwroot目录,  

wwwroot目录下有多个子目录, 其中文件会有压缩版和非压缩版本

 

 

 2. 命令行 cd 到 publish 目录, 然后启动 blazor-devserver

  blazor-devserver.exe serve --applicationpath ".\wwwroot\_framework\blazor2app.dll"

 如果是subdirectory子目录形式, 还可以加上 --pathbase="/CoolApp" 参数

 

 

=====================

更多参考

=====================

更多部署优化, 可参考 https://www.meziantou.net/optimizing-a-blazor-webassembly-application-size.htm

https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly