ASP.NET Core Blazor WebAssembly에서 구성 파일 처리

문서를 가볍게 접해 보면 Blazor WebAssembly 로, 이미 구성 파일의 취급까지 서포트하고 있군요.

ASP.NET Core Blazor hosting model configuration

그래서 시도해 보았습니다.

Blazor WebAssembly 프로젝트를 생성합니다.

NuGet 패키지 관리에서 Blazor 주변의 라이브러리가 3.2의 Preview 3 이상인지 확인합니다.

그럼, 구성 파일을 두고 둡시다. Blazor WebAssembly에서는 wwwroot 아래에 구성 파일을 넣는 것 같습니다. 이런 식으로.



각각의 내용은 이렇게 해 보았습니다.

appsettings.json

{
  "message":  "Hello from appsettings.json"
}

appsettings.Development.json

{
  "envMessage":  "Hello from appsettings.Development.json"
}

appsettings.Production.json

{
  "envMessage": "Hello from appsettings.Production.json"
}

그런 다음 Program.cs에서 다음과 같이 IConfiguration에서 적절한 클래스로 매핑하여 DI를 준비 할 수 있습니다.

Program.cs

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Configuration;

namespace BlazorApp3
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddBaseAddressHttpClient();

            // IConfiguration から AppSettings クラスにして DI できるようにしておく
            builder.Services.AddSingleton(p => p.GetRequiredService<IConfiguration>().Get<AppSettings>());

            await builder.Build().RunAsync();
        }

    }

    // appsettings.json の値を入れるよう
    public class AppSettings
    {
        public string Message { get; set; }
        public string EnvMessage { get; set; }
    }
}

그리고는, 보통으로 DI 하는 되어 사용합시다. 이런 식으로

Index.razor

@page "/"
@inject AppSettings _appSettings
<h1>Hello, world!</h1>

Welcome to your new app.

<p>@_appSettings.Message</p>
<p>@_appSettings.EnvMessage</p>

덧붙여 Program.cs 에서 Configure 메소드로 DI 컨테이너에 등록해 IOptions<T> 로 받는 것은 할 수 없었습니다. Configure 를 하려면 , IConfiguration 의 인스턴스가 필요해, 그것을 하려고 하면 builder.Build().Configuration 로 취득하지 않으면 안됩니다만, builder.Build() 는 2 회 하면 appsettings.json 읽게 되는 것 같고, 거기서 예외가 나오는 것처럼 보입니다. (깊은 추격은하지 않습니다.

Blazor의 앱을 실행해 보면 제대로 된 메시지가 나옵니다. 개발자 도구를 살펴보면 서버에서 appsettings.json 및 appsettings.Development.json을 검색하고 있음을 알 수 있습니다.



Production은 어딘가에 배포되면로드됩니다. 시도하기 위해 Azure 저장소 계정의 Blob 정적 사이트 호스팅 기능을 사용하여 만든 사이트에 넣어 보았습니다. 게시를 수행하고 게시 폴더의 wwwroot 폴더 아래를 모두 Blob의 $web 컨테이너에 복사합니다.

이번에는 제대로 Hello from appsettings.Production.json 이라는 메시지가 나오네요.

요약

제대로 움직이네요. 그래서 문서에도 쓰여져 있습니다만, 이러한 구조이므로 URL에 appsettings.json 라고 넣으면 원시 JSON이 손에 들어 버리므로, 잘못해도 비밀한 정보는 쓰지 않게 조심해 생강.