ASP.NET Core Blazor 정적 파일

이 문서에서는 Blazor 정적 파일을 제공하기 위한 앱 구성에 대해 설명합니다.

Blazor 프레임워크 정적 파일

.NET 8 Blazor 이전 릴리스에서는 스크립트와 같은 Blazor 프레임워크 정적 파일이 정적 파일 미들웨어를 통해 제공됩니다. .NET 8 이상 Blazor 에서는 프레임워크 정적 파일이 엔드포인트 라우팅을 사용하여 매핑되고 정적 파일 미들웨어는 더 이상 사용되지 않습니다.

정적 웹 자산 프로젝트 모드

이 섹션은 .Client 웹앱의 Blazor 프로젝트에 적용됩니다.

웹앱 프로젝트의 필수 <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode> 설정 .Client 은 프로젝트가 호스트된 프로젝트의 Blazor 일부로 작동하도록 정적 자산 동작을 기본값으로 다시 되돌리기Blazor WebAssembly. SDK(Microsoft.NET.Sdk.BlazorWebAssembly)는 Blazor WebAssembly 서버가 라이브러리의 출력을 단순히 사용하는 "독립 실행형" 모드에서 작동하도록 특정 방식으로 정적 웹 자산을 구성합니다. 이는 웹앱에 Blazor 적합하지 않습니다. 여기서 앱의 WebAssembly 부분은 호스트의 논리적 부분이며 라이브러리처럼 동작해야 합니다. 예를 들어 프로젝트는 스타일 번들(예: BlazorSample.Client.styles.css)을 노출하지 않고 대신 호스트에 프로젝트 번들만 제공하므로 호스트가 자체 스타일 번들에 포함할 수 있습니다.

프로젝트에서 속성의 값(Default)을 변경하거나 제거하는 것은 지원되지 않습니다.<StaticWebAssetProjectMode>.Client

정적 파일 미들웨어

이 섹션은 서버 쪽 Blazor 앱에 적용됩니다.

앱의 요청 처리 파이프라인에서 UseStaticFiles를 호출하여 정적 자산을 클라이언트에 제공하도록 정적 파일 미들웨어를 구성합니다. 자세한 내용은 ASP.NET Core의 정적 파일을 참조하세요.

비Development 환경의 정적 파일

이 섹션은 서버 쪽 정적 파일에 적용됩니다.

로컬로 앱을 실행하는 경우 정적 웹 자산은 환경에서 기본적으로 Development 만 사용하도록 설정됩니다. 로컬 개발 및 테스트(예: )가 아닌 Development 환경에 정적 파일을 사용하도록 설정하려면 파일에서 호출 UseStaticWebAssetsWebApplicationBuilder 합니다Program. Staging

Warning

프로덕션 환경에서 호출되는 경우 프로젝트가 아닌 디스크의 별도 위치에서 파일을 제공하므로 프로덕션 환경에서 기능을 활성화하지 않도록 정확한 환경을 호출 UseStaticWebAssets 합니다. 이 섹션의 예제에서는 IsStaging을 호출하여 Staging 환경을 확인합니다.

if (builder.Environment.IsStaging())
{
    builder.WebHost.UseStaticWebAssets();
}

자산의 Blazor WebAssembly 접두사

이 섹션은 Web Apps에 Blazor 적용됩니다.

WebAssemblyComponentsEndpointOptions.PathPrefix 엔드포인트 옵션을 사용하여 자산의 접두사를 나타내는 경로 문자열을 Blazor WebAssembly 설정합니다. 경로는 참조된 Blazor WebAssembly 애플리케이션 프로젝트에 해당해야 합니다.

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "{PATH PREFIX}");

앞의 예제 {PATH PREFIX} 에서 자리 표시자는 경로 접두사이며 슬래시(/)로 시작해야 합니다.

다음 예제에서 경로 접두사는 다음으로 /path-prefix설정됩니다.

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "/path-prefix");

정적 웹 자산 기본 경로

이 섹션은 독립 실행형 Blazor WebAssembly 앱에 적용됩니다.

기본적으로 앱을 게시하면 게시된 출력의 루트 경로(/)에 프레임워크 파일(_framework폴더 자산)을 포함한 Blazor 앱의 정적 자산이 배치됩니다. 프로젝트 파일(.csproj)에 지정된 <StaticWebAssetBasePath> 속성은 기본 경로를 루트 이외의 경로로 설정합니다.

<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>

앞의 예제에서 {PATH} 자리 표시자는 경로입니다.

속성을 설정 <StaticWebAssetBasePath> 하지 않으면 독립 실행형 앱이 .에 /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/게시됩니다.

앞의 예제 {TFM} 에서 자리 표시자는 TFM(대상 프레임워크 모니커)입니다(예: net6.0).

독립 실행형 앱의 <StaticWebAssetBasePath> 속성이 게시된 정적 자산 경로를 app1설정하면 게시된 출력의 앱에 대한 루트 경로가 있습니다/app1.Blazor WebAssembly

독립 실행형 Blazor WebAssembly 앱의 프로젝트 파일(.csproj):

<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>

게시된 출력에서 독립 실행형 Blazor WebAssembly 앱의 경로는 .입니다 /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/.

앞의 예제 {TFM} 에서 자리 표시자는 TFM(대상 프레임워크 모니커)입니다(예: net6.0).

파일 매핑 및 정적 파일 옵션

이 섹션은 서버 쪽 정적 파일에 적용됩니다.

FileExtensionContentTypeProvider를 사용하여 추가 파일 매핑을 만들거나 다른 StaticFileOptions를 구성하려면 다음 방법 중 하나를 사용합니다. 다음 예제에서 {EXTENSION} 자리 표시자는 파일 확장명이고 {CONTENT TYPE} 자리 표시자는 콘텐츠 형식입니다. 다음 API의 네임스페이스는 .입니다 Microsoft.AspNetCore.StaticFiles.

• 다음을 사용하여 StaticFileOptions파일에서 DI(종속성 주입)를 Program 통해 옵션을 구성합니다.

  var provider = new FileExtensionContentTypeProvider();
  provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";
  
  builder.Services.Configure<StaticFileOptions>(options =>
  {
      options.ContentTypeProvider = provider;
  });
  
  app.UseStaticFiles();
  

• StaticFileOptions 파일에 직접 UseStaticFiles 전달합니다Program.

  var provider = new FileExtensionContentTypeProvider();
  provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";
  
  app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
  

추가 리소스

앱 기본 경로