연습 - .NET Aspire eShop 사용

10분

.NET Aspire 스택이 포함된 최신 eShop 참조 애플리케이션을 사용하여 완전하고 복잡한 클라우드 네이티브 앱을 설명할 수 있습니다.

아웃도어 의류 및 장비 회사에서 일하고 있다고 상상해 보세요. 개발팀이 .NET Aspire와 협력하여 주요 고객 대면 사이트를 위한 새로운 eShop 웹앱을 제작해 왔다고 가정하겠습니다. 이 앱의 아키텍처를 이해하고 배포하기 전에 기능을 테스트하려고 합니다.

이 단원에서는 .NET Aspire와 해당 필수 구성 요소를 설치한 다음 eShop 앱을 사용하여 .NET Aspire를 조사하고 실행합니다.

필수 구성 요소 설치

이 .NET Aspire 연습의 필수 조건은 다음과 같습니다.

.NET 8
Visual Studio 2022 Preview
Docker Desktop
Visual Studio의 .NET Aspire 워크로드

이미 설치되어 있는 경우 eShop 애플리케이션을 탐색하기 위해 건너뛸 수 있습니다.

.NET 8 설치

이 .NET 8 링크를 따라가서 운영 체제에 맞는 올바른 설치 프로그램을 선택합니다. 예를 들어, Windows 11 및 최신 프로세서를 사용하는 경우 Windows용 x64 .NET 8 SDK를 선택합니다.

다운로드가 완료되면 설치 프로그램을 실행하고 지침을 따릅니다. 터미널 창에서 다음 명령을 실행하여 설치가 성공했는지 확인합니다.

dotnet --version

설치한 .NET SDK의 버전 번호가 표시되어야 합니다. 예시:

8.0.300-preview.24203.14

Visual Studio 2022 Preview 설치

이 Visual Studio 2022 미리 보기 링크를 따라가서 미리 보기 다운로드를 선택합니다. 다운로드가 완료되면 설치 프로그램을 실행하고 지침을 따릅니다.

Docker Desktop 설치

이 Docker Desktop 링크를 따라가서 운영 체제에 맞는 올바른 설치 프로그램을 선택합니다. 다운로드가 완료되면 설치 프로그램을 실행하고 지침을 따릅니다. 최고의 성능과 호환성을 위해서는 WSL 2 백 엔드를 사용합니다.

Docker Desktop 애플리케이션을 열고 서비스 계약에 동의합니다.

Visual Studio에서 .NET Aspire 워크로드 설치

.NET CLI를 사용하여 .NET Aspire 워크로드를 설치합니다.

터미널을 엽니다.

다음 명령을 사용하여 .NET 워크로드를 업데이트합니다.

dotnet workload update

워크로드가 성공적으로 업데이트되었다는 메시지가 표시됩니다.

No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.
Updated advertising manifest microsoft.net.sdk.ios.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net6.
Updated advertising manifest microsoft.net.sdk.android.
Updated advertising manifest microsoft.net.workload.emscripten.net7.
Updated advertising manifest microsoft.net.workload.emscripten.net6.
Updated advertising manifest microsoft.net.sdk.macos.
Updated advertising manifest microsoft.net.workload.emscripten.current.
Updated advertising manifest microsoft.net.workload.mono.toolchain.current.
Updated advertising manifest microsoft.net.sdk.maui.
Updated advertising manifest microsoft.net.workload.mono.toolchain.net7.
Updated advertising manifest microsoft.net.sdk.maccatalyst.
Updated advertising manifest microsoft.net.sdk.tvos.
Updated advertising manifest microsoft.net.sdk.aspire.
No workloads installed for this feature band. To update workloads installed with earlier SDK versions, include the --from-previous-sdk option.

Successfully updated workload(s): .

다음 명령을 사용하여 .NET Aspire 워크로드를 설치합니다.

dotnet workload install aspire

.NET Aspire 워크로드가 설치되었다는 메시지가 표시됩니다.

Installing Aspire.Hosting.Sdk.Msi.x64 ...... Done
Installing Aspire.ProjectTemplates.Msi.x64 ..... Done
Installing Aspire.Hosting.Orchestration.win-x64.Msi.x64 ............. Done
Installing Aspire.Hosting.Msi.x64 ..... Done
Installing Aspire.Dashboard.Sdk.win-x64.Msi.x64 ....... Done

Successfully installed workload(s) aspire.

다음 명령을 사용하여 .NET Aspire 워크로드가 설치되었는지 확인합니다.

dotnet workload list

Aspire 워크로드의 세부 정보를 확인해야 합니다.

Installed Workload Id      Manifest Version      Installation Source
---------------------------------------------------------------------------------------------
aspire                     8.0.0/8.0.100         SDK 8.0.300-preview.24203, VS 17.10.34902.84

Use `dotnet workload search` to find additional workloads to install.

.NET Aspire eShop 코드 살펴보기

eShop 참조 애플리케이션을 사용하여 .NET Aspire 스택을 시연해 보겠습니다. GitHub에서 코드를 복제하고 Visual Studio에서 검사할 예정입니다.

명령줄에서 코드 작업을 할 수 있는 폴더를 선택합니다.
다음 명령을 실행하여 eShop 샘플 애플리케이션을 복제합니다.
```
git clone https://github.com/dotnet/eShop.git
```
Visual Studio를 시작한 다음 프로젝트 또는 솔루션 열기를 선택합니다.
eShop을 복제한 폴더를 찾아 eShop.Web.snlf 파일을 선택한 다음 열기를 선택합니다.
솔루션 탐색기에서 솔루션 구조를 살펴봅니다. 최상위 수준의 eShop 코드에는 테스트, GitHub 작업 및 솔루션 항목을 위한 폴더가 포함되어 있습니다. 마이크로 서비스의 소스 코드가 포함된 src 폴더를 확장합니다.
다음에 유의합니다.
- src 폴더에는 .NET Aspire AppHost 및 ServiceDefaults 프로젝트가 포함되어 있습니다.
- AppHost 프로젝트가 솔루션의 시작 프로젝트로 설정됩니다.
AppHost 프로젝트를 확장한 다음 eShop.AppHost/Program.cs 파일을 선택합니다.
Program.cs 파일에서 다음을 확인합니다.
- 애플리케이션의 구성 요소는 builder라는 DistributedApplicationBuilder 개체에 추가됩니다.
- Redis Cache, RabbitMQ 메시징 서비스 및 PostgreSQL 데이터베이스와 같은 지원 서비스가 작성기에 추가됩니다. 각각은 Docker 컨테이너에 프로비전됩니다.
- 각 마이크로 서비스는 builder.AddProject() 메서드를 사용하여 작성기에 추가됩니다.
- 지원 서비스에 대한 참조는 .WithReference() 메서드를 사용하여 각 마이크로 서비스에 삽입됩니다.

.NET Aspire eShop에서 코드 편집

앱을 실행할 때 테스트하기 위해 소스 코드를 간단히 변경할 예정입니다.

솔루션 탐색기에서 src/WebApp/Components/Pages/Catalog 폴더를 확장한 다음 Catalog.razor 페이지를 선택합니다.

다음 코드 줄을 찾습니다.

<SectionContent SectionName="page-header-subtitle">Start the season with the latest in clothing and equipment.</SectionContent>

해당 줄을 다음 텍스트로 바꾸거나 페이지에 대한 자막을 직접 만듭니다.

<SectionContent SectionName="page-header-subtitle">Bringing you the latest in clothing and equipment.</SectionContent>

.NET Aspire eShop 실행

앱을 실행하고 .NET Aspire 대시보드를 사용하여 요청을 검사해 보겠습니다.

Visual Studio에서 F5를 누르거나 디버그 메뉴에서 디버깅 시작을 선택합니다. Visual Studio는 eShop용 컨테이너를 빌드합니다.
Docker Desktop 시작 대화 상자가 나타나면 예를 선택합니다.
eShop이 빌드되어 Docker에 배포되면 .NET Aspire 대시보드가 기본 브라우저에 표시됩니다.
홈페이지로 이동하려면 webapp 프로젝트 행에서 https://localhost:<포트> 링크를 선택합니다.
eShop 홈페이지가 새 브라우저 탭에 표시됩니다. 자막이 표시됩니다.
Adventurer GPS Watch 제품을 선택합니다.
.NET Aspire 대시보드를 표시하는 브라우저 탭으로 전환한 다음 왼쪽 메뉴에서 Traces를 선택합니다.
페이지 하단으로 스크롤하여 이름이 webapp: GET /item/{itemId:int}인 추적을 찾습니다.
세부 정보 열에서 보기를 선택합니다.
대시보드에는 카탈로그 마이크로 서비스에 대한 호출을 포함하는 Adventurer GPS Watch에 대한 추적이 표시됩니다.
디버깅 세션을 중지하려면 Visual Studio에서 Shift + F5를 누르거나 디버그 메뉴에서 디버깅 중지를 선택합니다.
Visual Studio를 닫습니다.

자세한 정보

eShop 참조 애플리케이션 - "Northern Mountains"

계속