Упражнение. Реализация флага функции для управления функциями приложения ASP.NET Core

  • 12 мин

В этом упражнении реализуйте флаг функции для переключения сезонного баннера продаж для приложения. Флаги функций позволяют переключать доступность компонентов без повторного развертывания приложения.

Вы будете использовать управление функциями в библиотеке флагов компонентов .NET. Эта библиотека предоставляет вспомогательные методы для реализации флагов функций в приложении. Библиотека поддерживает как простые структуры, например условные операторы, так и более сложные сценарии, в которых используется условное добавление маршрутов или фильтров действий. Кроме того, она поддерживает фильтры функций, которые позволяют включать функции на основе определенных параметров. Эти параметры могут представлять время, долю или группу пользователей.

В этом уроке вы выполните следующие задачи:

  • Создайте экземпляр Конфигурация приложений Azure.
  • Добавьте флаг функции в хранилище службы "Конфигурация приложений".
  • Подключение приложение в хранилище Конфигурация приложений.
  • Измените приложение, чтобы использовать флаг функции.
  • Измените страницу продуктов, чтобы отобразить баннер по продажам.
  • Создайте и протестируйте приложение.

Открытие среды разработки

Вы можете использовать пространство кода GitHub, в котором размещено упражнение, или выполнить упражнение локально в Visual Studio Code.

Чтобы использовать пространство кода, создайте предварительно настроенное пространство GitHub Codespace с помощью этой ссылки на создание Codespace.

GitHub занимает несколько минут, чтобы создать и настроить пространство кода. По завершении вы увидите файлы кода для упражнения. Код, используемый для остальной части этого модуля, находится в каталоге /dotnet-feature-flags .

Чтобы использовать Visual Studio Code, клонируйте репозиторий https://github.com/MicrosoftDocs/mslearn-dotnet-cloudnative на локальный компьютер. Затем:

  1. Установите все системные реквименты для запуска контейнера разработки в Visual Studio Code.
  2. Убедитесь, что Docker запущен.
  3. В новом окне Visual Studio Code откройте папку клонированного репозитория
  4. Нажмите клавиши CTRL SHIFT++P, чтобы открыть палитру команд.
  5. Поиск: контейнеры разработки: >перестроение и повторное открытие в контейнере
  6. Выберите eShopLite — dotnet-feature-flags из раскрывающегося списка. Visual Studio Code создает контейнер разработки локально.

Создание экземпляра Конфигурации приложений

Создайте экземпляр службы "Конфигурация приложений" в подписке Azure:

  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, чтобы создать экземпляр Конфигурация приложений:

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

    Необходимо изменить расположение в регионе Azure, близком к вам, например eastus. Если вам нужно другое имя для группы ресурсов или конфигурации приложения, измените приведенные выше значения.

  5. Выполните следующую команду, чтобы создать группу ресурсов Azure:

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

  6. Выполните следующую команду, чтобы создать экземпляр Конфигурация приложений:

    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/7eebce2a-0884-4df2-8d1d-2a3c051e47fe/resourceGroups/rg-eshop/providers/Microsoft.AppConfiguration/configurationStores/eshop-app-features1168054702",
  "identity": null,

  7. Выполните следующую команду, чтобы получить строка подключения для экземпляра Конфигурация приложений:

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

    Эта строка, префиксная с Endpoint= префиксом, представляет строка подключения хранилища Конфигурация приложений.

  8. Скопируйте строку подключения. Она понадобится вам чуть позже.

Хранение строки подключения службы "Конфигурация приложений"

Теперь вы добавите Конфигурация приложений строка подключения в приложение. Выполните следующие действия:

  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" содержит секретный код в виде обычного текста. В реальных приложениях рекомендуется интегрировать службу "Конфигурация приложений" с Azure Key Vault для безопасного хранения секретов. Key Vault не область для этого модуля, но рекомендации см. в руководстве. Использование ссылок Key Vault в приложении ASP.NET Core.

Добавление флага функции в хранилище службы "Конфигурация приложений"

В службе "Конфигурация приложений Azure" создайте и включите пару "ключ-значение", которая будет обрабатываться как флаг функции. Выполните следующие действия:

  1. На другой вкладке браузера войдите на портал Azure с той же учетной записью и каталогом, что использовались для Azure CLI.

  2. Используйте поле поиска, чтобы найти и открыть ресурс службы "Конфигурация приложений" с префиксом eshop-app-features.

    Снимок экрана: результаты поиска портал Azure с префиксом ресурса Конфигурация приложений с помощью eshop-app-features.

  3. В разделе "Операции" выберите диспетчер компонентов.

  4. В верхнем меню нажмите кнопку +Создать.

  5. Установите флажок "Включить функцию" проверка.

  6. В текстовом поле "Имя флага компонента" введите SeasonalDiscount.

  7. Выберите Применить.

    Снимок экрана: новый добавленный флаг компонента.

    Теперь, когда флаг функции существует в хранилище службы "Конфигурация приложений", в проект Store нужно внести некоторые изменения, чтобы разрешить его считывание.

Изучение кода

Просмотрите каталоги в области обозревателя в интегрированной среде разработки. Обратите внимание, что существует три проекта DataEntities, Productsи Store. Проект Store — это приложение Blazor. Проект Products — это библиотека .NET Standard, содержащая службу продуктов. Проект DataEntities — это библиотека .NET Standard, содержащая модель продукта.

Подключение приложения к хранилищу службы "Конфигурация приложений"

Чтобы получить доступ к значениям из хранилища службы "Конфигурация приложений" в приложении ASP.NET Core, требуется поставщик конфигурации для службы "Конфигурация приложений".

Внесите следующие изменения в проект Store:

  1. В окне терминала перейдите в папку Store:

    cd dotnet-feature-flags/Store

  2. Выполните следующую команду, чтобы установить пакет NuGet, содержащий поставщика конфигурации .NET для службы Конфигурации приложений:

    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 выполняет аутентификацию в хранилище службы "Конфигурация приложений". Напомним, что строка подключения передается в качестве переменной ConnectionStrings:AppConfigсреды.
    • Этот UseFeatureFlags метод позволяет библиотеке управления функциями считывать флаги функций из хранилища Конфигурация приложений.
    • Два builder.Services вызова регистрируют службы библиотеки управления функциями в контейнере внедрения зависимостей приложения.

  6. В нижней части файла ниже // Добавьте по промежуточному слоям Конфигурация приложений, добавьте следующий код:

    app.UseAzureAppConfiguration();

    Приведенный выше код добавляет ПО промежуточного слоя службы "Конфигурация приложений" в конвейер запросов. ПО промежуточного слоя активирует операцию обновления для параметров управления функциями для каждого входящего запроса. Затем поставщик 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 можно включить и отключить флаг компонента и обновить страницу продуктов, чтобы увидеть флаг в действии.