blazor調試部署全過程

安裝了最新的 dotnet SDK

最好直接下載安裝版, 不要zip版, 安裝版會自動注冊一些信息, 省去后面的很多麻煩.
設置如下OS環境變量, 并重啟計算機.
(1) 將 dotnet.exe 路徑加到OS的 PATH 環境變量中.
(2) 注意dotnet SDK的版本要和社區提供template 的sdk要求一致, 如果本機安裝了多個SDK , 可以通過編輯一個 global.json 文件來切換sdk版本, global.json文件可通過 dotnet new globaljson 命令生成.
(3) 設置 DOTNET_ROOT 環境變量, 取值為 C:\Program Files\dotnet
(4) 設置 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 ##運行測試用例

問題:VS中編譯報錯:找不到資產文件 project.assets.json

VS2022 包找不到資產文件 “xxxx\obj\project.assets.json”運行NuGet包還原以生成此文件?
解決方法是: 對于使用 PackageReference 的項目, project.assets.json 文件用于維護項目的依賴項關系圖, 以確保計算機上安裝了必需的包. 但 project.assets.json 文件必須通過包管理器restore來生成, 通常是沒有被加到git/svn倉庫中, 所以我們會經常碰到這個錯誤, 解決方法是: 點擊VS的工具菜單/Nuget 包管理器/程序包管理器控制臺, 在VS 界面下方會出現一個控制臺輸入區, 輸入 dotnet restore 命令

問題: 如果 VS或VS code 運行報下面錯誤, 可以將 launchBrowser關閉 .

瀏覽器調試

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, 支持反向代理, 支持brotli和gzip壓縮, 新版本也已支持設置 fallback-file 重定向 404.

使用參考: https://github.com/pavelsavara/dotnet-wasm-todo-mvc
dotnet-serve github主頁: https://github.com/natemcmaster/dotnet-serve
如果要支持 blazor base path, 比如 base path 為 /test2/, 命令行還是一樣, 只需要將dotnet publish生成的wwwroot目錄的所有文件移動到 wwwroot\test2 子目錄下.

#下載并安裝 dotnet-serve 
dotnet tool install --global dotnet-serve  

# 必須 cd 到 index.html 所在的目錄, 否則 fallback-file 設置不生效
cd D:\blazorDemo\bin\Release\net7.0\publish\wwwroot\  

# 啟動
dotnet serve 
  --port 8080
  --address 0.0.0.0 
  --brotli
  --mime .wasm=application/wasm 
  --mime .js=text/javascript 
  --mime .json=application/json 
  --directory . 
  --fallback-file ./index.html
  --path-base <PATH>

使用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中設定, 一個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

posted @ 2022-11-13 21:45 harrychinese 閱讀(861) 評論(0) 收藏舉報

刷新頁面返回頂部

harrychinese