blazor调试部署全过程

标签：-- self ## 404 wasm 全过程 dotnet 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部署项目

参考: https://github.com/pavelsavara/dotnet-wasm-todo-mvc
使用 dotnet-serve 轻量级服务器: https://github.com/natemcmaster/dotnet-serve
dotnet-serve 不支持 path-base 和 404 重定向.

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部署项目

参考:

下面nginx.conf 文件已设置了404跳转, 可以支持url地址栏直接重定向.
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 部署项目

下面 Caddyfile 已设置了404跳转, 可以支持url地址栏直接重定向.
要支持 blazor base path, Caddyfile 估计要设置 route 指令, 以后再测试一下.

Caddyfile 内容:

http://localhost:8081 {
        root * D:\blazorDemo\bin\Release\net7.0\publish\wwwroot
        encode gzip
        file_server
        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
        }   
       # route /test2 {
       #     uri strip_prefix /test2
       #     reverse_proxy localhost:8081
       # }                  
}

Caddy2 启动命令:

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

标签：--,self,##,404,wasm,全过程,dotnet,blazor,调试
From： https://www.cnblogs.com/harrychinese/p/blazor_devops.html