ASP.NET Core Blazor 정적 파일

아티클
07/31/2024

참고 항목

이 문서의 최신 버전은 아닙니다. 현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Warning

이 버전의 ASP.NET Core는 더 이상 지원되지 않습니다. 자세한 내용은 .NET 및 .NET Core 지원 정책을 참조 하세요. 현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

Important

이 정보는 상업적으로 출시되기 전에 실질적으로 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적, 또는 묵시적인 보증을 하지 않습니다.

현재 릴리스는 이 문서의 .NET 8 버전을 참조 하세요.

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

정적 자산 미들웨어

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

정적 자산 제공은 다음 표에 설명된 두 미들웨어 중 하나에서 관리됩니다.

미들웨어	API	.NET 버전	설명
정적 자산 매핑	`MapStaticAssets`	.NET 9 이상	클라이언트에 정적 자산 배달을 최적화합니다.
정적 파일	UseStaticFiles	모든 .NET 버전	최적화 `MapStaticAssets` 없이 클라이언트에 정적 자산을 제공하지만 관리할 수 없는 일부 작업에 `MapStaticAssets` 는 유용합니다.

다음을 수행하는 앱의 요청 처리 파이프라인에서 호출 MapStaticAssets 하여 맵 정적 자산 미들웨어를 구성합니다.

ETag 및 마지막으로 수정한 헤더를 설정합니다.
캐싱 헤더를 설정합니다.
캐싱 미들웨어를 사용합니다.
가능하면 압축된 정적 자산을 제공합니다.
CDN(Content Delivery Network)(예 : Azure CDN)과 협력하여 앱의 정적 자산을 사용자에게 더 가깝게 제공합니다.
이전 버전의 파일을 다시 사용할 수 없도록 자산 지문을 지정합니다.

MapStaticAssets 는 빌드 및 게시 프로세스를 결합하여 앱의 정적 자산에 대한 정보를 수집하여 작동합니다. 이 정보는 런타임 라이브러리에서 브라우저에 정적 자산을 효율적으로 제공하기 위해 활용됩니다.

MapStaticAssets 는 대부분의 상황에서 바꿀 UseStaticFiles 수 있습니다. 그러나 MapStaticAssets 빌드 및 게시 시간에 앱의 알려진 위치에서 자산을 제공하는 데 최적화되어 있습니다. 앱이 디스크 또는 포함된 리소스 UseStaticFiles 와 같은 다른 위치에서 자산을 제공하는 경우 사용해야 합니다.

MapStaticAssets는 프레임워크 파일을 제공하는 Blazor WebAssembly 앱에서 호출 Blazor Web App UseBlazorFrameworkFiles UseBlazorFrameworkFiles 을 대체하며, 호출할 때 API가 자동으로 호출되므로 명시적으로 호출AddInteractiveWebAssemblyComponents할 필요가 없습니다.

MapStaticAssets 는 호출 UseStaticFiles할 때 사용할 수 없는 다음과 같은 이점을 제공합니다.

JavaScript(JS) 및 스타일시트를 비롯한 앱의 모든 자산에 대한 빌드 시간 압축이지만 이미 압축된 이미지 및 글꼴 자산은 제외됩니다. Gzip (Content-Encoding: gz) 압축은 개발 중에 사용됩니다. Brotli(Content-Encoding: br) 압축을 사용하는 Gzip은 게시 중에 사용됩니다.
각 파일의 콘텐츠에 대한 SHA-256 해시의 Base64로 인코딩된 문자열을 사용하여 빌드 시 모든 자산에 대한 지문입니다. 이렇게 하면 이전 파일이 캐시된 경우에도 이전 버전의 파일을 다시 사용할 수 없습니다. 지문 자산은 지시문을 사용하여 immutable 캐시되므로 브라우저에서 변경될 때까지 자산을 다시 요청하지 않습니다. 지시문을 지원하지 않는 브라우저의 immutable 경우 지시문이 max-age 추가됩니다.
- 자산이 지문이 아닌 경우에도 파일의 지문 해시를 값으로 사용하여 각 정적 자산에 대해 콘텐츠 기반 ETags 이 ETag 생성됩니다. 이렇게 하면 콘텐츠가 변경되거나 파일이 처음으로 다운로드되는 경우에만 브라우저에서 파일을 다운로드할 수 있습니다.
- 내부적으로 Blazor 물리적 자산을 지문에 매핑하여 앱에서 다음을 수행할 수 있습니다.
  - '의 CSS 격리 기능에 대한 Blazor구성 요소 범위 CSS 및 가져오기 맵에서 설명하는JS 자산과 JS 같이 Razor 자동으로 생성된 Blazor 자산을 찾습니다.
  - 페이지의 콘텐츠에 링크 태그를 <head> 생성하여 자산을 미리 로드합니다.
Visual Studio 핫 다시 로드 개발 테스트 중:
- 앱이 실행되는 동안 파일이 변경되는 문제를 방지하기 위해 자산에서 무결성 정보가 제거됩니다.
- 정적 자산은 브라우저가 항상 현재 콘텐츠를 검색하도록 캐시되지 않습니다.

Interactive WebAssembly 또는 대화형 자동 렌더링 모드를 사용하는 경우:

Blazor 는 리소스 컬렉션을 모듈로 노출하는 엔드포인트를 만듭니다 JS .
URL은 WebAssembly 구성 요소가 페이지에 렌더링될 때 지속형 구성 요소 상태로 요청 본문에 내보내집니다.
WebAssembly 부팅 Blazor 중에 URL을 검색하고, 모듈을 가져오고, 함수를 호출하여 자산 컬렉션을 검색하고 메모리에 다시 생성합니다. URL은 콘텐츠와 관련이 있으며 영원히 캐시되므로 이 오버헤드 비용은 앱이 업데이트될 때까지 사용자당 한 번만 지불됩니다.
리소스 컬렉션은 사람이 읽을 수 있는 URL(_framework/resource-collection.js)에도 노출되므로 JS 향상된 탐색을 위해 리소스 컬렉션에 액세스하거나 다른 프레임워크 및 타사 구성 요소의 기능을 구현할 수 있습니다.

Map Static Assets 미들웨어는 축소 또는 기타 파일 변환을 위한 기능을 제공하지 않습니다. 축소는 일반적으로 사용자 지정 코드 또는 타사 도구에서 처리됩니다.

정적 파일 미들웨어(UseStaticFiles)는 처리할 수 없는 다음과 같은 상황에서 MapStaticAssets 유용합니다.

자산의 접두사 Blazor WebAssembly 섹션에서 다루는 정적 자산 파일에 경로 접두사 Blazor WebAssembly 적용
특정 콘텐츠 형식에 대한 확장 프로그램의 파일 매핑을 구성하고 정적 파일 옵션을 설정합니다. 이 옵션은 파일 매핑 및 정적 파일 옵션 섹션에서 다룹니다.

맵 정적 파일 미들웨어를 사용하여 자산 사용

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

자산은 지정된 자산에 ComponentBase.Assets 대한 지문 URL을 확인하는 속성을 통해 소비됩니다. 다음 예제에서는 부트스트랩, Blazor 프로젝트 템플릿 앱 스타일시트(app.css) 및 CSS 격리 스타일시트가 루트 구성 요소( 일반적으로 App 구성 요소)Components/App.razor에 연결됩니다.

<link rel="stylesheet" href="@Assets["bootstrap/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["BlazorWeb-CSharp.styles.css"]" />

맵 가져오기

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

ImportMap 구성 요소는 모듈 스크립트에 대한 가져오기 맵을 정의하는 가져오기 맵 요소(<script type="importmap"></script>)를 나타냅니다. ImportMap 구성 요소는 일반적으로 구성 요소(Components/App.razor)인 루트 구성 요소의 콘텐츠에 App 배치 <head> 됩니다.

<ImportMap />

사용자 지정 ImportMapDefinition 이 구성 요소에 ImportMap 할당되지 않은 경우 가져오기 맵은 앱의 자산에 따라 생성됩니다.

다음 예제에서는 사용자 지정 가져오기 맵 정의 및 만드는 가져오기 맵을 보여 줍니다.

기본 가져오기 맵:

new ImportMapDefinition(
    new Dictionary<string, string>
    {
        { "jquery", "https://cdn.example.com/jquery.js" },
    },
    null,
    null);

위의 코드는 다음과 같은 가져오기 맵을 생성합니다.

{
  "imports": {
    "jquery": "https://cdn.example.com/jquery.js"
  }
}

범위가 지정된 가져오기 맵:

new ImportMapDefinition(
    null,
    new Dictionary<string, IReadOnlyDictionary<string, string>>
    {
        ["/scoped/"] = new Dictionary<string, string>
        {
            { "jquery", "https://cdn.example.com/jquery.js" },
        }
    },
    null);

위의 코드는 다음과 같은 가져오기 맵을 생성합니다.

{
  "scopes": {
    "/scoped/": {
      "jquery": "https://cdn.example.com/jquery.js"
    }
  }
}

무결성을 사용하여 맵 가져오기:

new ImportMapDefinition(
    new Dictionary<string, string>
    {
        { "jquery", "https://cdn.example.com/jquery.js" },
    },
    null,
    new Dictionary<string, string>
    {
        { "https://cdn.example.com/jquery.js", "sha384-abc123" },
    });

위의 코드는 다음과 같은 가져오기 맵을 생성합니다.

{
  "imports": {
    "jquery": "https://cdn.example.com/jquery.js"
  },
  "integrity": {
    "https://cdn.example.com/jquery.js": "sha384-abc123"
  }
}

가져오기 맵 정의(ImportMapDefinition)를 .와 결합 ImportMapDefinition.Combine합니다.

정적 자산을 해당 고유 URL에 ResourceAssetCollection 매핑하는 맵을 만듭니다.

ImportMapDefinition.FromResourceCollection(
    new ResourceAssetCollection(
    [
        new ResourceAsset(
            "jquery.fingerprint.js",
            [
                new ResourceAssetProperty("integrity", "sha384-abc123"),
                new ResourceAssetProperty("label", "jquery.js"),
            ])
    ]));

위의 코드는 다음과 같은 가져오기 맵을 생성합니다.

{
  "imports": {
    "./jquery.js": "./jquery.fingerprint.js"
  },
  "integrity": {
    "jquery.fingerprint.js": "sha384-abc123"
  }
}

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

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

정적 파일 `<link>` `href` 형식 요약

이 섹션은 모든 .NET 릴리스 및 Blazor 앱에 적용됩니다.

다음 표에는 .NET 릴리스의 정적 파일 <link> href 형식이 요약되어 있습니다.

정적 파일 링크가 배치되는 콘텐츠의 <head> 위치는 ASP.NET Core Blazor 프로젝트 구조를 참조하세요. 개별 Razor 구성 요소의 구성 요소를 사용하여 <HeadContent> 정적 자산 링크를 제공할 수도 있습니다.

정적 파일 링크가 배치되는 콘텐츠의 <head> 위치는 ASP.NET Core Blazor 프로젝트 구조를 참조하세요.

.NET 9 이상

앱 유형	`href` 값	예제
Blazor Web App	`@Assets["{PATH}"]`	`<link rel="stylesheet" href="@Assets["app.css"]" />` `<link href="@Assets["_content/ComponentLib/styles.css"]" rel="stylesheet" />`
Blazor Server†	`@Assets["{PATH}"]`	`<link href="@Assets["css/site.css"]" rel="stylesheet" />` `<link href="@Assets["_content/ComponentLib/styles.css"]" rel="stylesheet" />`
독립 실행형 Blazor WebAssembly	`{PATH}`	`<link rel="stylesheet" href="css/app.css" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`

.NET 8.x

앱 유형	`href` 값	예제
Blazor Web App	`{PATH}`	`<link rel="stylesheet" href="app.css" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
Blazor Server†	`{PATH}`	`<link href="css/site.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
독립 실행형 Blazor WebAssembly	`{PATH}`	`<link rel="stylesheet" href="css/app.css" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`

.NET 7.x 이하

앱 유형	`href` 값	예제
Blazor Server†	`{PATH}`	`<link href="css/site.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
호스트 Blazor WebAssembly되는 경우	`{PATH}`	`<link href="css/app.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
Blazor WebAssembly	`{PATH}`	`<link href="css/app.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`

Blazor Server† .NET 8 이상에서 지원되지만 더 이상 .NET 7 이후의 프로젝트 템플릿이 아닙니다.
.NET 8 이상을 채택할 Blazor Web App때 호스트된 Blazor WebAssembly 앱을 업데이트하는 것이 좋습니다.

정적 웹 자산 프로젝트 모드

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

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

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

비`Development` 환경의 정적 파일

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

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

Warning

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

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

자산의 Blazor WebAssembly 접두사

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

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).

이 섹션은 독립 실행형 Blazor WebAssembly 앱 및 호스팅된 Blazor WebAssembly 솔루션에 적용됩니다.

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

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

<StaticWebAssetBasePath> 속성을 설정하지 않으면 호스트된 솔루션의 클라이언트 앱 또는 독립 실행형 앱이 다음 경로에 게시됩니다.

호스팅된 Blazor WebAssembly 솔루션의 Server 프로젝트: /BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/
독립 실행형 Blazor WebAssembly 앱: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/

호스팅된 Blazor WebAssembly 앱 또는 독립 실행형 Blazor WebAssembly 앱의 Client 프로젝트에 있는 <StaticWebAssetBasePath> 속성이 게시된 정적 자산 경로를 app1으로 설정하는 경우 게시된 출력에서 앱에 대한 루트 경로가 /app1입니다.

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

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

게시된 출력에서 다음이 적용됩니다.

호스팅된 Blazor WebAssembly 솔루션의 Server 프로젝트에 있는 클라이언트 앱의 경로: /BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/app1/
독립 실행형 Blazor WebAssembly 앱의 경로: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/

<StaticWebAssetBasePath> 속성은 호스트된 단일 배포에서 여러 Blazor WebAssembly 앱의 게시된 정적 자산에 대한 경로를 제어하는 데 가장 일반적으로 사용됩니다. 자세한 내용은 호스트된 여러 ASP.NET Core Blazor WebAssembly 앱을 참조하세요. 이 속성은 독립 실행형 Blazor WebAssembly 앱에도 적용됩니다.

앞의 예제에서 {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 });

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

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

...

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

builder.Services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider = provider;
});
```
이 방법은 스크립트를 제공하는 데 사용되는 것과 동일한 파일 공급자를 구성합니다 Blazor . 사용자 지정 구성이 스크립트 제공을 Blazor 방해하지 않는지 확인합니다. 예를 들어 provider.Mappings.Remove(".js")를 통해 공급자를 구성하여 JavaScript 파일에 대한 매핑을 제거하지 마세요.
파일에서 다음 두 개의 호출을 UseStaticFiles Program 사용합니다.
- StaticFileOptions를 사용하여 첫 번째 호출에서 사용자 지정 파일 공급자를 구성합니다.
- 두 번째 미들웨어는 프레임워크에서 Blazor 제공하는 기본 정적 파일 구성을 사용하는 스크립트를 Blazor 제공합니다.
```
using Microsoft.AspNetCore.StaticFiles;

...

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

app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
app.UseStaticFiles();
```

MapWhen을 사용해 사용자 지정 정적 파일 미들웨어를 실행하여 _framework/blazor.server.js 처리를 방해하지 않게 할 수 있습니다.

app.MapWhen(ctx => !ctx.Request.Path
    .StartsWithSegments("/_framework/blazor.server.js"),
        subApp => subApp.UseStaticFiles(new StaticFileOptions() { ... }));

여러 위치에서 파일 제공

이 섹션의 지침은 s에 Blazor Web App만 적용됩니다.

여러 위치에서 CompositeFileProvider다음을 사용하여 파일을 제공하려면:

서버 프로젝트의 파일 맨 위에 대한 네임스페이 Program 스를 Microsoft.Extensions.FileProviders 추가합니다.
다음을 호출UseStaticFiles하기 전에 서버 프로젝트의 Program 파일에서:
- PhysicalFileProvider 정적 자산에 대한 경로를 사용하여 만듭니다.
- 및 .에서 WebRootFileProvider a CompositeFileProvider 를 만듭니다PhysicalFileProvider. 복합 파일 공급자를 앱에 다시 할당합니다 WebRootFileProvider.

예시:

서버 프로젝트에 새 폴더를 만듭니다 AdditionalStaticAssets. 폴더에 이미지를 배치합니다.

서버 프로젝트 Program 파일의 맨 위에 다음 using 문을 추가합니다.

using Microsoft.Extensions.FileProviders;

호출UseStaticFiles하기 전에 서버 프로젝트의 Program 파일에서 다음 코드를 추가합니다.

var secondaryProvider = new PhysicalFileProvider(
    Path.Combine(builder.Environment.ContentRootPath, "AdditionalStaticAssets"));
app.Environment.WebRootFileProvider = new CompositeFileProvider(
    app.Environment.WebRootFileProvider, secondaryProvider);

앱의 Home 구성 요소(Home.razor) 태그에서 태그를 사용하여 <img> 이미지를 참조합니다.

<img src="{IMAGE FILE NAME}" alt="{ALT TEXT}" />

앞의 예에서:

{IMAGE FILE NAME} 자리 표시자는 이미지 파일 이름입니다. 이미지 파일이 폴더의 루트 AdditionalStaticAssets 에 있는 경우 경로 세그먼트를 제공할 필요가 없습니다.
{ALT TEXT} 자리 표시자는 이미지 대체 텍스트입니다.

앱을 실행합니다.

다음을 통해 공유

ASP.NET Core Blazor 정적 파일

정적 자산 미들웨어

맵 정적 파일 미들웨어를 사용하여 자산 사용

맵 가져오기

정적 파일 `<link>` `href` 형식 요약

.NET 9 이상

.NET 8.x

.NET 7.x 이하

정적 웹 자산 프로젝트 모드

비`Development` 환경의 정적 파일

자산의 Blazor WebAssembly 접두사

정적 웹 자산 기본 경로

파일 매핑 및 정적 파일 옵션

여러 위치에서 파일 제공

추가 리소스

추가 리소스

다음을 통해 공유

ASP.NET Core Blazor 정적 파일

정적 자산 미들웨어

맵 정적 파일 미들웨어를 사용하여 자산 사용

맵 가져오기

정적 파일 <link> href 형식 요약

.NET 9 이상

.NET 8.x

.NET 7.x 이하

정적 웹 자산 프로젝트 모드

비Development 환경의 정적 파일

자산의 Blazor WebAssembly 접두사

정적 웹 자산 기본 경로

파일 매핑 및 정적 파일 옵션

여러 위치에서 파일 제공

추가 리소스

추가 리소스

정적 파일 `<link>` `href` 형식 요약

비`Development` 환경의 정적 파일