연습 - ASP.NET 핵심 앱 기능을 제어하는 기능 플래그 구현

  • 12분

이 연습에서는 기능 플래그를 구현하여 애플리케이션에 대한 계절별 판매 배너를 전환합니다. 기능 플래그를 사용하면 앱을 다시 배포하지 않고 기능 가용성을 전환할 수 있습니다.

.NET 기능 플래그 라이브러리에서 기능 관리를 사용할 것입니다. 이 라이브러리는 앱에서 기능 플래그를 구현하는 도우미를 제공합니다. 라이브러리는 조건부 문과 같은 간단한 사용 사례를 조건부 경로 또는 작업 필터 추가와 같은 고급 시나리오에 지원합니다. 또한 특정 매개 변수에 따라 기능을 사용하도록 설정할 수 있는 기능 필터를 지원합니다. 이러한 매개 변수의 예로는 창 시간, 백분율 또는 사용자의 하위 집합이 있습니다.

이 단원에서 학습할 내용은 다음과 같습니다.

  • Azure App Configuration 인스턴스를 만듭니다.
  • App Configuration 저장소에 기능 플래그를 추가합니다.
  • App Configuration 저장소에 앱을 연결합니다.
  • 기능 플래그를 사용하도록 애플리케이션을 수정합니다.
  • 제품 페이지를 변경하여 판매 배너를 표시합니다.
  • 앱을 빌드하고 테스트합니다.

개발 환경 열기

연습을 호스팅하는 GitHub 코드 공간을 사용하거나 Visual Studio Code에서 로컬로 연습을 완료하도록 선택할 수 있습니다.

코드스페이스를 사용하려면 이 Codespace 만들기 링크를 사용하여 미리 구성된 GitHub Codespace를 만듭니다.

GitHub는 코드스페이스를 만들고 구성하는 데 몇 분 정도 걸립니다. 완료되면 연습에 대한 코드 파일이 표시됩니다. 이 모듈의 나머지 부분에 사용되는 코드는 /dotnet-feature-flags 디렉터리에 있습니다.

Visual Studio Code를 사용하려면 리포지토리를 https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative 로컬 컴퓨터에 복제합니다. 그러면:

  1. Visual Studio Code에서 Dev Container를 실행하기 위한 시스템 요구 사항을 설치합니다.
  2. Docker가 실행 중인지 확인합니다.
  3. 새 Visual Studio Code 창에서 복제된 리포지토리의 폴더를 엽니다.
  4. Ctrl+Shift+P를 눌러 명령 팔레트를 엽니다.
  5. 검색: >개발 컨테이너: 컨테이너에서 다시 빌드 및 다시 열기
  6. 드롭다운에서 eShopLite - dotnet-feature-flags 를 선택합니다. Visual Studio Code는 개발 컨테이너를 로컬로 만듭니다.

App Configuration 인스턴스 만들기

Azure 구독에서 App Configuration 인스턴스를 만들려면 다음 단계를 완료합니다.

  1. 새 터미널 창에서 Azure CLI에 로그인합니다.

    az login --use-device-code

  2. 선택한 Azure 구독을 봅니다.

    az account show -o table

    잘못된 구독을 선택한 경우 az account set 명령을 사용하여 올바른 구독을 선택합니다.

  3. 다음 Azure CLI 명령을 실행하여 Azure 지역 및 연결된 이름 목록을 가져옵니다.

    az account list-locations -o table

    가장 가까운 지역을 찾아 다음 단계에서 사용하여 대체합니다. [Closest Azure region]

  4. 다음 Azure CLI 명령을 실행하여 App Configuration 인스턴스를 만듭니다.

    export LOCATION=[Closest Azure region]
export RESOURCE_GROUP=rg-eshop
export CONFIG_NAME=eshop-app-features$SRANDOM

    LOCATION을 가까운 Azure 지역(예: eastus)으로 변경해야 합니다. 리소스 그룹 또는 앱 구성에 다른 이름을 지정하려면 위의 값을 변경합니다.

  5. 다음 명령을 실행하여 Azure 리소스 그룹을 만듭니다.

    az group create --name $RESOURCE_GROUP --___location $LOCATION

  6. 다음 명령을 실행하여 App Configuration 인스턴스를 만듭니다.

    az appconfig create --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --___location $LOCATION --sku Free

    다음과 유사한 출력이 표시됩니다.

    {
  "createMode": null,
  "creationDate": "2023-10-31T15:40:10+00:00",
  "disableLocalAuth": false,
  "enablePurgeProtection": false,
  "encryption": {
    "keyVaultProperties": null
  },
  "endpoint": "https://eshop-app-features1168054702.azconfig.io",
  "id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/rg-eshop/providers/Microsoft.AppConfiguration/configurationStores/eshop-app-features1168054702",
  "identity": null,

  7. App Configuration 인스턴스에 대한 연결 문자열을 검색하려면 다음 명령을 실행합니다.

    az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv

    Endpoint=으로 시작하는 이 문자열은 App Configuration 저장소의 연결 문자열을 나타냅니다.

  8. 연결 문자열을 복사합니다. 잠시 후에 당신이 사용할 거예요.

App Configuration 연결 문자열 저장

이제 애플리케이션에 App Configuration 연결 문자열을 추가합니다. 다음 단계를 완료합니다.

  1. /dotnet-feature-flags/docker-compose.yml 파일을 엽니다.

  2. 줄 13에 새 환경 변수를 추가합니다.

    - ConnectionStrings:AppConfig=[PASTE CONNECTION STRING HERE]

    다음 docker-compose.yml YAML과 유사합니다.

    environment: 
  - ProductEndpoint=http://backend:8080
  - ConnectionStrings:AppConfig=Endpoint=https://eshop-app-features1168054702.azconfig.io;Id=<ID>;Secret=<Secret value>

앞의 줄은 환경 변수 이름인 키-값 쌍 ConnectionStrings:AppConfig 을 나타냅니다. Store 프로젝트에서 환경 변수 구성 공급자는 해당 값을 읽습니다.

팁 (조언)

Azure App Configuration 연결 문자열에는 일반 텍스트 암호가 포함되어 있습니다. 실제 앱에서는 비밀의 보안 스토리지를 위해 App Configuration을 Azure Key Vault와 통합하는 것이 좋습니다. Key Vault는 이 모듈의 범위를 벗어났지만 자습서 : ASP.NET Core 앱에서 Key Vault 참조 사용 지침에서 찾을 수 있습니다.

App Configuration 저장소에 기능 플래그 추가

Azure App Configuration에서 키-값 쌍을 만들고 사용하도록 설정하여 기능 플래그로 처리합니다. 다음 단계를 완료합니다.

  1. 다른 브라우저 탭에서 Azure CLI와 동일한 계정 및 디렉터리를 사용하여 Azure Portal 에 로그인합니다.

  2. 검색 상자를 사용하여 접두사 eshop-app-features로 된 App Configuration 리소스를 찾아 엽니다.

    'eshop-app-features'가 접두사로 지정된 App Configuration 리소스를 보여 주는 Azure Portal 검색 결과의 스크린샷

  3. 작업 섹션에서 기능 관리자를 선택합니다.

  4. 위쪽 메뉴에서 + 만들기를 선택합니다.

  5. 기능 플래그 사용 확인란을 선택합니다.

  6. 기능 플래그 이름 텍스트 상자에 SeasonalDiscount를 입력합니다.

  7. 적용을 선택합니다.

    새로 추가된 기능 플래그의 스크린샷.

    이제 App Configuration 저장소 Store 에 기능 플래그가 있으므로 프로젝트를 읽으려면 몇 가지 변경이 필요합니다.

코드 검토

IDE의 탐색기 창에서 디렉터리를 검토합니다. 세 개의 프로젝트DataEntities, Products, 및 Store가 있습니다. 이 Store 프로젝트는 Blazor 앱입니다. 이 Products 프로젝트는 제품 서비스를 포함하는 .NET Standard 라이브러리입니다. 이 DataEntities 프로젝트는 제품 모델을 포함하는 .NET Standard 라이브러리입니다.

App Configuration 저장소에 앱 연결

ASP.NET Core 앱의 App Configuration 저장소에서 값에 액세스하려면 App Configuration에 대한 구성 공급자가 필요합니다.

프로젝트에 다음 변경 내용을 적용합니다 Store .

  1. 터미널 창에서 스토어 폴더로 이동합니다.

    cd dotnet-feature-flags/Store

  2. 다음 명령을 실행하여 App Configuration 서비스에 대한 .NET 구성 공급자를 포함하는 NuGet 패키지를 설치합니다.

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore
dotnet add package Microsoft.FeatureManagement.AspNetCore
dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration

  3. Store/Program.cs 파일을 엽니다.

  4. 파일 맨 위에 새 패키지 참조를 추가합니다.

    using Microsoft.FeatureManagement;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Configuration.AzureAppConfiguration;

  5. AddAzureAppConfiguration 코드 주석 추가 아래에 이 코드를 추가합니다.

    // Retrieve the connection string
var connectionString = builder.Configuration.GetConnectionString("AppConfig");

// Load configuration from Azure App Configuration
builder.Configuration.AddAzureAppConfiguration(options => {
  options.Connect(connectionString)
    .UseFeatureFlags();
});

// Register the Feature Management library's services
builder.Services.AddFeatureManagement();
builder.Services.AddAzureAppConfiguration();

    앞의 코드 조각에서 다음을 수행합니다.

    • 이 메서드는 Connect App Configuration 저장소에 인증합니다. 연결 문자열이 환경 변수 ConnectionStrings:AppConfig로 전달되고 있음을 기억하세요.
    • 이 UseFeatureFlags 메서드를 사용하면 기능 관리 라이브러리가 App Configuration 저장소에서 기능 플래그를 읽을 수 있습니다.
    • 두 builder.Services 호출은 기능 관리 라이브러리의 서비스를 앱의 종속성 주입 컨테이너에 등록합니다.

  6. 파일 아래쪽의 App Configuration 미들웨어 추가 아래에서 다음 코드를 추가합니다.

    app.UseAzureAppConfiguration();

    위의 코드는 요청 파이프라인에 App Configuration 미들웨어를 추가합니다. 미들웨어는 들어오는 모든 요청에 대해 기능 관리 매개 변수에 대한 새로 고침 작업을 트리거합니다. AzureAppConfiguration 그런 다음 새로 고침 설정에 따라 값을 가져오기 위해 실제로 저장소에 연결해야 하는 시기를 공급자가 결정해야 합니다.

판매 배너 사용

이제 앱에서 기능 플래그를 읽을 수 있지만 제품 페이지를 업데이트하여 판매가 진행 중임을 표시해야 합니다. 다음 단계를 완료합니다.

  1. Store/Components/Pages/Products.razor 파일을 엽니다.

  2. 파일 맨 위에 다음 코드를 추가합니다.

    @using Microsoft.FeatureManagement
@inject IFeatureManager FeatureManager

    위의 코드는 기능 관리 라이브러리의 네임스페이스를 가져오고 구성 요소에 IFeatureManager 인터페이스를 삽입합니다.

  3. @code 섹션에서 다음 변수를 추가하여 기능 플래그의 상태를 저장합니다.

    private bool saleOn = false;

  4. 메서드에서 OnInitializedAsync 다음 코드를 추가합니다.

    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    메서드는 다음 코드와 같이 표시됩니다.

    protected override async Task OnInitializedAsync()
{
    saleOn = await FeatureManager.IsEnabledAsync("SeasonalDiscount");

    // Simulate asynchronous loading to demonstrate streaming rendering
    products = await ProductService.GetProducts();
}

  5. 줄 26의 <!-- Add a sales alert for customers --> 주석 아래에 다음 코드를 추가합니다.

    <!-- Add a sales alert for customers -->
@if (saleOn)
{
<div class="alert alert-success" role="alert">
  Our sale is now on.
</div>
}

    기능 플래그를 사용하는 경우 위의 코드는 판매 경고를 표시합니다.

앱 빌드

  1. 모든 변경 내용을 저장했고 dotnet-feature-flags 디렉터리에 있는지 확인합니다. 터미널에서 다음 명령을 실행합니다.

    dotnet publish /p:PublishProfile=DefaultContainer

  2. docker를 사용하여 앱을 실행합니다.

    docker compose up

기능 플래그 테스트

기능 플래그가 코드 영역에서 예상대로 작동하는지 확인하려면 다음 단계를 완료합니다.

  1. 포트 탭으로 전환한 다음 프런트 엔드 포트의 로컬 주소 오른쪽에서 지구본 아이콘을 선택합니다. 브라우저가 홈페이지에서 새 탭을 엽니다.
  2. 제품을 선택합니다.

Visual Studio Code를 로컬에서 사용하는 경우 http://localhost:32000/products을(를) 엽니다.

제품 페이지의 판매 경고를 보여 주는 스크린샷.

Azure Portal에서 기능 플래그를 사용하거나 사용하지 않도록 설정하고 제품 페이지를 새로 고쳐 작동 중인 플래그를 확인할 수 있습니다.