연습 - Azure App Configuration 인스턴스에서 구성 설정 구현

10분

이제 애플리케이션에 대한 새로운 요구 사항에 따라 기능 플래그가 제품에 대한 할인을 제어할 수 있도록 허용해야 합니다. 이 연습에서는 이 작업을 수행하는 방법을 보여줍니다.

Azure App Configuration 인스턴스에 구성 설정을 추가합니다.
새 설정을 사용하여 제품 가격을 할인하는 코드를 추가합니다.
앱을 빌드하고 테스트합니다.

App Configuration 저장소에 구성 설정 추가

이제 Azure App Configuration에서 새 키-값 쌍을 만들어 판매 할인 비율을 저장합니다. 다음 단계를 완료합니다.

다른 브라우저 탭에서 Azure CLI와 동일한 계정 및 디렉터리를 사용하여 Azure Portal 에 로그인합니다.
검색 상자를 사용하여 접두사 eshop-app-features로 된 App Configuration 리소스를 찾아 엽니다.
작업 섹션에서 구성 탐색기를 선택합니다.
위쪽 메뉴에서 + 만들기 를 선택하고 키-값을 선택합니다.
키 텍스트 상자에 eShopLite__Store__DiscountPercent 입력합니다.
값 텍스트 상자에 0.8을 입력합니다.
적용을 선택합니다.

새 구성 설정을 사용하는 코드 추가

새 구성 설정을 사용하려면 제품 페이지를 업데이트해야 합니다. 다음 단계를 완료합니다.

Visual Studio Code에서 파일을 엽니다 Store/Components/Pages/Products.razor .
@code 섹션에서 다음 변수를 추가하여 기능 플래그의 상태를 저장합니다.
```
private decimal discountPercentage;  
```

메서드에서 OnInitializedAsync 다음 코드를 추가하여 구성 설정의 값을 검색합니다.

if (saleOn) {
  discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
}

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

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

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

    if (saleOn) {
      discountPercentage = Convert.ToDecimal(Configuration.GetSection("eShopLite__Store__DiscountPercent").Value);
    }
}

위의 코드는 Configuration 개체를 사용하여 구성 설정의 값을 검색합니다. 값은 변수에 discountPercentage 10진수로 저장됩니다.

할인된 가격 표시

할인된 가격을 표시하려면 제품 페이지를 업데이트해야 합니다. 다음 단계를 완료합니다.

<td>@product.Price</td>를 다음 코드로 대체합니다.
```
<td>
  @if (saleOn) {
    <strike>@(product.Price)</strike><br>
    @((product.Price * discountPercentage).ToString("#.##"))
  } else {
    @product.Price
  }
</td>
```
위의 코드는 계절별 판매가 사용되는지 확인합니다. 시즌 세일이 사용되는 경우 원래 가격에 줄이 그어지고 그 아래에 할인 가격이 표시됩니다. 계절별 판매가 활성화되지 않으면 원래 가격이 표시됩니다.

앱 빌드

모든 변경 내용을 저장했고 dotnet-feature-flags 디렉터리에 있는지 확인합니다. 터미널에서 다음 명령을 실행합니다.
```
dotnet publish /p:PublishProfile=DefaultContainer 
```
docker를 사용하여 앱을 실행합니다.
```
docker compose up
```

가격 할인 기능 테스트

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

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

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

기능 플래그가 계절별 판매를 제어하는지 테스트하려면 다음 단계를 완료합니다.

Azure Portal에서 접두사가 eshop-app-features인 Azure App Configuration 리소스로 이동합니다.
작업 섹션에서 기능 관리자를 선택합니다.
이 기능을 해제하려면 SeasonalDiscount 사용 토글을 선택합니다.
브라우저에서 애플리케이션으로 돌아갑니다.
홈페이지, 제품 페이지를 선택합니다.

캐시를 지우는 데 최대 30초가 걸릴 수 있습니다. 판매 배너가 계속 표시되는 경우 몇 초 정도 기다렸다가 페이지를 다시 새로 고칩니다.