Blazor 앱 호스팅 모델

팁

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

PDF 다운로드

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

• WebAssembly에 있는 브라우저의 클라이언트 쪽.
• ASP.NET Core 앱의 서버 쪽.

BlazorWebAssembly 앱

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

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

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

BlazorWebAssembly 앱은 전적으로 클라이언트 쪽에서 실행됩니다. GitHub 페이지 또는 Azure 정적 웹 사이트 호스팅 같은 정적 사이트 호스팅 솔루션에 해당 앱을 배포할 수 있습니다. 서버에는 .NET이 필요하지 않습니다. 앱의 부분에 대한 딥 링크를 설정하려면 일반적으로 서버에서 라우팅 솔루션이 필요합니다. 라우팅 솔루션은 요청을 앱의 루트로 리디렉션합니다. 예를 들어 IIS에서 URL 다시 쓰기 규칙을 사용하여 해당 리디렉션을 처리할 수 있습니다.

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

Blazor Server 앱

Blazor 아키텍처에서 설명한 대로 Blazor 구성 요소는 출력을 RenderTree라는 중간 추상화로 렌더링합니다. 그런 다음, Blazor 프레임워크는 렌더링된 항목을 이전에 렌더링된 항목과 비교합니다. 차이점이 DOM에 적용됩니다. Blazor 구성 요소는 렌더링된 출력을 적용하는 방식에서 분리됩니다. 따라서 구성 요소 자체는 UI를 업데이트하는 프로세스와 동일한 프로세스에서 실행할 필요가 없습니다. 실제로 동일한 머신에서 실행하지 않아도 됩니다.

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

ASP.NET AJAX 및 UpdatePanel 컨트롤을 사용했다면 Blazor Server 호스팅 모델이 익숙하게 들릴 수 있습니다. UpdatePanel 컨트롤은 페이지에서 이벤트 트리거에 대한 응답으로 부분 페이지 업데이트 적용을 처리합니다. 트리거된 경우 UpdatePanel은 부분 업데이트를 요청한 다음, 페이지를 새로 고치지 않아도 해당 업데이트를 적용합니다. UI 상태는 ViewState를 사용하여 관리됩니다. Blazor Server 앱은 앱에 클라이언트에 대한 활성 연결이 필요하다는 점에서 약간 다릅니다. 또한 모든 UI 상태는 서버에서 유지 관리됩니다. 해당 차이점 외에 두 모델은 개념적으로 유사합니다.

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

Blazor 호스팅 모델 문서에 설명된 대로 서로 다른 Blazor 호스팅 모델에 서로 다른 단점이 포함됩니다.

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

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

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

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

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

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

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

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

이전 장단점 목록은 어려워 보일 수 있지만 나중에 호스팅 모델을 변경할 수 있습니다. 선택한 Blazor 호스팅 모델과 관계없이 구성 요소 모델은 ‘동일’합니다. 원칙적으로 동일한 구성 요소를 각 호스팅 모델에서 사용할 수 있습니다. 앱 코드는 변경되지 않습니다. 그러나 구성 요소가 호스팅 모델 중립적으로 유지되도록 추상화를 도입하는 것이 좋습니다. 추상화를 사용하면 앱에서 다른 호스팅 모델을 더 쉽게 채택할 수 있습니다.

앱 배포

ASP.NET Web Forms 앱은 일반적으로 Windows Server 머신 또는 클러스터의 IIS에서 호스트됩니다. 또한 Blazor 앱은 다음이 가능합니다.

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

다음 섹션에서는 BlazorWebAssembly 및 Blazor Server 앱의 프로젝트를 설정하는 방법을 살펴보겠습니다.

이전다음