ASP.NET Coreで複数のSPAを配置する(C# .NET6)

普通にSinglePageApplicationを配置する方法はよく書かれていますが、
1つのサイトで複数のSPAを配置したい場合に少し困ったので覚書。

要件としては基本的にSPAで稼働したいが、
/ => メインアプリケーション
/admin => 権限ユーザ専用のページ
という感じでSPAを分割して配置する方法です。

権限管理するのでadmin以下に入れたとしても機能できないようには作るのですが、そもそもSPAのjsソース自体も簡単には見られたくないため、ページごと分けようとしました。

結論

#Program.cs

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
services
    .AddRazorPages()
    .AddRazorPagesOptions(options => 
        {
            options.Conventions.AddPageRoute("/admin", "admin/{*url}");
        });

AddRazorPagesOptionsでAddPageRouteの第2引数を*指定にすればOKです。
あとは自動的にPages/Adminが呼び出されるため、返すページをSPAな中身にすればOK.
通常のRazorPageと同じ扱いになるため、Role管理かPolicy管理で制御すればファイルを見られずに済みます。

あとはSPA足したければ足したい数だけRouteに追加すればOK.

別の方法

wwwrootに置いたadmin.htmlファイルを参照するように返す方法はこちらです。

#Program.cs

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.UseWhen(
    context => context.Request.Path.HasValue && context.Request.Path.Value.StartsWith("/admin"), appBuilder =>
    {
        appBuilder.UseStaticFiles();

        appBuilder.Run(
            async context =>
            {
                await context.Response.SendFileAsync(
                    Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "html", "admin.html"));
            });
    });

リクエストのPathをStartWithで判定しているため、/adminHogeのようなパスもadmin.htmlを返してしまうのが難点です。
加えて単に静的ファイルを返すだけなので、[Authorize] Attributeのようなものも使えません。自力で書く必要があると思われます。

コメント