Blazor WebAssembly を Azure Static Web Apps にデプロイ

DevelopmentAzure, Azure Static Web Apps, Blazor

Azure Static Web Apps (preview) で BlazorBlazor WebAssembly アプリ をホスティングすることは、公式にサポートされているわけではないですが、実質できます。

関連 issue: Support for Blazor · Issue #20 · Azure/static-web-apps

実際にしているひとの記事:

ルーティングで 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 以下に置きます。

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 指定することで解決しました。

これは、Blazor アプリの制約ですが、Static Web Apps Preview では GitHub Actions でのみアプリをデプロイできる制約があるので、成果物(Blzaor アプリ)のみ、Static Web Apps に配置しようとすると、こういうことも起きますね。