🎉
.NET 8 -> 10 移行メモ（Blazor Web App/Server）
はじめに
これは、Blazor Web App (Server) を、.NET 8 から .NET 10 へ移行した際に施した処置のメモです。
対象アプリと環境
その他
変更点
ターゲットフレームワーク
当たり前の話ではありますが、一応、念のため。
Project.csproj
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
- <TargetFramework>net8.0</TargetFramework>
+ <TargetFramework>net10.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<ItemGroup>
~
</ItemGroup>
~
</Project>
スタートアップ・プロセス
-
SignalRの
_blazor/negotiateは、ベースパスを考慮しないため、UsePathBaseだけだとルートに配置されてしまいます。- アプリをサブパスにデプロイする場合に必要な措置で、ルートに配置する場合は不要です。
-
UseStaticFilesがMapStaticAssetsに置き換わりました。(.NET 9)
Program.cs
~
-var basePath = builder.Configuration ["AppBasePath"];
+var basePath = builder.Configuration ["AppBasePath"]?.TrimEnd ('/');
if (!string.IsNullOrEmpty (basePath)) {
app.UsePathBase (basePath);
+ app.MapBlazorHub ($"{basePath}/_blazor");
}
~
-app.UseStaticFiles ();
+app.MapStaticAssets ();
~
ベースコンポーネント
-
Assets["~"]は、MapStaticAssetsと連動して、静的アセットへの適正なパスを生成します。(.NET 9)-
@Assets ["~"]だと、@の適用範囲でエラーします。@(Assets ["~"])なら大丈夫ですね。
-
-
ResourcePreloaderは、静的アセットのプリロードで、ベースパス構成のおまじないみたいです。(理解してないけど、重要なのは<base href="~" />の直後に置くことです。) -
ImportMapは、クライアント側のフィンガープリントのおまじないらしいです。
App.razor
~
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="@basePath" />
+ <ResourcePreloader />
- <link rel="stylesheet" href="app.css" />
- <link rel="stylesheet" href="Project.styles.css" />
+ <link rel="stylesheet" href="@Assets["app.css"]" />
+ <link rel="stylesheet" href="@Assets["Project.styles.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" />
+ <link href="@Assets["_content/MudBlazor/MudBlazor.min.css"]" rel="stylesheet" />
+ <ImportMap />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes @rendermode="RenderMode.InteractiveServer" />
- <script src="_framework/blazor.web.js"></script>
- <script src="_content/MudBlazor/MudBlazor.min.js"></script>
- <script src="js/ProjectUtilities.js"></script>
+ <script src="@Assets["_framework/blazor.web.js"]"></script>
+ <script src="@Assets["_content/MudBlazor/MudBlazor.min.js"]"></script>
+ <script src="@Assets["js/ProjectUtilities.js"]"></script>
</body>
</html>
basePath
アプリをサブパスにデプロイする場合に必要な措置で、ルートに配置する場合は不要です。
App.razor.cs
/// <summary>ベースパス</summary>
protected string basePath = "/";
/// <summary>初期化</summary>
protected override void OnInitialized () {
base.OnInitialized ();
basePath = Config.GetValue<string> ("AppBasePath") ?? "/";
if (!string.IsNullOrEmpty (basePath) && !basePath.EndsWith ('/')) {
basePath += '/';
}
}
補足
以下は、.NET移行と関係ありません。
ログインで「このブラウザまたはアプリは安全でない可能性があります。」
launchSettings.jsonに以下の値が不足している可能性があります。
launchSettings.json
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
デバッグにWSLを使っている場合は、いったんhttpsに切り替えることで、ログインできる可能性があります。
いちどログインすれば、WSLに戻しても問題なく使用できます。
複数のWSLからデバッグ環境を選択する
WSL2のUbuntu(22)を24にしようとして、なんだか面倒なことになったので、Debian(13)に入れ直しました。
引っ越しはDBのダンプとロードくらいでした。(何か忘れてなければ…)
まだ、Ubuntuも消してないので、launchSettings.jsonに"distributionName": "Debian"が必要です。
資料
おわりに
最後までお読みいただきありがとうございました。
何かお気づきの際は、是非ご指摘ください。
Discussion