Blazor WebAssemblyのアプリをS3とCloudFrontにデプロイ
Azure Static Web Appsの制限
Blazor WebAssemblyのアプリはAzure Static Web Appsを利用するとGitHub Actionsでビルドとデプロイが簡単にできるのでよかったのですが、以下のようなエラーが表示されてビルドに失敗しました。
The content server has rejected the request with: BadRequest
Reason: The size of the app content was too large. The limit for this Static Web App is 262144000 bytes.
Azure Static Web Appsの無料版ではStorage (Max Size per Deployment)が0.25 GBとなっていて、この制限のためにエラーになっているようです。
通常のBlazor WebAssemblyのアプリではこの制限に抵触することは少ないと思いますが、今回のケースではマークシートシステム Mark2は画像処理の高速化のためにAOTコンパイルを有効にしているため、ビルドした結果のファイルサイズが約275 MBとなってエラーが発生しました。
Azure Static Web Appsの有料版に切り替えることも考えたのですが、ひとまずAWSのS3とCloudFrontにデプロイすることにしました。
S3
以下の情報を参考にS3をセットアップしました。
CloudFront
CloudFrontの設定には以下のWebサイトを参考にしました。
デフォルトルートオブジェクトにindex.htmlを指定することに留意します。
これで基本的には動作するのですが、Auth0でログイン処理をしてコールバックされたときにエラーが発生しました。このエラーについては以下の記事の通りカスタムエラーレスポンスで403のときに/index.htmlを指定することで解決しました。
まとめ
Blazor WebAssemblyのアプリをS3とCloudFrontを利用してデプロイしました。比較的簡単にデプロイできましたが、いくつか手動の作業が発生しているので自動化していければと思っています。また、やはりAzure Static Web Appsを利用するのが簡単でよいので、有料版に移行することも検討しています。
Discussion