Hello Blazor：(6)你必须踩过这5个坑，才算学会部署Blazor WebAssembly到静态网站
上次的文章中，我們介紹了Blazor WebAssembly可以部署到靜態文件服務器，而每個Github賬戶都可以使用GitHub Pages功能開一個自己的靜態網站。
那么，不用花錢購買服務器，就可以將Blazor WebAssembly項目部署到GitHub Pages作為demo展示。
但是，你首先要踩過5個坑！
1.部署
可能有不熟悉部署流程的朋友，如果你了解，可以直接跳到第2部分。
1.1創建Github Pages
登錄Github后，創建一個倉庫，比如HelloBlazor。
訪問https://github.com/用戶名/倉庫名/settings/pages，為Source選擇main分支并保存。
1.2生成發布文件
在Blazor wasm項目上點右鍵，選擇“發布”，目標選擇“文件夾”。
點擊“發布”按鈕，將項目發布到本地目錄bin\Release\net5.0\browser-wasm\publish\。
1.3上傳網站
clone倉庫到本地。由于可能要上傳多個項目，所以每個項目建一個子文件夾。
創建Demo目錄，將bin\Release\net5.0\browser-wasm\publish\wwwroot下的所有文件復制到Demo目錄下。
推送本地文件到遠程倉庫。
1.4訪問網站
使用https://用戶名.github.io/HelloBlazor/Demo/即可訪問網站。
你以為結束了？
不，下面才正式開始！
2.踩坑
2.1 所有資源文件404
現象
訪問網站，提示An unhandled error has occurred.，使用瀏覽器開發者工具，發現所有資源文件無法訪問，返回404錯誤：
解決
修改index.html：
<base?href="/"?/>改成
<base?href="/HelloBlazor/Demo/"?/>原理
默認是發布到網站根目錄，需要指定成部署的根目錄。
2.2 blazor.webassembly.js 404
現象
除了blazor.webassembly.js還是返回404錯誤，其他資源文件都能正常訪問：
解決
在倉庫根目錄下添加一個空文件.nojekyll。
原理
GitHub Pages默認基于Jekyll生成靜態頁面。而Jekyll將帶有下劃線的文件和目錄認為是特殊資源，不予處理。
而blazor.webassembly.js位于帶有下劃線的_framework目錄下，.nojekyll文件就是告訴GitHub不要忽略掉下劃線開頭的文件和文件夾。
2.3 Failed to find a valid digest in the 'integrity' attribute for resource
現象
已經沒有404錯誤了，但是console窗口卻有如下錯誤提示：?
解決
在倉庫根目錄下添加一個.gitattributes文件，內容如下：
*?binary刪除Demo目錄下所有文件，重新生成發布上傳。
原理
當Blazor WebAssembly下載應用的啟動文件時，會檢查文件的SHA-256哈希值，確保不會出現加載不一致文件的風險。
但是，git在windows下會自動將文件中的換行符CRLF轉成LF，這樣就造成文件的哈希值變化。
.gitattributes文件就是告訴git當前都是二進制文件，不要處理。普通代碼倉庫慎用此配置
2.4 刷新頁面后404
現象
現在，網站可以正常訪問了。
但是當點擊其他菜單后，刷新頁面則會顯示404頁面：?
解決
在倉庫根目錄下添加一個文件404.html，文件內容如下：
<!DOCTYPE?html> <html><head><meta?charset="utf-8"><script?type="text/javascript">var?segmentCount?=?2;var?l?=?window.location;l.replace(l.protocol?+?'//'?+?l.hostname?+?(l.port???':'?+?l.port?:?'')?+l.pathname.split('/').slice(0,?1?+?segmentCount).join('/')?+?'/?p=/'?+l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g,?'~and~')?+(l.search???'&q='?+?l.search.slice(1).replace(/&/g,?'~and~')?:?'')?+l.hash);</script></head><body></body> </html>修改index.html，在<head>節下增加如下代碼：
<script>(function?(l)?{if?(l.search)?{var?q?=?{};l.search.slice(1).split('&').forEach(function?(v)?{var?a?=?v.split('=');q[a[0]]?=?a.slice(1).join('=').replace(/~and~/g,?'&');});if?(q.p?!==?undefined)?{window.history.replaceState(null,?null,l.pathname.slice(0,?-1)?+?(q.p?||?'')?+(q.q???('?'?+?q.q)?:?'')?+l.hash);}}}(window.location)) </script>原理
/counter實際是前端路由地址，網站無法找到對應目錄下的index.html文件，因此跳轉到404頁面。
而通過自定義404頁面，可以檢查當前URL，截取出網站根目錄地址。
注意，這里我們設置了segmentCount = 2，因為對應站點有2級子目錄。
路由將作為p參數的值，替換window.location跳轉回網站首頁。
index.html檢查當前URL，如果包含p參數，則把p參數的值轉換回路由地址。
2.5 開發環境所有資源文件404
現象
這回，網站終于真的可以正常訪問了。
但是在開發環境調試時，所有資源文件返回404錯誤：
解決
修改index.html，在<head>節下增加如下代碼：
<script>var?base?=?document.getElementsByTagName('base')[0];if?(window.location.hostname=='localhost')?{base.setAttribute('href',?'/');}? </script>原理
因為我們為了部署，改了根地址：
<base?href="/HelloBlazor/Demo/"?/>但是，調試環境又是基于網站根目錄。
所以需要動態把它設置回來。
結論
人，總在不斷踩坑中成長。
希望這篇文章，能幫助你避開一些坑，在成長的路上走得更快更遠！
如果你覺得這篇文章對你有所啟發，請關注我的個人公眾號”My IO“，記住我！
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Hello Blazor：(6)你必须踩过这5个坑，才算学会部署Blazor WebAssembly到静态网站的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [005] .NET 的执行模型
- 下一篇： 一些微服务拆分的浅见