"마이크로서비스" 아키텍처는 소프트웨어를 독립적으로 배포 가능한 서비스 묶음으로 설계하는 것을 의미합니다. 이 문서에서는 Blazor 프레임워크 및 ActiveReports.NET으로 빌드된 웹 응용 프로그램에 적용된 그러한 설계의 예를 소개합니다.

Blazor 프레임워크를 사용하면 JavaScript 대신 C#으로 클라이언트가 사용할 응용 프로그램을 빌드할 수 있습니다. Blazor는 두 가지 호스팅 모델을 지원합니다.

1. Blazor 서버: 버튼 클릭과 같은 클라이언트 측 이벤트의 처리기는 서버 측에서 실행됩니다. 클라이언트와 서버 간의 상호 작용은 SignalR 프레임워크를 사용하여 수행됩니다. 이 시나리오에서 서버 측은 ASP.NET Core 응용 프로그램입니다.

2. Blazor 웹 어셈블리: 전체 응용 프로그램, 그 종속성 및 .NET 런타임이 브라우저로 다운로드됩니다. 이 시나리오에서 서버 측의 역할은 웹 어셈블리 파일을 호스팅하는 것으로 축소되었습니다. ASP.NET Core 웹 서버는 필요하지 않으며, CDN에서 응용 프로그램을 배포하는 등과 같이 서버가 필요 없는 접근 방법을 허용합니다.

두 방법 모두 장단점이 있으며, 이에 대해서는 문서에서 자세히 설명합니다.

ActiveReports.NET으로 빌드된 리포팅 웹 응용 프로그램에는 보고서 배치, 실행 및 내보내기 등을 담당하는 ASP.NET 미들웨어와 같은 리포팅 서비스가 필요합니다.

Blazor 서버 호스팅 모델로 빌드된 리포팅 웹 응용 프로그램의 경우 서버 측 ASP.NET Core 응용 프로그램 내에서 리포팅 서비스를 설정하는 것이 가능하지만, 웹 어셈블리 호스팅 모델을 이용하고 CDN을 통해 응용 프로그램을 배포하려는 경우에는 어떨까요?

보고서를 실행하고 내보내는 리포팅 서비스는 지원되지 않으므로 웹 어셈블리 내에서 호출할 수 없습니다. CDN에서는 코드 실행이 없지만 정적 콘텐츠는 배포합니다. 그러한 경우 리포팅 서비스를 별도의 응용 프로그램 즉, 마이크로서비스로 분리할 수 있습니다. 이 접근 방법은 두 가지 Blazor 호스팅 모델에서 사용할 수 있습니다.

• 독자적 개발 및 배포: 기존의 보고서를 업데이트하거나 새 보고서를 추가한 후 클라이언트가 사용할 앱을 다시 빌드할 필요가 없습니다.

• 재사용 가능성: 동일한 리포팅 서비스를 여러 웹 응용 프로그램을 위한 보고서 라이브러리로 사용하여 웹 기반 보고서 디자이너를 제공하는 등의 서비스를 수행할 수 있습니다.

Blazor 및 마이크로서비스 아키텍처로 리포팅 응용 프로그램을 빌드해 보겠습니다.

리포팅 서비스 응용 프로그램 빌드

Visual Studio 2022에서 새 ASP.NET Core Web API 응용 프로그램을 만들고 이름을 "BlazorReporting"으로 지정한 후 .NET 6(장기 지원) 프레임워크를 선택하고 대화 상자의 "추가 정보" 화면에서 모든 체크박스의 선택을 취소합니다.

GrapeCity.ActiveReports.Aspnetcore.Viewer Nuget 패키지를 새로 생성된 프로젝트에 추가합니다.

이름이 "Reports"인 새 폴더를 추가한 후 기존의 어떤 보고서 템플릿이든 이 폴더에 추가합니다. 예를 들어, 첨부한 프로젝트는 https://github.com/activereports/ReportSamples의 "Financial Reports - CashFlowReport.rdlx" 보고서를 사용합니다.

보고서 템플릿 파일의 빌드 작업을 "Embedded Resource"로 설정합니다.

Program.cs 파일을 엽니다. 기존 코드를 다음으로 바꿉니다.

using GrapeCity.ActiveReports.Aspnetcore.Viewer;
​
var builder = WebApplication.CreateBuilder(args);
​
builder.Services.AddCors(options =>
{
  options.AddPolicy("AllowAll", builder =>
  {
      builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost").AllowCredentials().AllowAnyMethod().AllowAnyHeader();
  });
});
builder.Services.AddReporting();
​
var app = builder.Build();
app.UseCors("AllowAll");
app.UseReporting(settings =>
{
  settings.UseEmbeddedTemplates("BlazorReporting.Reports", typeof(Program).Assembly);
  settings.UseCompression = true;
});
​
​
app.Run();

참고: CORS 구성은 응용 프로그램 요구 사항에 따라 달라집니다. 다음은 "localhost"의 요청을 허용하는 가장 간단한 구성입니다.

응용 프로그램을 빌드합니다. 명령줄을 열고 응용 프로그램의 bin\Debug\net6.0 폴더로 이동한 후 BlazorReporting.exe를 실행합니다. 이제 기본 URL(http://localhost:5000/api/reporting/reports)을 통해 리포팅 서비스를 사용할 수 있습니다.

브라우저에서 http://localhost:5000/api/reporting/reports/Financial%20Reports%20-%20CashFlowReport.rdlx/info를 열어 시도해 볼 수 있습니다.

클라이언트가 사용할 Blazor 응용 프로그램 빌드

Visual Studio 2022에서 새 Blazor 서버 앱 프로젝트를 솔루션에 추가하고 이름을 "BlazorReportingApp"으로 지정한 후 .NET 6(장기 지원) 프레임워크를 선택하고 대화 상자의 "추가 정보" 화면에서 모든 체크박스의 선택을 취소합니다.

GrapeCity.ActiveReports.Blazor.Viewer 패키지를 새로 생성된 프로젝트에 설치합니다. 프로젝트의 Pages 폴더에 새 Razor 컴포넌트를 추가하고 이름을 "ARViewer"로 지정한 후 기본 코드를 다음으로 바꿉니다.

@page "/arviewer"
@using GrapeCity.ActiveReports.Blazor.Viewer;
​
<div id="viewerContainer" style="height:800px;width:100%;">
  <ReportViewer ReportService="@_reportService" ReportName="@_report" > </ReportViewer >
</div>
​
​
@code {
  private ReportServiceSettings _reportService = new ReportServiceSettings() { Url = "http://localhost:5000" };
  private string _report = "Financial Reports - CashFlowReport.rdlx";
}

새로 생성된 페이지의 링크를 Shared\NavMenu.razor 컴포넌트에 추가합니다.

      <div class="nav-item px-3">
          <NavLink class="nav-link" href="arviewer">
              <span class="oi oi-list-rich" aria-hidden="true"></span> ArViewer
          </NavLink>
      </div>

BlazorReportingApp을 시작 프로젝트로 설정하고 실행한 후 메뉴에서 ARViewer 항목을 클릭합니다. 다음과 같이 결과 화면이 표시됩니다.