ASP.NET Core 호스트 및 배포 Blazor

이 문서에서는 Blazor 앱을 호스트하고 배포하는 방법을 설명합니다.

앱 게시

앱은 릴리스 구성으로 배포하기 위해 게시됩니다.

Visual Studio

1. 빌드 메뉴에서 게시 {APPLICATION} 명령을 선택합니다. 여기서 {APPLICATION} 자리 표시자는 앱의 이름입니다.
2. publish target을 선택합니다. 로컬로 게시하려면 폴더를 선택합니다. 다음을 선택합니다.
3. 로컬로 게시할 때 기본 폴더 위치를 그대로 적용하거나 다른 위치를 지정합니다. 마침을 선택하여 프로필을 저장합니다. 닫기를 선택합니다.
4. 앱을 게시하기 전에 대상의 게시 폴더를 정리하려면 모든 설정 표시를 선택합니다. 설정>파일 게시 옵션을> 선택하여게시하기 전에 모든 기존 파일을 삭제합니다. 저장을 선택합니다.
5. 게시 단추를 선택합니다.

Visual Studio Code 및 .NET CLI

프로젝트의 루트 디렉터리에 대한 명령 셸을 엽니다.

명령을 dotnet publish 사용하여 앱을 게시합니다.

dotnet publish

.NET 8 이전의 기본 게시 구성은 Debug. .NET 7 이하를 대상으로 하는 앱을 게시할 때, -c|--configuration 구성에서 "Release" 옵션을 명령에 전달하려면 Release을 사용하세요.

dotnet publish -c Release

앱을 게시하면 배포할 자산을 만들기 전에 프로젝트 종속성의 복원과 프로젝트의 빌드가 트리거됩니다. 빌드 프로세스의 일부로 앱 다운로드 크기와 로드 시간을 줄이기 위해 사용하지 않는 메서드와 어셈블리를 제거합니다.

대상 게시 폴더 비우기

명령 셸의 dotnet publish 명령을 사용하여 앱을 게시하는 경우 명령은 프로젝트의 현재 상태에 따라 배포에 필요한 파일을 생성하고 지정된 출력 폴더에 파일을 배치합니다. 이 명령은 앱을 게시하기 전에 대상 폴더를 자동으로 정리하지 않습니다.

앱이 게시되기 전에 대상 폴더를 자동으로 비우려면 루트 .csproj 요소 아래에 앱의 프로젝트 파일(<Project>)에 다음 MSBuild 대상을 추가합니다.

<Target Name="_RemovePublishDirBeforePublishing" BeforeTargets="BeforePublish">
  <RemoveDir Directories="$(PublishDir)" Condition="'$(PublishDir)' != ''" />
</Target>

기본 게시 위치

• Blazor Web App: 앱이 /bin/Release/{TARGET FRAMEWORK}/publish 폴더에 게시됩니다. 여기서 {TARGET FRAMEWORK} 자리 표시자는 대상 프레임워크입니다. 호스트에 publish 폴더의 콘텐츠를 배포합니다.
• 독립 실행형 Blazor WebAssembly: 앱이 bin/Release/{TARGET FRAMEWORK}/publish 또는 bin/Release/{TARGET FRAMEWORK}/browser-wasm/publish 폴더에 배포됩니다. 앱을 정적 사이트로 배포하려면 wwwroot 폴더의 내용을 정적 사이트 호스트에 복사합니다.

IIS

IIS에서 Blazor 앱을 호스트하려면 다음 리소스를 참조하세요.

• IIS 호스팅
  • IIS에 ASP.NET Core 앱 게시
  • IIS가 있는 Windows에서 ASP.NET Core 호스팅
• Windows OS 및 Azure App Service를 실행하는 ASP.NET Azure VM(Virtual Machines)이 있는 IIS를 포함하여 IIS에서 실행되는 core 서버 쪽 BlazorBlazor Web App앱(.NET 8 이상) 및 Blazor Server 앱(.NET 7 이하)을 호스트하고 배포합니다.
• IIS: 독립 실행형 Blazor WebAssembly 앱(모든 .NET 릴리스) 및 호스트된 앱(.NET 7 이하)을 사용하여 Blazor WebAssembly하고 배포합니다.
• IIS 하위 애플리케이션 호스팅
  • 앱을 게시하기 전에 앱 기본 경로 지침을 따릅니다. 예제에서는 앱 기본 경로를 /CoolApp 사용하고 앱 설정 또는 다른 구성 공급자에서 기본 경로를 가져오는 방법을 보여 줍니다.
  • 고급 구성의 하위 애플리케이션 구성 지침을 따릅니다. 루트 사이트 아래에 있는 하위 앱의 폴더 경로는 하위 앱의 가상 경로가 됩니다. /CoolApp의 앱 기본 경로의 경우, Blazor 앱은 루트 사이트 아래에 있는 CoolApp이라는 폴더에 배치되고 하위 앱은 /CoolApp의 가상 경로를 사용합니다.

Blazor 앱을 포함하여 ASP.NET Core 앱 간에 앱 풀을 공유하는 것은 지원되지 않습니다. IIS를 사용하여 호스트할 때 앱당 하나의 앱 풀을 사용하고 여러 앱을 호스트하기 위해 IIS의 가상 디렉터리를 사용하지 않도록 합니다.

JavaScript 번들러 지원

런타임은 Blazor JavaScript(JS) 파일, WebAssembly 코드로 컴파일된 .NET 런타임 및 WebAssembly 파일로 압축된 관리되는 어셈블리를 사용합니다. Blazor 앱이 빌드 Blazor될 때, 런타임은 다른 빌드 위치에 있는 이러한 파일에 의존합니다. 이 제약 조건으로 인해 Blazor의 빌드 출력은 JS, Webpack, 및 Rollup과 같은 번들러와 호환되지 않습니다.

MSBuild 속성을 JS으로 앱의 프로젝트 파일에 설정하여, 게시하는 동안WasmBundlerFriendlyBootConfig 번들러와 호환되는 빌드 출력을 생성합니다true.

<WasmBundlerFriendlyBootConfig>true</WasmBundlerFriendlyBootConfig>

중요

이 기능은 앱을 게시할 때만 번들러 친화적인 출력을 생성합니다.

출력은 브라우저에서 직접 실행할 수 없지만, JS 도구들이 개발자가 제공한 나머지 스크립트와 함께 JS 파일을 번들로 묶는 데 사용할 수 있습니다.

WasmBundlerFriendlyBootConfig가 사용 설정되면, 생성된 JS에는 앱의 모든 자산에 대한 지시문이 포함되어 있어 번들러에 종속성이 표시됩니다. 대부분의 자산은 브라우저에서 로드할 수 없지만 일반적으로 번들러는 로드를 처리하기 위해 파일 형식별로 자산을 인식하도록 구성할 수 있습니다. 번들러를 구성하는 방법에 대한 자세한 내용은 번들러의 설명서를 참조하세요.

참고

번들러 사용자 지정 플러그 인을 사용하여 JS 개별 파일 위치에 가져오기를 매핑하여 빌드 출력을 번들링할 수 있어야 합니다. 현재 이러한 플러그 인을 제공하지 않습니다.

참고

files 플러그인을 url으로 대체하면, 모든 앱 JS 파일이 Blazor WebAssembly 런타임(JS에서 base64로 인코딩됨)을 포함하여 출력물에 번들됩니다. 파일의 크기는 플러그인 files으로 파일을 큐레이팅할 때보다 크게 증가되어 있습니다(예: 300% 더 큰). 따라서 url 번들러 처리를 위한 번들러 친화적인 출력을 생성할 때에는 플러그인 JS을 일반적으로 사용하지 않는 것이 좋습니다.

다음 샘플 앱은 롤업을 기반으로 합니다. 다른 JS 번들러를 사용할 때도 비슷한 개념이 적용됩니다.

.NET 10 이상용 Blazor WebAssembly React 앱()의 React 앱(BlazorWebAssemblyReactDotNetWebAssemblyReact) 및 WebAssembly의 .NET에 대한 데모 샘플 앱은 샘플 GitHub 리포지토리(Blazor)에서dotnet/blazor-samples 사용할 수 있습니다.

캐싱의 측면이 Blazor WebAssembly에 적용될 수 있습니다 Blazor Web App.

Blazor 노드의 번들 캐싱 및 HTTP 캐싱 지침은 Blazor WebAssembly 독립 실행형 Blazor WebAssembly 앱에 초점을 맞추지만, 이러한 문서의 클라이언트 쪽 캐싱의 여러 측면은 Interactive WebAssembly 또는 대화형 자동 렌더링 모드를 채택하는 Blazor Web App에 대해서도 적용됩니다. Blazor Web App 콘텐츠를 렌더링하는 클라이언트 쪽에 정적 자산 또는 번들 캐싱 문제가 발생하는 경우 다음 문서의 지침을 참조하여 문제를 해결합니다.

• ASP.NET Core Blazor WebAssembly 캐싱 및 무결성 검사 실패
• ASP.NET Core Blazor 앱을 업그레이드할 때 HTTP 캐싱 문제 방지

Blazor Server MapFallbackToPage 구성

이 섹션은 Blazor Server 앱에만 적용됩니다. MapFallbackToPage는 Blazor Web App 및 Blazor WebAssembly 앱에서는 지원되지 않습니다.

앱에 사용자 지정 리소스와 Razor 구성 요소가 포함된 별도의 영역이 필요한 시나리오의 경우:

• 앱의 Pages 폴더 내에 리소스를 보관할 폴더를 만듭니다. 예를 들어 앱의 관리자 섹션이 Admin(Pages/Admin)이라는 새 폴더에 만들어집니다.

• 영역의 루트 페이지(_Host.cshtml)를 만듭니다. 예를 들어 앱의 주 루트 페이지(Pages/Admin/_Host.cshtml)에서 Pages/_Host.cshtml 파일을 만듭니다. Admin @page 페이지에 _Host 지시문을 제공하지 마세요.

• 영역 폴더에 레이아웃을 추가합니다(예: Pages/Admin/_Layout.razor). 별도 영역의 레이아웃에서 영역의 폴더와 일치하도록 <base> 태그 href를 설정합니다(예: <base href="/Admin/" />). 데모용으로 페이지의 정적 리소스에 ~/를 추가합니다. 예시:

  • ~/css/bootstrap/bootstrap.min.css
  • ~/css/site.css
  • ~/BlazorSample.styles.css(예제 앱의 네임스페이스는 BlazorSample임)
  • ~/_framework/blazor.server.js(Blazor 스크립트)

• 영역에 고유한 정적 자산 폴더가 있어야 하는 경우 폴더를 추가하고 Program.cs의 정적 파일 미들웨어로 위치를 지정합니다(예: app.UseStaticFiles("/Admin/wwwroot")).

• Razor 구성 요소가 영역의 폴더에 추가됩니다. 최소한, 영역에 대한 올바른 Index 지시문을 사용하여 @page 구성 요소를 영역 폴더에 추가합니다. 예를 들어 앱의 기본 Pages/Admin/Index.razor 파일을 기반으로 Pages/Index.razor 파일을 추가합니다. 파일 맨 위에 경로 템플릿으로 Admin 영역을 나타냅니다(@page "/admin"). 필요에 따라 추가 구성 요소를 추가합니다. 예를 들어 Pages/Admin/Component1.razor 지시문과 @page, @page "/admin/component1 경로 템플릿을 사용하는 경우.

• Program.cs에서 영역의 요청 경로에 대해 MapFallbackToPage를 호출하고, 이는 _Host 페이지의 대체 루트 페이지 경로 바로 앞에 위치합니다.

  ...
  app.UseRouting();
  
  app.MapBlazorHub();
  app.MapFallbackToPage("~/Admin/{*clientroutes:nonfile}", "/Admin/_Host");
  app.MapFallbackToPage("/_Host");
  
  app.Run();