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

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