연습 - 기존 ASP.NET Core 웹앱 통합

8분

이제 기존 ASP.NET Core 웹앱에 .NET Aspire를 추가하는 방법을 살펴보겠습니다. 그 과정에서 기존 ASP.NET Core 웹앱에 .NET Aspire 스택을 추가한 다음 앱을 실행하는 방법을 알아봅니다. 또한 ASP.NET Core 앱에서 마이크로 서비스를 호출하는 방법도 알아봅니다.

환경 설정

기존 데모 ASP.NET Core 웹앱에 .NET Aspire를 추가하려면 먼저 기존 앱을 가져와야 합니다.

터미널 창에서:

현재 작업 디렉터리를 코드를 저장하려는 위치로 설정합니다.

리포지토리를 ExampleApp이라는 새 폴더에 복제합니다.

git clone https://github.com/MicrosoftDocs/mslearn-aspire-starter ExampleApp

앱 예 살펴보기

Visual Studio를 사용하여 데모 앱을 살펴봅니다.

Visual Studio를 연 다음 프로젝트 또는 솔루션 열기를 선택합니다.
프로젝트/솔루션 열기 대화 상자에서 ExampleApp/eShopAdmin 폴더로 이동한 다음 EShopAdmin.sln을 선택합니다.
열기를 선택합니다.

데모 앱은 세 가지 프로젝트가 포함된 .NET 8 솔루션입니다.
- 데이터 엔터티. 웹앱 및 웹 API에 사용되는 제품 클래스를 정의하는 클래스 라이브러리입니다.
- 제품. 해당 속성과 함께 카탈로그의 제품 목록을 반환하는 웹 API입니다.
- 스토어. Blazor 웹앱은 웹 사이트 방문자에게 이러한 제품을 표시합니다.

앱을 성공적으로 실행하려면 시작되는 프로젝트를 변경합니다.

메뉴에서 프로젝트>시작 프로젝트 구성...를 선택합니다.
솔루션 속성 페이지 대화 상자에서 여러 시작 프로젝트를 선택합니다.
작업 열에서 Products 및 Store를 시작으로 설정합니다.
확인을 선택합니다.
F5를 누르거나 도구 모음에서 시작을 선택하여 앱을 실행합니다.

앱은 기본 웹 브라우저의 두 인스턴스를 엽니다. 하나는 웹 API의 JSON 출력을 보여 주고, 다른 하나는 Blazor Web App을 보여 줍니다.
웹앱의 메뉴에서 Products를 선택합니다. 이 오류가 표시됩니다.
Shift+F5를 눌러 앱을 중지하거나 도구 모음에서 디버깅 중지를 선택합니다.

이 앱을 처음 사용합니다. 엔드포인트와 서비스가 어떻게 구성되어 있는지 잘 모르겠습니다. .NET Aspire 오케스트레이션을 추가하고 문제 진단에 도움이 될 수 있는지 살펴보겠습니다.

.NET Aspire 오케스트레이션에 기존 앱 등록

Visual Studio에서:

솔루션 탐색기에서 Store 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 추가>.NET Aspire 오케스트레이터 지원...을 선택합니다.
.NET Aspire Orchestrator 지원 추가 대화 상자에서 확인을 선택합니다.

이제 AppHost 및 ServiceDefaults 프로젝트가 솔루션에 추가된 것을 볼 수 있습니다. AppHost 프로젝트도 시작 프로젝트로 설정됩니다.
F5를 누르거나 도구 모음에서 시작을 선택하여 앱을 실행합니다.

이번에는 솔루션이 .NET Aspire 대시보드를 표시하는 단일 브라우저 창을 엽니다.
Store 프로젝트의 엔드포인트를 선택한 다음 Products를 선택합니다. 이전과 동일한 오류가 표시됩니다.
대시보드로 돌아갑니다.
실행 중 옆에 있는 빨간색 오류 알림을 선택한 다음 세부 정보 열에서 보기를 선택합니다.
Exception.message가 보일 때까지 오류 세부 정보를 스크롤합니다. 웹앱이 localhost:5200에 연결하는 데 어려움을 겪고 있습니다. 포트 5200은 프런트 엔드에서 제품 API가 실행되고 있다고 생각하는 포트입니다.
Shift+F5를 눌러 앱을 중지하거나 도구 모음에서 디버깅 중지를 선택합니다.

제품 API를 포함하도록 오케스트레이션 업데이트

이 문제를 해결하는 방법에는 여러 가지가 있습니다. 코드를 탐색하고, 프런트 엔드 구성 방법을 알아보고, 코드를 편집하거나, launchSettings.json 또는 appsettings.json 파일을 변경할 수 있습니다.

.NET Aspire를 사용하면 제품 API가 포트 5200에서 응답하도록 오케스트레이션을 변경할 수 있습니다.

Visual Studio에서:

제품 프로젝트를 오케스트레이션에 추가하려면 솔루션 탐색기에서 제품 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 추가>.NET Aspire Orchestrator 지원...을 선택합니다.
대화 상자에서 확인을 선택합니다.
솔루션 탐색기에서 AppHost 프로젝트를 연 다음 Program.cs 파일을 엽니다.

코드를 탐색하고 Products 프로젝트가 오케스트레이션에 어떻게 추가되는지 확인합니다.
```
var builder = DistributedApplication.CreateBuilder(args);

builder.AddProject<Projects.Store>("store");

builder.AddProject<Projects.Products>("products");

builder.Build().Run();
```
다음으로 제품 API에 대한 새 엔드포인트를 추가하도록 .NET Aspire를 구성합니다.

builder.AddProject<Projects.Products>("products"); 줄을 다음 코드로 바꿉니다.

builder.AddProject<Projects.Products>("products")
       .WithHttpEndpoint(port: 5200, name: "products");

F5를 누르거나 도구 모음에서 시작을 선택하여 앱을 실행합니다.

이제 Products 프로젝트가 두 개의 엔드포인트가 있는 대시보드에 나열됩니다.
Store 프로젝트의 엔드포인트를 선택한 다음 Products를 선택합니다.

이제 제품이 웹앱에 표시됩니다.
Shift+F5를 눌러 앱을 중지하거나 도구 모음에서 디버깅 중지를 선택합니다.

이 방식은 구성 문제를 해결하지만 문제를 해결하는 최선의 방법은 아닙니다. .NET Aspire를 사용하기로 결정한 경우 .NET Aspire 서비스 검색도 사용해야 합니다.

.NET Aspire 서비스 검색을 사용하도록 웹앱 업데이트

Visual Studio에서:

솔루션 탐색기에서 AppHost 프로젝트를 연 다음 Program.cs 파일을 엽니다.

파일의 코드를 다음 코드로 바꿉니다.

var builder = DistributedApplication.CreateBuilder(args);

var products = builder.AddProject<Projects.Products>("products");

builder.AddProject<Projects.Store>("store")
       .WithReference(products);

builder.Build().Run();

위의 코드는 프로젝트의 순서를 변경합니다. 이제 제품 API가 프런트 엔드 저장소 웹앱에 대한 프로젝트 참조로 전달됩니다.

솔루션 탐색기에서 Store 프로젝트를 연 다음 appsettings.json 파일을 엽니다.

엔드포인트 구성 줄을 삭제합니다.

"ProductEndpoint": "http://localhost:5200",
"ProductEndpointHttps": "https://localhost:5200"

현재 설정은 다음과 같습니다.

{
  "DetailedErrors": true,
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

솔루션 탐색기의 Store 프로젝트 아래에서 Program.cs 파일을 엽니다.

다음 줄을

var url = builder.Configuration["ProductEndpoint"] 
     ?? throw new InvalidOperationException("ProductEndpoint is not set");

이 줄로 다음을 수행합니다.

var url = "http://products";

F5를 누르거나 도구 모음에서 시작을 선택하여 앱을 실행합니다.
Store 프로젝트의 엔드포인트를 선택한 다음 Products를 선택합니다.

앱은 여전히 예상대로 작동하지만 프런트 엔드는 이제 .NET Aspire 서비스 검색을 사용하여 제품 API 엔드포인트에 대한 정보를 가져옵니다.

연습 - 기존 ASP.NET Core 웹앱 통합

환경 설정

앱 예 살펴보기

.NET Aspire 오케스트레이션에 기존 앱 등록

제품 API를 포함하도록 오케스트레이션 업데이트

.NET Aspire 서비스 검색을 사용하도록 웹앱 업데이트

피드백