Github Pages 裝載和部署 ASP.NET Core Blazor WebAssembly

2021-04-09

筆記下各種問題 404 Hash Decode … ETC.

Failed to find a valid digest in the 'integrity' in Blazor WASM

首先將 publish 出來的 wwwroot 當作 root push 到 github 的 {yourname}.github.io 倉儲

以我為例子 push 到 https://github.com/jakeuj/BlazorOnGitHubPages

然後就可以打開 Github Pages https://jakeuj.github.io/BlazorOnGitHubPages/

然後就會遇到一連串問題…

_framework/blazor.webassembly.js

404 NotFound

這是因為 git 使用 Jekyll 會忽略底線開頭的資料夾導致找不到檔案

解法：於 root 加入 .nojekyll 這個檔案，內容保持空白即可

然後會遇到卡在 Loading…的問題，查看 console 會發現是 Hash 校驗失敗

這是因為 git 在 windows 會自動將換行符號 CRLF 轉成 LF

導致 Hash 計算時因為少了一個 CR (看不到的控制字元) 所以結果會不一樣

解法：於 root 加入 .gitattributes 這個檔案，內容輸入一行 * binary

然後輸入以下 git 命令來重新套用正規化後提交並推送回 github

git add --renormalize .

再來參照以下文檔將 UrlRewrite 用 JS 替代

這邊會新增 wwwroot/404.html 並修改 wwwroot/index.html

再來參照以下文檔引用 decode.js 來對 br 進行解碼

這邊會新增 wwwroot/decode.js 並修改 wwwroot/index.html 來引用 decode.js

如果遇到 index.html 的 Hash 驗證失敗

可能是直接修改了 publish 出來的 index.html 這個檔案

解法：從專案的 wwwroot/index.html 開始改並重新發布一次

或是將 console 出現的新 hash 值更新到 root 下的 service-worker-assets.js

{
    "hash": "sha256-Eb5dFznqwMb/jb9shi278KGCYpxylEj333x6RV8gyRI=",
    "url": "index.html"
}

再 commit & push to Github

最後看 console 應該剩一個例外

但可以成功看到畫面並正常運作

如果 Github Pages 是使用專案模式 (每個專案一個網站)
需要把 index.html 裡面的 baseUrl 加上專案名稱
<base href="/BlazorOnGitHubPages/" />
如果要用 GitHub Actions 做 CI/CD
需要設定 .github/workflows/main.yml
我這份是用 .Net 5.0 如果是 3.x 需要行修改 PUBLISH_DIR
push 到 master 會自動 publish 到 gh-pages 分支給 github pages 吃
結論：所有需要變更的東西請參考這個 commit

參照：https://github.com/jakeuj/BlazorOnGitHubPages

御用小本本