xin9le.net

Microsoft の製品/技術が大好きな Microsoft MVP な管理人の技術ブログです。

MudBlazor 標準の css / js が 404 になる場合の対処方法

Blazor ASP.NET Core

Blazor で綺麗な画面を作ろうと思ったら、まず UI Component ライブラリの利用を考えます。過去に利用経験があり、そこそこお気に入りなのが MudBlazor です。

久々に使ってみる機会があったので触ってみたら、導入段階でいきなり大きく躓いたので対処方法をメモ。

遭遇した事象

MudBlazor をプロジェクトに組み込もうとすると、NuGet 参照したあとに css / js を追加しておく必要があります。.NET 8 以降であれば App.razor に以下のように追加することになります。特に何も難しくなく、ほぼこれだけで下準備は終わりです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 2 つの css を末尾付近に追加 -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

    <HeadOutlet />
</head>
<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>

    <!-- js を末尾付近に追加 -->
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>
</html>

...が、いざデバッグ実行してみようとしたら css / js が 404 になりました！なぜ！

原因

何か実装を間違ったのかと思っていろいろ試してみた結果、環境変数の ASPNETCORE_ENVIRONMENT を Development 以外に設定すると発生することが分かりました。「Local みたいな独自の値を入れているときはどうするんじゃい！」と激おこぷんぷん丸ですね。

対処方法

ASPNETCORE_ENVIRONMENT を自由にしたいので、対処方法を探します。MudBlazor の導入ドキュメントには見当たらなかったのですが、GitHub で Issues を彷徨ってようやく発見しました。

NuGet Package に含まれている staticwebassets フォルダを参照するよう、明示的に Program.cs に記述することで回避できます。

var builder = WebApplication.CreateBuilder(args);
builder.WebHost.UseStaticWebAssets();  // ← これを追加

さらに調べていくと、ASP.NET Core Blazor の静的ファイル解決の仕様上 Development のときしか自動的に読み込まないようにしているみたいです。以下のドキュメントに記載がありました。

ASPNETCORE_ENVIRONMENT を Development 以外に設定したい方はご注意ください。僕は 2 時間以上を溶かしました。