Blazor Serverの.NET 8以降(App.razor)の相対ディレクトリ指定

はじめに

前記事で.NET 7から.NET 8への移行について書いたのですが、その後に追加したい内容が見つかったので別記事にしました。

現象

.NET 8に変更したアプリケーションを、Visual Studioのデバッグ環境でしか動かしていませんでしたが、Webサーバー上にデプロイメントしてくれとの依頼があったので、.NET 7の時と同じ感覚でデプロイしたところ表示がおかしいことに気が付きました。CSSなどが全然効いていなかったのです。

CSSのURLの参照先を見ると、ホスト名直下の指定になっておりました。
IIS上にはディレクトリとしてエイリアス名(例 TEST)を指定していますので、エイリアス名の直下のCSSが指定されていなければなりません。

原因

.NET 7の時には、_Host.cshtml では base タグには、チルダ(~)が指定されていました。
チルダ(~)は、ルートディレクトリからの相対ディレクトリを指定できる役割があります。

_host.cshtml

<base href="~/" />

.NET 8で、_Host.cshtmlファイルからApp.razorファイルに変更した際、base タグのチルダ(~)は無くなりました。Visual Studioのデバッグ環境でしか動かしてなかったので気が付かなかった。

App.razor

<base href="/" />

対応

App.razorでも同様にbase タグのチルダ(~)を付ければいいのではと思いますよね。
でも、今度はVisual Studioのデバッグ環境でCSSやJavascriptが効かなく正しくレンダリングされないのです。

暫定対応

デプロイ時だけ、エイリアス名を追加して発行すればいい。時間が無かったので、この方法で暫定対応しました。

App.razor

<base href="TEST/" />

しかし、この方法はデプロイされる場所を事前に把握しておく必要があります。チルダ(~)指定であれば好きな場所に配置できていたので、これは不便です。

最終対応

その後 reddit にいい記事を見つけました。この方法でデプロイして問題なく動作しました。

How to utilize ~/ in Blazor .NET 8.0 - reddit

App.razor

<base href="@BaseUrl" />

@code
{
    [CascadingParameter] private HttpContext HttpContext { get; set; } = default!;
    private string BaseUrl => $"{HttpContext.Request.PathBase}/";
}

最後に

プログラムのアルゴリズムで悩むならともかく、こういう設定がらみで悩むのはキツいです。情報発信してくれた方に感謝するしかない。