blazor调试部署全过程

安装了最新的 dotnet SDK

最好直接下载安装版, 不要zip版, 安装版会自动注册一些信息, 省去后面的很多麻烦.
设置如下OS环境变量, 并重启计算机.
(1) 将 dotnet.exe 路径加到OS的 PATH 环境变量中.
(2) 设置 DOTNET_ROOT 环境变量, 取值为 C:\Program Files\dotnet
(3) 设置 NUGET_PACKAGES 环境变量, 用于存放 nuget 下载包的路径, 默认为 %userprofile%.nuget\packages
安装完毕, 通过下面命令检查sdk和runtime安装清单.

dotnet --info

安装 wasm-tools workload

dotnet workload list  ##检查是否安装 wasm-tools workload 
dotnet workload search ## 查询 wasm-tools workload 的准确名称
dotnet workload install wasm-tools ## 安装 wasm-tools 这个workload

新建 wasm 模板项目

dotnet new blazorwasm -o testProject --no-https

运行项目

cd testProject
dotnet run   ##运行项目
dotnet run --debug ## 运行程序with debug enabled
dotnet watch  ##热启动方式运行项目
dotnet test ##运行测试用例

浏览器调试

dotnet run --debug ## 运行程序with debug enabled
msedge --remote-debugging-port=9222 # 启动可调试的浏览器进程

• 浏览器打开 blazor 主页地址
• 在浏览器中按 Shift+Alt+D , 浏览器会开启一个带调试功能的tab页, 如果报错, 按照报错信息操作多数情况也会OK
• 在调试的tab的dev tools的源代码的 file:// 节点下的C#源码, 可以设置断点.

发布项目

dotnet publish -c Release  ## 按照Release configuration的方式发布项目

使用dotnet-serve部署项目

dotnet-serve 是一个轻量级的http server, 可以很方便地将当前目录发布成网站, 另外也支持很多配置项,

• 参考: https://github.com/pavelsavara/dotnet-wasm-todo-mvc
  使用 dotnet-serve 轻量级服务器: https://github.com/natemcmaster/dotnet-serve
• dotnet-serve 不支持 404 重定向, 所以通过浏览器地址直接访问非index页面都会报404错误
• 如果要支持 blazor base path, 比如 base path 为 /test2/, 命令行还是一样, 只需要将dotnet publish生成的所有文件从 D:\blazorDemo\bin\Release\net7.0\publish\wwwroot 移动到 D:\blazorDemo\bin\Release\net7.0\publish\wwwroot\test2 子目录即可.

dotnet tool install --global dotnet-serve  #下载并安装 dotnet-serve 
cd D:/blazorDemo/  # cd 到项目目录
 
# 启动
dotnet serve 
  --port 8080
  --mime .wasm=application/wasm 
  --mime .js=text/javascript 
  --mime .json=application/json 
  --directory bin\Release\net7.0\publish\wwwroot\

使用nginx部署项目

参考:

• https://blazorschool.com/tutorial/blazor-wasm/dotnet5/deploying-726802

• https://timheuer.com/blog/deploy-blazor-webassembly-applications-on-azure-using-github-actions-wasm/

• 下面 nginx.conf 文件已设置了404跳转, 可以支持url地址栏直接重定向.

• 如果要支持 blazor base path, 比如 base path 为 /test2/, nginx 也很容易即支持, nginx.conf 还是一样, 只需要将dotnet publish生成的所有文件从 D:\blazorDemo\bin\Release\net7.0\publish\wwwroot 移动到 D:\blazorDemo\bin\Release\net7.0\publish\wwwroot\test2 子目录即可.
  nginx 好像不支持 path-base.

http {
    include mime.types;
    types {
        application/wasm wasm;
    }
 
    server {
        listen 80;     
        server_name  localhost;        
         
        location / {
            root D:/blazorDemo/bin/Release/net7.0/publish/wwwroot;
            try_files $uri $uri/  /index.html =404;
        }
   
       gzip on; # 启动压缩
       gzip_min_length 5k; # 文件大小<5k不压缩，否则进行压缩处理
       gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，建议开启
       gzip_types      text/plain application/xml application/x-msdownload application/json application/wasm application/octet-stream;
       gzip_proxied    no-cache no-store private expired auth;
    }
}

使用 caddy2 部署项目

caddy很容易懂, 推荐使用.

• 下面 Caddyfile 已设置了404跳转, 可以支持url地址栏直接重定向.
• Caddy 服务端口需要在Caddyfile 的url中设定.
• 如果要支持 blazor base path, 比如 base path 为 /test2/, caddy 也很容易即支持, Caddyfile 还是一样, 只需要将dotnet publish生成的所有文件从 D:\blazorDemo\bin\Release\net7.0\publish\wwwroot 移动到 D:\blazorDemo\bin\Release\net7.0\publish\wwwroot\test2 子目录即可.

Caddyfile 内容:

http://localhost:8081 {
        root * D:\blazorDemo\bin\Release\net7.0\publish\wwwroot
        encode gzip
        file_server
        try_files {path} /index.html
        header / {
                Content-Security-Policy = "upgrade-insecure-requests; default-src 'self'; style-src 'self'; script-src 'self'; img-src 'self'; object-src 'self'; worker-src 'self'; manifest-src 'self';"
                Strict-Transport-Security = "max-age=63072000; includeSubDomains; preload"
                X-Xss-Protection = "1; mode=block"
                X-Frame-Options = "DENY"
                X-Content-Type-Options = "nosniff"
                Referrer-Policy = "strict-origin-when-cross-origin"
                Permissions-Policy = "fullscreen=(self)"
                cache-control = "max-age=0,no-cache,no-store,must-revalidate"
        }
        handle_errors {
                @404 {
                     expression {http.error.status_code}==404
                }
                rewrite @404 /index.html
                file_server
        }                  
}

Caddy2 启动命令:

.\caddy_windows_amd64.exe  start   --config  c:/Users/dorothy/Desktop/Caddyfile.txt
base