Blazor WebAssembly を Azure Static Web Apps にデプロイ
Azure Static Web Apps (preview) で Blazor の Blazor WebAssembly アプリ をホスティングすることは、公式にサポートされているわけではないですが、実質できます。
関連 issue: Support for Blazor · Issue #20 · Azure/static-web-apps
実際にしているひとの記事:
- Deploy Blazor WebAssembly apps to Azure Static Web Apps | Christopher MANEU
- Azure App Service Static Web Apps に Blazor WASM と Azure Functions をデプロイする - Qiita
- Hosting Blazor WebAssembly in Azure Static Web Apps (Preview)
ルーティングで 404
Blazor アプリを発行したときに出力される wwwroot フォルダーを、Statiw Web Apps のアプリの場所と指定します。Static Web Apps Preview は、今のところ web.config による設定はできないようなので、Blazor アプリで出力される web.config は、Static Web Apps との組み合わせにおいては何も意味がないようです。wwwroot の上の階層を指定すると GitHub Actions で index.html が無いとして失敗しました。
Static Web Apps に Blazor アプリを配置すると、ルーティングで失敗することがあります(404 Not found ページになる)。Static Web Apps のルーティング設定方法 の routes.json で解決します。
routes.json ファイルを Blzoar アプリの wwwroot 以下に置きます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"routes": [ | |
{ | |
"route": "/*", | |
"serve": "/index.html", | |
"statusCode": 200 | |
} | |
] | |
} |
routes.json 無しのままでも、Blazor プロジェクトのテンプレートのままの /counter や /fetchdata は動作しましたが、@page でルーティングを変えると 404 になりました。
Git リポジトリに Blazor アプリを push するとアプリ実行時にエラー
Blazor アプリを発行した wwwroot 以下のファイルをを直接リポジトリに push して、アプリの URL を開いた場合、Web ブラウザーの console log に次のようなエラーが出力される場合があります。
Failed to find a valid digest in the 'integrity’ attribute for resource 'xxx’ with computed SHA-256 integrity 'xxx’. The resource has been blocked.
Git の設定で、改行コードが push 時に置き換わっている場合、改ざん検知で動きません。.gitattributes を追加して、Blazor アプリの出力フォルダー(ここでは publish)以下はすべて binary 指定することで解決しました。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
publish/** binary |
これは、Blazor アプリの制約ですが、Static Web Apps Preview では GitHub Actions でのみアプリをデプロイできる制約があるので、成果物(Blzaor アプリ)のみ、Static Web Apps に配置しようとすると、こういうことも起きますね。