연습 - ASP.NET 핵심 앱 기능을 제어하는 기능 플래그 구현
이 연습에서는 기능 플래그를 구현하여 애플리케이션에 대한 계절별 판매 배너를 전환합니다. 기능 플래그를 사용하면 앱을 다시 배포하지 않고 기능 가용성을 전환할 수 있습니다.
.NET 기능 플래그 라이브러리에서 기능 관리를 사용합니다. 이 라이브러리는 앱에서 기능 플래그를 구현하는 도우미를 제공합니다. 이 라이브러리는 조건부로 경로 또는 작업 필터를 추가하는 등 고급 시나리오에 대한 조건문과 같이 단순한 사용 사례를 지원합니다. 또한 특정 매개 변수를 기반으로 기능을 사용할 수 있도록 하는 기능 필터를 지원합니다. 이러한 매개 변수의 예로는 기간, 백분율, 사용자의 하위 집합 등이 있습니다.
이 단원에서 학습할 내용은 다음과 같습니다.
- Azure App Configuration 인스턴스를 만듭니다.
- App Configuration 저장소에 기능 플래그를 추가합니다.
- App Configuration 저장소에 앱 연결.
- 기능 플래그를 사용하도록 애플리케이션을 수정합니다.
- 제품 페이지를 변경하여 판매 배너를 표시합니다.
- 앱 빌드 및 테스트.
개발 환경 열기
연습을 호스팅하는 GitHub 코드 공간을 사용하거나 Visual Studio Code에서 로컬로 연습을 완료하도록 선택할 수 있습니다.
codespace를 사용하려면 이 Codespace 만들기 링크를 사용하여 사전 구성된 GitHub Codespace를 만듭니다.
GitHub는 코드 공간을 만들고 구성하는 데 몇 분 정도 걸립니다. 완료되면 연습에 사용할 코드 파일이 표시됩니다. 이 모듈의 나머지 부분에 사용되는 코드는 /dotnet-feature-flags 디렉터리에 있습니다.
Visual Studio Code를 사용하려면 https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative 리포지토리를 로컬 컴퓨터에 복제합니다. 다음 작업:
- Visual Studio Code에서 Dev Container를 실행하려면 시스템 요구 사항을 설치합니다.
- Docker가 실행 중인지 확인합니다.
- 새 Visual Studio Code 창에서 복제된 리포지토리의 폴더를 엽니다.
- 명령 팔레트를 열려면 Ctrl+Shift+P를 누릅니다.
- 검색: >개발 컨테이너: 다시 빌드 및 컨테이너에서 다시 열기
- 드롭다운에서 eShopLite - dotnet-feature-flags를 선택합니다. Visual Studio Code가 개발 컨테이너를 로컬로 만듭니다.
App Configuration 인스턴스 만들기
Azure 구독에서 App Configuration 인스턴스를 만들려면 다음 단계들을 완료하세요.
새 터미널 창에서 Azure CLI에 로그인합니다.
az login --use-device-code
선택한 Azure 구독을 봅니다.
az account show -o table
잘못된 구독을 선택한 경우 az account set 명령을 사용하여 올바른 구독을 선택합니다.
다음 Azure CLI 명령을 실행하여 Azure 지역 목록 및 이와 연결된 이름을 가져옵니다.
az account list-locations -o table
가장 가까운 지역을 찾아 다음 단계에서
[Closest Azure region]
을(를) 대체하는 데 사용다음 Azure CLI 명령을 실행하여 App Configuration 인스턴스를 만듭니다.
export LOCATION=[Closest Azure region] export RESOURCE_GROUP=rg-eshop export CONFIG_NAME=eshop-app-features$SRANDOM
지역을 가까운 Azure 지역(예: eastus)으로 변경해야 합니다. 리소스 그룹 또는 앱 구성에 다른 이름을 지정하려면 위의 값을 변경합니다.
다음 명령을 실행하여 Azure 리소스 그룹을 만듭니다.
az group create --name $RESOURCE_GROUP --location $LOCATION
다음 명령을 실행하여 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,
App Configuration 인스턴스에 대한 연결 문자열을 검색하려면 다음 명령을 실행합니다.
az appconfig credential list --resource-group $RESOURCE_GROUP --name $CONFIG_NAME --query [0].connectionString --output tsv
위의 출력에서
Endpoint=
접두사가 지정된 문자열은 App Configuration 저장소의 연결 문자열을 나타냅니다.연결 문자열을 복사합니다. 이 문자열을 잠시 후에 사용합니다.
App Configuration 연결 문자열을 저장
이제 애플리케이션에 App Configuration 연결 문자열을 추가합니다. 다음 단계를 완료합니다.
/dotnet-feature-flags/docker-compose.yml 파일을 엽니다.
줄 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에서 기능 플래그로 처리할 키-값 쌍을 만들고 사용하도록 설정합니다. 다음 단계를 완료합니다.
다른 브라우저 탭에서 Azure CLI와 동일한 계정 및 디렉터리를 사용하여 Azure Portal에 로그인합니다.
검색 상자를 사용하여 eshop-app-features 접두사가 추가된 App Configuration 리소스를 찾아 엽니다.
작업 섹션에서 기능 관리자를 선택합니다.
상단 메뉴에서 + 만들기를 선택합니다.
기능 플래그 사용 확인란을 선택합니다.
기능 플래그 이름 텍스트 상자에 SeasonalDiscount를 입력합니다.
적용을 선택합니다.
이제 기능 플래그가 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 프로젝트에 다음 변경 내용을 적용합니다.
터미널 창에서 스토어 폴더로 이동합니다.
cd dotnet-feature-flags/Store
다음 명령을 실행하여 App Configuration 서비스에 대한 .NET 구성 공급자를 포함하는 NuGet 패키지를 설치합니다.
dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore dotnet add package Microsoft.FeatureManagement.AspNetCore dotnet add package Microsoft.Extensions.Configuration.AzureAppConfiguration
Store/Program.cs 파일을 엽니다.
파일 맨 위에 새 패키지 참조를 추가합니다.
using Microsoft.FeatureManagement; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Configuration.AzureAppConfiguration;
// Add the AddAzureAppConfiguration code 주석 아래에 이 코드를 추가합니다.
// 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
호출은 기능 관리 라이브러리의 서비스를 앱의 종속성 주입 컨테이너에 등록합니다.
파일 아래쪽의 // Add the App Configuration middleware 아래에서 다음 코드를 추가합니다.
app.UseAzureAppConfiguration();
위의 코드는 App Configuration 미들웨어를 요청 파이프라인에 추가합니다. 미들웨어는 들어오는 모든 요청에 대해 기능 관리 매개 변수를 위한 새로 고침 작업을 트리거합니다. 그런 다음 이전 단계에서 구성된 새로 고침 설정에 따라 값을 얻기 위해 저장소에 실제로 연결하는 시점을 결정하는 역할은
AzureAppConfiguration
공급자가 담당합니다.
판매 배너 사용
이제 앱에서 기능 플래그를 읽을 수 있지만 제품 페이지를 업데이트하여 판매가 진행 중임을 표시해야 합니다. 다음 단계를 완료합니다.
Store/Components/Pages/Products.razor 파일을 엽니다.
파일 맨 위에 다음 코드를 추가합니다.
@using Microsoft.FeatureManagement @inject IFeatureManager FeatureManager
위의 코드는 기능 관리 라이브러리의 네임스페이스를 가져오고 구성 요소에
IFeatureManager
인터페이스를 삽입합니다.@code 섹션에서 다음 변수를 추가하여 기능 플래그의 상태를 저장합니다.
private bool saleOn = false;
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(); }
줄 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> }
기능 플래그를 사용하는 경우 위의 코드는 판매 경고를 표시합니다.
앱 빌드
모든 변경 내용이 저장되었는지, dotnet-feature-flags 디렉터리에 있는지 확인합니다. 터미널에서 다음 명령을 실행합니다.
dotnet publish /p:PublishProfile=DefaultContainer
Docker를 사용하여 앱을 실행합니다.
docker compose up
기능 플래그 테스트
기능 플래그가 코드 영역에서 예상대로 작동하는지 확인하려면 다음 단계를 완료합니다.
- 포트 탭으로 전환한 다음 프런트 엔드 포트의 로컬 주소 오른쪽에 있는 지구본 아이콘을 선택합니다. 브라우저가 해당 홈페이지에서 새 탭을 엽니다.
- 제품을 선택합니다.
Visual Studio Code를 로컬로 사용하는 경우 http://localhost:32000/products을(를) 엽니다.
Azure Portal에서 기능 플래그를 사용 또는 사용 안 함으로 설정하고 제품 페이지를 새로 고쳐 작동 중인 플래그를 확인할 수 있습니다.