연습 - 새 .NET Aspire 프로젝트 만들기

완료됨

회사의 최신 프로젝트를 위한 새로운 서비스 작업을 시작하기 전에 시스템에 .NET Aspire에 대한 모든 필수 구성 요소가 있는지 확인하려고 합니다. 확인하는 가장 좋은 방법은 시작 템플릿을 사용하여 새 .NET Aspire 프로젝트를 만드는 것입니다.

이 연습에서는 모든 필수 구성 요소를 설치한 다음 새로운 .NET Aspire 시작 앱을 만듭니다. 그런 다음 Redis를 사용하여 캐싱 구성 요소를 앱에 추가하는 방법을 살펴보겠습니다. 마지막으로 애플리케이션을 테스트하고 Aspire 대시보드를 빠르게 살펴봅니다.

Visual Studio에 대한 이 연습의 단계를 보려면 이 탭을 선택합니다.

필수 구성 요소 설치

이전 단원에서 필수 조건에 대해 설명했습니다. 이제 설치 과정을 살펴보겠습니다.

.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 링크를 따라가서 운영 체제에 맞는 올바른 설치 프로그램을 선택합니다. 다운로드가 완료되면 설치 프로그램을 실행하고 지침을 따릅니다.

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

.NET Aspire 워크로드 설치

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

  1. Visual Studio 설치 관리자를 엽니다.

  2. Visual Studio 옆에 있는 수정을 선택합니다.

  3. ASP.NET 및 웹 개발 워크로드를 선택합니다.

  4. 설치 세부 정보 패널에서 .NET Aspire SDK(미리 보기)를 선택합니다.

  5. .NET Aspire 구성 요소를 설치하려면 수정을 선택합니다.

  6. 최신 버전의 .NET Aspire가 설치되어 있는지 확인하고 새 터미널에서 다음 명령을 실행합니다.

    dotnet workload list
    

워크로드를 설치하면 다음이 표시됩니다.

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 시작 앱 만들기

이제 필수 구성 요소가 설치되었으므로 새 앱을 만들어 보겠습니다.

  1. Visual Studio를 엽니다. 대화 상자에서 새 프로젝트 만들기를 선택합니다.

  2. 템플릿 검색 상자에 aspire를 입력합니다.

  3. .NET Aspire 시작 애플리케이션을 선택한 후 다음을 선택합니다.

  4. 솔루션 이름 상자에 AspireTestApp을 입력합니다.

  5. 위치 상자에 새 앱을 만들려는 폴더를 입력합니다.

  6. 다음을 선택합니다.

  7. 기본적으로 선택된 .NET 8.0(장기 지원)을 그대로 둡니다.

  8. 캐싱에 Redis 사용(지원되는 컨테이너 런타임 필요)을 선택 취소합니다.

    다음 단계에서는 Redis 지원을 수동으로 추가하게 됩니다.

  9. 만들기를 실행합니다.

  10. 메뉴에서 디버그를 선택한 다음 디버깅 시작을 선택합니다(또는 F5를 누릅니다).

  11. Docker 엔진을 시작하라는 메시지가 나타나면 를 선택합니다.

대시보드는 기본 웹 브라우저에서 열립니다.

Blazor 앱 및 API 서비스를 보여 주는 Aspire 대시보드의 스크린샷.

webfrontend 엔드포인트 URL을 선택합니다. 포트는 임의로 할당되므로 대시보드가 일치하지 않을 수 있습니다.

Blazor 웹앱 프런트 엔드의 스크린샷.

Blazor 앱에는 간단한 카운터 페이지와 백 엔드 API 서비스를 호출하여 표시할 예측 데이터를 가져오는 날씨 페이지가 있습니다.

Blazor 앱 및 .NET Aspire 대시보드의 브라우저 탭을 닫습니다. Visual Studio에서 디버깅을 중지합니다.

.NET Aspire 프로젝트에 캐싱 구성 요소 추가

이제 .NET Aspire 프로젝트에 Redis 캐싱 구성 요소를 추가해 보겠습니다. 앱 호스트부터 시작할 예정입니다.

  1. 솔루션 탐색기에서 AspireTestApp.AppHost 프로젝트를 마우스 오른쪽 단추로 클릭하고 NuGet 패키지 관리를 선택합니다.
  2. 찾아보기 탭을 클릭한 다음, 시험판 포함을 선택합니다.
  3. Aspire redis를 검색하고 Aspire.Hosting.Redis 패키지를 선택합니다.
  4. 오른쪽 창에서 버전으로 최신 8.0.0을 선택한 다음 설치를 선택합니다.
  5. 라이선스 동의 대화 상자에서 동의함을 선택합니다.
  1. 앱 호스트 프로젝트에 Redis 구성을 추가하려면 AspireTestApp.AppHost/Program.cs 파일을 열고 다음 코드를 추가합니다.

    // Add Redis
    var redis = builder.AddRedis("cache");
    

    이 코드는 로컬 Redis 컨테이너 인스턴스를 만들도록 오케스트레이션을 구성합니다.

  2. Redis Cache를 사용하도록 현재 webfrontend 서비스를 변경합니다. 이 코드를 다음과 같이 변경합니다.

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
        .WithExternalHttpEndpoints()
        .WithReference(apiService);
    

    다음 코드로 변경합니다.

    builder.AddProject<Projects.AspireTestApp_Web>("webfrontend")
        .WithExternalHttpEndpoints()
        .WithReference(apiService)
        .WithReference(redis);
    

    WithReference 확장 메서드는 출력 캐싱에 Redis를 자동으로 사용하도록 UI를 구성합니다.

    다음으로 소비 프로젝트에서 Redis를 사용할 수 있습니다.

  1. 솔루션 탐색기에서 AspireTestApp.Web 프로젝트를 마우스 오른쪽 단추로 클릭하고 NuGet 패키지 관리를 선택합니다.
  2. 찾아보기 탭을 클릭한 다음, 시험판 포함을 선택합니다.
  3. aspire redis를 검색하고 Aspire.StackExchange.Redis.OutputCaching 패키지를 선택합니다.
  4. 오른쪽 창에서 버전으로 최신 8.0.0을 선택한 다음 설치를 선택합니다.
  5. 라이선스 동의 대화 상자에서 동의함을 선택합니다.

이제 Visual Studio를 사용하여 Redis 구성 요소를 사용하기 위한 코드를 추가합니다.

  1. 필요한 경우 Visual Studio에서 AspireTestApp 솔루션을 엽니다.

  2. 솔루션 탐색기AspireTestApp.Web 프로젝트 아래에서 Program.cs를 선택합니다.

  3. var builder = WebApplication.CreateBuilder(args); 아래에 다음 코드를 추가합니다.

    // Add Redis caching
    builder.AddRedisOutputCache("cache");
    

    이 코드에서는 다음을 수행합니다.

    • 지정된 연결 이름으로 Redis 인스턴스를 사용하도록 ASP.NET Core 출력 캐싱을 구성합니다.
    • 해당 상태 검사, 로깅 및 원격 분석을 자동으로 사용하도록 설정합니다.
  4. AspireTestApp.Web/Components/Pages/Home.razor의 콘텐츠를 다음 코드로 바꿉니다.

    @page "/"
    @attribute [OutputCache(Duration = 10)]
    
    <PageTitle>Home</PageTitle>
    
    <h1>Hello, world!</h1>
    
    Welcome to your new app on @DateTime.Now
    

    이전 코드에서 OutputCache 특성은 10초 기간을 지정합니다. 페이지가 캐시된 후 10초 기간 내의 모든 후속 요청은 캐시된 출력을 수신합니다.

Aspire는 애플리케이션에 새로운 구성 요소를 쉽게 추가할 수 있도록 설계되었음을 알 수 있습니다. NuGet 패키지를 추가하여 애플리케이션에 새 구성 요소를 추가한 다음 WebAppHost 프로젝트의 Program.cs 파일에 몇 줄의 코드를 추가합니다. 그런 다음 Aspire는 Redis 컨테이너와 출력 캐싱을 자동으로 구성합니다.

애플리케이션 테스트

이제 애플리케이션을 실행하여 캐싱이 어떻게 작동하는지 살펴보겠습니다. Visual Studio에서:

  1. 메뉴에서 디버그를 선택한 다음 디버깅 시작을 선택합니다(또는 F5를 누릅니다). 솔루션이 빌드되고 Aspire 대시보드가 기본 웹 브라우저에서 열립니다.

  2. 애플리케이션의 홈페이지를 보려면 webfrontend 서비스에 대한 Endpoint URL을 선택합니다.

  3. 브라우저에서 페이지를 몇 번 새로 고칩니다. 페이지의 시간은 10초 캐시 기간 내에 변경되지 않습니다.

    홈페이지에 캐싱이 포함된 업데이트된 Aspire 시작 템플릿의 스크린샷.

    솔루션은 Redis 컨테이너를 만듭니다. Docker Desktop을 열어 실행 중인 컨테이너를 확인합니다.

    Docker Desktop에서 실행되는 Redis 컨테이너의 스크린샷.

  4. Visual Studio에서 실행 중인 솔루션을 중지하려면 Shift+F5를 누릅니다.

  5. Docker Desktop을 열고 컨테이너/앱을 선택합니다. redis:latest가 더 이상 실행되지 않는 것을 볼 수 있습니다.

.NET Aspire를 사용하여 애플리케이션에 새 캐싱 구성 요소를 추가하는 것이 얼마나 쉬운지 살펴보았습니다. NuGet 패키지를 추가한 다음 몇 줄의 코드를 추가했습니다. .NET Aspire는 Redis 컨테이너와 출력 캐싱을 자동으로 구성했습니다.