ASP.NET Core Blazor 정적 파일

2025-04-09

참고

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

경고

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

중요

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

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

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

Map Static Assets 라우팅 엔드포인트 규칙을 사용하여 정적 파일을 제공하는 방법에 대한 일반적인 내용은 이 문서를 읽기 전에 ASP.NET Core 맵 정적 파일을 참조하세요.

미리 로드된 Blazor 프레임워크 정적 자산

프레임워크 Blazor Web App정적 자산은 헤더를 사용하여 Link자동으로 미리 로드되므로 초기 페이지를 가져오고 렌더링하기 전에 브라우저에서 리소스를 미리 로드할 수 있습니다.

독립 실행형 Blazor WebAssembly 앱에서 프레임워크 자산은 다음과 같은 경우 브라우저 index.html 페이지 처리 초기에 우선 순위가 높은 다운로드 및 캐싱을 위해 예약됩니다.

OverrideHtmlAssetPlaceholders 앱의 프로젝트 파일(.csproj)에 있는 MSBuild 속성은 다음으로 true설정됩니다.
```
<PropertyGroup>
  <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
</PropertyGroup>
```
다음 <link> 요소에는 rel="preload"이(가) 포함되어 있으며, 이는 <head>의 wwwroot/index.html 콘텐츠에 있습니다.
```
<link rel="preload" id="webassembly" />
```

서버 측 Blazor 앱에서 정적 자산 전송

정적 자산 제공은 다음 표에 설명된 라우팅 엔드포인트 규칙 또는 미들웨어에 의해 관리됩니다.

특징	API (응용 프로그램 인터페이스)	.NET 버전	설명
정적 자산의 라우팅 엔드포인트 규칙 맵핑	MapStaticAssets	.NET 9 이상	클라이언트에 정적 자산 배달을 최적화합니다.
정적 파일 미들웨어	UseStaticFiles	모든 .NET 버전	맵 정적 자산의 최적화를 거치지 않고 클라이언트에 정적 자산을 제공하지만 맵 정적 자산이 처리할 수 없는 일부 작업에는 유용합니다.

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

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

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

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

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

빌드 또는 게시 프로세스의 일부가 아닌 디스크의 파일 서비스(예: 배포 중 또는 배포 후 애플리케이션 폴더에 추가된 파일).
Blazor WebAssembly 정적 자산 파일에 경로 접두사를 적용하는 방법은 Blazor WebAssembly 자산의 접두사 섹션에서 다룹니다.
특정 콘텐츠 형식에 대한 확장 프로그램의 파일 매핑을 구성하고 정적 파일 옵션을 설정합니다. 이 옵션은 파일 매핑 및 정적 파일 옵션 섹션에서 다룹니다.

자세한 내용은 ASP.NET Core의 정적 파일을 참조하세요.

디지털 자산을 Map Static Assets 라우팅 엔드포인트 규칙을 사용하여 전달하다.

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

ComponentBase.Assets 속성을 통해 특정 자산의 지문 URL이 해결되어 자산이 전달됩니다. 다음 예제에서 부트스트랩, Blazor 프로젝트 템플릿 앱 스타일시트(app.css) 및 CSS 격리 스타일시트 (앱의 네임스페이스 BlazorSample기반)는 루트 구성 요소(일반적으로 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["BlazorSample.styles.css"]" />

`ImportMap` 구성 요소

이 섹션은 Blazor Web App가 MapRazorComponents를 호출하는 경우에 적용됩니다.

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

<ImportMap />

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

참고

ImportMapDefinition 인스턴스를 만드는 데 비용이 많이 들기 때문에 추가 인스턴스를 만들 때 캐싱하는 것이 좋습니다.

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

기본 가져오기 맵:

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에 매핑하는 임포트 맵을 생성합니다.

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"
  }
}

임포트 맵 CSP(콘텐츠 보안 정책) 위반

이 섹션은 Blazor Web App가 MapRazorComponents를 호출하는 경우에 적용됩니다.

ImportMap 구성 요소는 인라인 <script> 태그로 렌더링되며, 이는 또는 default-src 지시문을 설정하는 엄격한 script-src를 위반합니다.

SRI(하위 리소스 무결성) 또는 암호화 nonce를 사용하여 정책 위반을 해결하는 방법의 예는 SRI(하위 리소스 무결성) 또는 nonce를 사용하여 CSP 위반 해결을 참조하세요.

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

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

독립 실행형 Blazor WebAssembly 앱의 클라이언트 측에서 정적 자산을 식별하여 관리

빌드/게시 중 독립 실행형 Blazor WebAssembly 앱에서 프레임워크는 빌드 중에 계산된 값으로 index.html의 자리 표시자를 클라이언트 측 렌더링을 위한 정적 자산의 지문으로 대체합니다. 지문이 스크립트 파일 이름에 추가되고 다른 .NET 자산에 대한 임포트 맵이 생성됩니다.

지문 인식을 채택하기 위해서는 독립 실행형 wwwwoot/index.html 앱의 Blazor WebAssembly 파일에 다음 구성이 있어야 합니다.

<head>
    ...
    <script type="importmap"></script>
    ...
</head>

<body>
    ...
    <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
    ...
</body>

</html>

프로젝트 파일(.csproj)에서, <OverrideHtmlAssetPlaceholders> 속성은 true로 설정됩니다.

<PropertyGroup>
  <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
</PropertyGroup>

JavaScript interop에서 가져오기를 결정할 때, 브라우저가 지문을 쓴 파일을 해결하기 위해 가져오기 맵을 사용합니다.

지문 표식이 있는 index.html 모든 스크립트는 프레임워크에서 지문 처리됩니다. 예를 들어 앱의 scripts.js 폴더에 이름이 지정된 wwwroot/js 스크립트 파일은 파일 확장명 앞에 추가하여 #[.{fingerprint}] 지문으로 표시됩니다(.js).

<script src="js/scripts#[.{fingerprint}].js"></script>

클라이언트 측 정적 자산의 핑거프린트 생성 Blazor Web App

CSR(클라이언트 쪽 렌더링)Blazor Web App의 경우(대화형 자동 또는 대화형 WebAssembly 렌더링 모드) 정적 자산 서버 쪽 지문은 맵 정적 자산 라우팅 엔드포인트 규칙(), 구성 요소 및 속성(MapStaticAssetsImportMap)을 채택하여 사용하도록 설정됩니다. ComponentBase.Assets 자세한 내용은 ASP.NET Core에서 정적 파일 매핑을 참조하세요.

CSR에 대한 추가 JavaScript 모듈의 지문을 지정하려면 앱의 프로젝트 파일(<StaticWebAssetFingerprintPattern>)에 있는 항목을 사용합니다.csproj. 다음 예제에서는 앱에서 개발자가 제공한 모든 파일에 지문이 추가됩니다 .mjs .

<ItemGroup>
  <StaticWebAssetFingerprintPattern Include="JSModule" Pattern="*.mjs" 
    Expression="#[.{fingerprint}]!" />
</ItemGroup>

JavaScript interop에서 가져오기를 결정할 때, 브라우저가 지문을 쓴 파일을 해결하기 위해 가져오기 맵을 사용합니다.

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

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

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

정적 파일 링크가 배치되는 콘텐츠의 <head> 위치는 ASP.NET Core Blazor 프로젝트 구조를 참조하세요. 개별 <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 이후의 프로젝트 템플릿이 아닙니다.
Blazor WebAssembly 앱을 Blazor Web App으로 업데이트하는 것을 .NET 8 이상을 적용할 때 권장합니다.

정적 웹 자산 프로젝트 모드

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

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

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

비`Development` 환경의 정적 파일

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

로컬에서 앱을 실행할 때 정적 웹 자산은 Development 환경에서만 사용 가능합니다. 로컬 개발 및 테스트 이외의 Development 환경에서 정적 파일을 사용할 수 있도록 설정하려면, 예를 들어 Staging에서 UseStaticWebAssets의 WebApplicationBuilder 파일에서 Program를 호출하십시오.

경고

프로덕션 환경에서의 기능 활성화를 방지하기 위해 UseStaticWebAssets을(를) 호출하여 정확한 환경을 설정하십시오. 프로덕션 환경에서는 프로젝트가 아닌 디스크의 별도 위치에서 파일이 제공됩니다. 이 섹션의 예제에서는 Staging을 호출하여 IsStaging 환경을 확인합니다.

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 앱에 적용됩니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

게시된 출력에서:

호스팅된 Server 솔루션의 Blazor WebAssembly 프로젝트에 있는 클라이언트 앱의 경로: /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(대상 프레임워크 모니커)입니다.

파일 매핑 및 정적 파일 옵션

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

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

DI(종속성 주입)를 사용하여 파일에서 Program을 통해 StaticFileOptions

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} 자리 표시자는 콘텐츠 형식입니다.

DI(종속성 주입)를 사용하여 파일에서 Program을 통해 StaticFileOptions
```
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();
```

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

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

여러 위치에서 파일 제공

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

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

서버 프로젝트의 Microsoft.Extensions.FileProviders 파일 맨 위에 Program 네임스페이스를 추가합니다.
서버 프로젝트의 Program 파일에서 호출하기 전에 UseStaticFiles:
- PhysicalFileProvider을(를) 정적 자산 경로와 함께 생성합니다.
- CompositeFileProvider와 WebRootFileProvider에서 PhysicalFileProvider를 만드세요. 복합 파일 공급자를 앱에 다시 할당합니다 WebRootFileProvider.

예시:

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

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

using Microsoft.Extensions.FileProviders;

호출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 정적 파일

미리 로드된 Blazor 프레임워크 정적 자산

서버 측 Blazor 앱에서 정적 자산 전송

디지털 자산을 Map Static Assets 라우팅 엔드포인트 규칙을 사용하여 전달하다.

ImportMap 구성 요소

임포트 맵 CSP(콘텐츠 보안 정책) 위반

독립 실행형 Blazor WebAssembly 앱의 클라이언트 측에서 정적 자산을 식별하여 관리

클라이언트 측 정적 자산의 핑거프린트 생성 Blazor Web App

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

.NET 9 이상

.NET 8.x

.NET 7.x 이하

정적 웹 자산 프로젝트 모드

비Development 환경의 정적 파일

Blazor WebAssembly 자산의 접두사

정적 웹 자산 기본 경로

파일 매핑 및 정적 파일 옵션

여러 위치에서 파일 제공

추가 리소스

추가 리소스

`ImportMap` 구성 요소

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

비`Development` 환경의 정적 파일