다음을 통해 공유

Blazor 앱 호스팅 모델

팁 (조언)

이 콘텐츠는 Blazor 또는 오프라인으로 읽을 수 있는 다운로드 가능한 무료 PDF로 제공되는 for ASP NET Web Forms Developers for Azure eBook에서 발췌한 것입니다.

PDF 다운로드

Blazor-for-ASP-NET-Web-Forms-Developers eBook 표지 썸네일.

Blazor 앱은 다음 방법 중 하나로 호스팅할 수 있습니다.

  • WebAssembly의 브라우저에서 클라이언트 측.
  • ASP.NET Core 앱의 서버 측 기능입니다.

Blazor WebAssembly 앱

Blazor WebAssembly 앱은 WebAssembly 기반의 .NET 런타임에서 브라우저에서 직접 실행됩니다. Blazor WebAssembly 앱은 Angular 또는 React와 같은 프런트 엔드 JavaScript 프레임워크와 비슷한 방식으로 작동합니다. 그러나 JavaScript를 작성하는 대신 C#을 작성합니다. .NET 런타임은 앱 어셈블리 및 필요한 종속성과 함께 앱과 함께 다운로드됩니다. 브라우저 플러그 인 또는 확장이 필요하지 않습니다.

다운로드한 어셈블리는 다른 .NET 앱에서 사용하는 것처럼 일반적인 .NET 어셈블리입니다. 런타임은 .NET Standard를 지원하므로 앱에서 기존 .NET Standard 라이브러리를 BlazorWebAssembly 사용할 수 있습니다. 그러나 이러한 어셈블리는 브라우저 보안 샌드박스에서 계속 실행됩니다. 일부 기능은 파일 시스템에 액세스하거나 임의의 네트워크 연결을 여는 시도 시 PlatformNotSupportedException을(를) 던질 수 있습니다.

앱이 로드되면 .NET 런타임이 시작되고 앱 어셈블리를 가리켰습니다. 앱 시작 논리가 실행되고 루트 구성 요소가 렌더링됩니다. Blazor 는 구성 요소의 렌더링된 출력을 기반으로 UI 업데이트를 계산합니다. 그런 다음 DOM 업데이트가 적용됩니다.

Blazor WebAssembly

Blazor WebAssembly 앱은 순전히 클라이언트 쪽에서 실행됩니다. 이러한 앱은 GitHub Pages 또는 Azure Static Website Hosting과 같은 정적 사이트 호스팅 솔루션에 배포할 수 있습니다. 서버에는 .NET이 전혀 필요하지 않습니다. 앱의 일부에 대한 딥 링크는 일반적으로 서버에 라우팅 솔루션이 필요합니다. 라우팅 솔루션은 요청을 앱의 루트로 리디렉션합니다. 예를 들어 이 리디렉션은 IIS에서 URL 다시 쓰기 규칙을 사용하여 처리할 수 있습니다.

전체 스택 .NET 웹 개발의 모든 이점을 얻고자 한다면 BlazorBlazor 앱을 ASP.NET Core로 호스팅하세요 WebAssembly. 클라이언트와 서버 모두에서 .NET을 사용하면 일관된 언어, 프레임워크 및 도구 집합을 사용하여 코드를 쉽게 공유하고 앱을 빌드할 수 있습니다. Blazor 는 앱과 ASP.NET Core 호스트 프로젝트를 모두 BlazorWebAssembly 포함하는 솔루션을 설정하기 위한 편리한 템플릿을 제공합니다. 솔루션이 빌드되면 앱에서 빌드된 정적 파일은 대체 라우팅이 이미 설정되어 있는 ASP.NET Core 앱에서 Blazor 호스팅됩니다.

Blazor 서버 앱

Blazor 아키텍처 논의에서 Blazor 구성 요소가 출력을 RenderTree라는 중간 추상화로 렌더링한다는 것을 기억하십시오. 그런 다음 프레임워크는 Blazor 렌더링된 내용과 이전에 렌더링된 내용을 비교합니다. 차이점은 DOM에 적용됩니다. Blazor 구성 요소는 렌더링된 출력이 적용되는 방식과 분리됩니다. 따라서 구성 요소 자체는 UI를 업데이트하는 프로세스와 동일한 프로세스에서 실행할 필요가 없습니다. 사실, 그들은 심지어 같은 컴퓨터에서 실행할 필요가 없습니다.

서버 앱에서 Blazor 구성 요소는 브라우저의 클라이언트 쪽 대신 서버에서 실행됩니다. 브라우저에서 발생하는 UI 이벤트는 실시간 연결을 통해 서버로 전송됩니다. 이벤트는 올바른 구성 요소 인스턴스로 디스패치됩니다. 구성 요소가 렌더링되고 계산된 UI 차이는 직렬화되어 DOM에 적용되는 브라우저로 전송됩니다.

Blazor 서버

Blazor ASP.NET AJAX 및 UpdatePanel 컨트롤을 사용한 경우 서버 호스팅 모델이 친숙해 보일 수 있습니다. 컨트롤은 UpdatePanel 페이지의 트리거 이벤트에 대한 응답으로 부분 페이지 업데이트를 적용하는 작업을 처리합니다. 트리거되면 UpdatePanel 부분 업데이트를 요청한 다음 페이지를 새로 고칠 필요 없이 적용합니다. UI의 상태는 .를 사용하여 ViewState관리됩니다. Blazor 서버 앱은 앱에 클라이언트와의 활성 연결이 필요하다는 측면에서 약간 다릅니다. 또한 모든 UI 상태는 서버에서 유지 관리됩니다. 이러한 차이점 외에도 두 모델은 개념적으로 유사합니다.

올바른 Blazor 호스팅 모델을 선택하는 방법

호스팅 모델 문서에 설명된Blazor 대로 서로 다른 Blazor 호스팅 모델에는 서로 다른 장단 사항이 있습니다.

Blazor WebAssembly 호스팅 모델에는 다음과 같은 이점이 있습니다.

  • .NET 서버 쪽 종속성은 없습니다. 클라이언트에 다운로드한 후 앱이 완전히 작동합니다.
  • 클라이언트 리소스와 기능은 완전히 이용됩니다.
  • 작업이 서버에서 클라이언트로 오프로드됩니다.
  • ASP.NET Core 웹 서버는 앱을 호스트할 필요가 없습니다. 서버리스 배포 시나리오(예: CDN에서 앱 제공)가 가능합니다.

호스팅 모델의 단점 BlazorWebAssembly 은 다음과 같습니다.

  • 브라우저 기능은 앱을 제한합니다.
  • 지원 가능한 클라이언트 하드웨어 및 소프트웨어(예: WebAssembly 지원)가 필요합니다.
  • 다운로드 크기가 더 크고 앱을 로드하는 데 시간이 더 오래 걸립니다.
  • .NET 런타임 및 도구 지원은 완성도가 낮습니다. 예를 들어 .NET Standard 지원 및 디버깅에는 제한이 있습니다.

반대로 Blazor 서버 호스팅 모델은 다음과 같은 이점을 제공합니다.

  • 다운로드 크기는 클라이언트 쪽 앱보다 훨씬 작으며 앱이 훨씬 빠르게 로드됩니다.
  • 앱은 .NET 호환 API 사용을 포함하여 서버 기능을 최대한 활용합니다.
  • 서버의 .NET은 앱을 실행하는 데 사용되므로 디버깅과 같은 기존 .NET 도구가 예상대로 작동합니다.
  • 씬 클라이언트가 지원됩니다. 예를 들어 서버 쪽 앱은 지원 WebAssembly 되지 않는 브라우저와 리소스가 제한된 디바이스에서 작동합니다.
  • 앱 구성 요소 코드를 비롯한 앱의 .NET/C# 코드베이스가 클라이언트에 제공되지 않습니다.

서버 호스팅 모델의 단점 Blazor 은 다음과 같습니다.

  • UI 대기 시간이 더 깁니다. 모든 사용자 조작에 네트워크 홉이 포함됩니다.
  • 오프라인 지원이 없습니다. 클라이언트 연결이 실패하면 앱 작동이 중지됩니다.
  • 많은 사용자가 있는 앱의 경우 확장성이 어렵습니다. 서버는 여러 클라이언트 연결을 관리하고 클라이언트 상태를 처리해야 합니다.
  • 앱을 제공하려면 ASP.NET Core 서버가 필요합니다. 서버리스 배포 시나리오는 불가능합니다. 예를 들어 CDN에서 앱을 제공할 수 없습니다.

앞의 장차 목록은 위협적일 수 있지만 호스팅 모델은 나중에 변경할 수 있습니다. Blazor 선택한 호스팅 모델에 관계없이 구성 요소 모델은 동일합니다. 원칙에 따라 동일한 구성 요소를 호스팅 모델에서 사용할 수 있습니다. 앱 코드는 변경되지 않습니다. 그러나 구성 요소가 모델 중립적인 호스팅을 유지하도록 추상화는 도입하는 것이 좋습니다. 추상화는 앱이 다른 호스팅 모델을 더 쉽게 채택할 수 있게 해줍니다.

앱 배포

ASP.NET Web Forms 앱은 일반적으로 Windows Server 컴퓨터 또는 클러스터의 IIS에서 호스트됩니다. Blazor 앱은 다음을 수행할 수도 있습니다.

  • IIS에서 정적 파일 또는 ASP.NET Core 앱으로 호스트됩니다.
  • 다양한 플랫폼 및 서버 인프라에서 호스트되는 ASP.NET Core의 유연성을 활용합니다. 예를 들어 Linux에서 BlazorNginx 또는 Apache 를 사용하여 앱을 호스트할 수 있습니다. 앱을 게시하고 배포 Blazor 하는 방법에 대한 자세한 내용은 Blazor 설명서를 참조 하세요.

다음 섹션에서는 프로젝트 BlazorWebAssembly 및 Blazor 서버 앱이 어떻게 설정되는지 살펴보겠습니다.

이전다음