クイック スタート:ASP.NET Core アプリに機能フラグを追加するQuickstart: Add feature flags to an ASP.NET Core app

このクイックスタートでは、Azure App Configuration を使用して、ASP.NET Core アプリケーションにエンド ツー エンドの機能管理の実装を作成します。In this quickstart, you create an end-to-end implementation of feature management in an ASP.NET Core application using Azure App Configuration. App Configuration サービスを使用し、すべての機能フラグを 1 か所に格納し、その状態を制御します。You will use the App Configuration service to centrally store all your feature flags and control their states.

.NET Core 機能管理ライブラリは、包括的な機能フラグのサポートにより、フレームワークを拡張します。The .NET Core Feature Management libraries extend the framework with comprehensive feature flag support. これらのライブラリは、.NET Core 構成システム上に構築されます。These libraries are built on top of the .NET Core configuration system. また、.NET Core 構成プロバイダーを介して、App Configuration とシームレスに統合されます。They seamlessly integrate with App Configuration through its .NET Core configuration provider.

前提条件Prerequisites

App Configuration ストアを作成するCreate an App Configuration store

  1. 新しい App Configuration ストアを作成するには、Azure portal にサインインします。To create a new App Configuration store, sign in to the Azure portal. ホーム ページの左上にある [+ リソースの作成] を選択します。In the upper-left corner of the home page, select Create a resource. [Marketplace を検索] ボックスに「App Configuration」と入力し、Enter キーを押します。In the Search the Marketplace box, enter App Configuration and select Enter.

    App Configuration を検索する

  2. 検索結果の [アプリ構成] を選択し、 [作成] を選択します。Select App Configuration from the search results, and then select Create.

    [作成] を選択します

  3. [アプリ構成] > [作成] ウィンドウで、次の設定を入力します。On the App Configuration > Create pane, enter the following settings:

    設定Setting 推奨値Suggested value 説明Description
    リソース名Resource name グローバルに一意の名前Globally unique name App Configuration ストア リソースに使用する一意のリソース名を入力します。Enter a unique resource name to use for the App Configuration store resource. 名前は 5 から 50 文字の文字列で、数字、英字、- 文字のみを使用する必要があります。The name must be a string between 5 and 50 characters and contain only numbers, letters, and the - character. 名前の先頭または末尾を - 文字にすることはできません。The name can't start or end with the - character.
    サブスクリプションSubscription 該当するサブスクリプションYour subscription App Configuration のテストに使用する Azure サブスクリプションを選択します。Select the Azure subscription that you want to use to test App Configuration. アカウントにサブスクリプションが 1 つしかない場合は自動的に選択されるため、 [サブスクリプション] の一覧は表示されません。If your account has only one subscription, it's automatically selected and the Subscription list isn't displayed.
    リソース グループResource group AppConfigTestResourcesAppConfigTestResources App Configuration ストア リソースのリソース グループを選択または作成します。Select or create a resource group for your App Configuration store resource. このグループで複数のリソースをまとめておくと、そのリソース グループを削除することで複数のリソースを同時に削除できるため、便利です。This group is useful for organizing multiple resources that you might want to delete at the same time by deleting the resource group. 詳細については、リソース グループを使用した Azure リソースの管理に関するページを参照してください。For more information, see Use resource groups to manage your Azure resources.
    地域Location 米国中部Central US [場所] を使用して、アプリ構成ストアがホストされている地理的位置を指定します。Use Location to specify the geographic location in which your app configuration store is hosted. 最高のパフォーマンスを得るには、アプリケーションの他のコンポーネントと同じリージョンにリソースを作成します。For the best performance, create the resource in the same region as other components of your application.

    App Configuration ストア リソースを作成する

  4. 作成 を選択します。Select Create. デプロイには数分かかることがあります。The deployment might take a few minutes.

  5. デプロイが完了したら、 [設定] > [アクセス キー] を選択します。After the deployment finishes, select Settings > Access Keys. 接続文字列の読み取り専用の主キーをメモします。Make a note of the primary read-only key connection string. この接続文字列は、後で、作成した App Configuration ストアと通信するようにアプリケーションを構成する際に使用します。You'll use this connection string later to configure your application to communicate with the App Configuration store that you created.

  1. [機能マネージャー] > [+追加] を選択して、Beta という機能フラグを追加します。Select Feature Manager > +Add to add a feature flag called Beta.

    Beta という名前の機能フラグを有効にするEnable feature flag named Beta

    現時点では label を空欄にしておいてください。Leave label undefined for now.

ASP.NET Core Web アプリケーションの作成Create an ASP.NET Core web app

.NET Core コマンド ライン インターフェイス (CLI) を使用して、新しい ASP.NET Core MVC Web アプリ プロジェクトを作成します。Use the .NET Core command-line interface (CLI) to create a new ASP.NET Core MVC web app project. Visual Studio ではなく .NET Core CLI を使用する利点は、.NET Core CLI は Windows、macOS、および Linux プラットフォームで使用できるという点です。The advantage of using the .NET Core CLI instead of Visual Studio is that the .NET Core CLI is available across the Windows, macOS, and Linux platforms.

  1. プロジェクト用の新規フォルダーを作成します。Create a new folder for your project. このクイック スタートでは、TestFeatureFlags という名前を付けます。For this quickstart, name it TestFeatureFlags.

  2. 新しいフォルダーで次のコマンドを実行して、新しい ASP.NET Core MVC Web アプリ プロジェクトを作成します。In the new folder, run the following command to create a new ASP.NET Core MVC web app project:

    dotnet new mvc --no-https
    

シークレット マネージャーを追加するAdd Secret Manager

プロジェクトにシークレット マネージャー ツールを追加します。Add the Secret Manager tool to your project. シークレット マネージャー ツールは、開発作業のための機密データをプロジェクト ツリーの外部に格納します。The Secret Manager tool stores sensitive data for development work outside your project tree. これにより、ソース コード内のアプリ シークレットが偶発的に共有されるのを防止できます。This approach helps prevent the accidental sharing of app secrets within source code.

重要

.NET Core 2.x と 3.x の間には大きな違いがあります。Significant differences exist between .NET Core 2.x and 3.x. お使いの環境に応じて適切な構文を選択します。Select the correct syntax based on your environment.

  1. .csproj ファイルを開きます。Open the .csproj file.

  2. 次の例に示すように、UserSecretsId 要素を追加し、その値を独自の値 (通常は GUID) に置き換えます。Add a UserSecretsId element as shown in the following example, and replace its value with your own, which typically is a GUID:

    <Project Sdk="Microsoft.NET.Sdk.Web">
    
    <PropertyGroup>
        <TargetFramework>netcoreapp2.1</TargetFramework>
        <UserSecretsId>79a3edd0-2092-40a2-a04d-dcb46d5ca9ed</UserSecretsId>
    </PropertyGroup>
    
    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.App" />
        <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.1.2" PrivateAssets="All" />
    </ItemGroup>
    
    </Project>
    

App Configuration ストアに接続するConnect to an App Configuration store

  1. 次のコマンドを実行して、Microsoft.Azure.AppConfiguration.AspNetCore パッケージと Microsoft.FeatureManagement.AspNetCore NuGet パッケージへの参照を追加します。Add reference to the Microsoft.Azure.AppConfiguration.AspNetCore and the Microsoft.FeatureManagement.AspNetCore NuGet packages by running the following commands:

    dotnet add package Microsoft.Azure.AppConfiguration.AspNetCore --version 3.0.0-preview-011100002-1192
    dotnet add package Microsoft.FeatureManagement.AspNetCore --version 2.0.0-preview-010610001-1263
    
  2. 次のコマンドを実行して、プロジェクトのパッケージを復元します。Run the following command to restore packages for your project:

    dotnet restore
    
  3. シークレット マネージャーに、ConnectionStrings:AppConfig という名前のシークレットを追加します。Add a secret named ConnectionStrings:AppConfig to Secret Manager.

    このシークレットには、App Configuration ストアにアクセスするための接続文字列が格納されます。This secret contains the connection string to access your App Configuration store. 次のコマンドの <your_connection_string> の値を、自分の App Configuration ストアの接続文字列に置き換えます。Replace the <your_connection_string> value in the following command with the connection string for your App Configuration store.

    このコマンドは、 .csproj ファイルと同じディレクトリで実行する必要があります。This command must be executed in the same directory as the .csproj file.

    dotnet user-secrets set ConnectionStrings:AppConfig <your_connection_string>
    

    シークレット マネージャーは、Web アプリをローカルにテストするためだけに使用されます。You use Secret Manager only to test the web app locally. たとえば Azure App Service にアプリをデプロイするときは、シークレット マネージャーを使用して接続文字列を格納する代わりに、App Service で [接続文字列] という名前のアプリケーション設定を使用します。When you deploy the app to Azure App Service, for example, you use an application setting named Connection Strings in App Service instead of using Secret Manager to store the connection string.

    このシークレットには、App Configuration API を使用してアクセスできます。You can access this secret with the App Configuration API. 構成名の中のコロン (:) は、サポートされているすべてのプラットフォーム上の App Configuration API で機能します。A colon (:) works in the configuration name with the App Configuration API on all supported platforms. 環境別の構成に関するページを参照してください。See Configuration by environment.

  4. config.AddAzureAppConfiguration() メソッドを呼び出して App Configuration を使用するように、CreateWebHostBuilder メソッドを更新します。Update the CreateWebHostBuilder method to use App Configuration by calling the config.AddAzureAppConfiguration() method.

    重要

    CreateHostBuilder により、.NET Core 3.0 の CreateWebHostBuilder が置き換えられます。CreateHostBuilder replaces CreateWebHostBuilder in .NET Core 3.0. お使いの環境に応じて適切な構文を選択します。Select the correct syntax based on your environment.

    public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
        WebHost.CreateDefaultBuilder(args)
            .ConfigureAppConfiguration((hostingContext, config) =>
            {
                var settings = config.Build();
                config.AddAzureAppConfiguration(options => {
                    options.Connect(settings["ConnectionStrings:AppConfig"])
                        .UseFeatureFlags();
                });
            })
            .UseStartup<Startup>();
    
  5. Startup.cs を開き、.NET Core 機能マネージャーへの参照を追加します。Open Startup.cs, and add references to the .NET Core feature manager:

    using Microsoft.FeatureManagement;
    
  6. services.AddFeatureManagement() メソッドを呼び出して機能フラグ サポートを追加するように、ConfigureServices メソッドを更新します。Update the ConfigureServices method to add feature flag support by calling the services.AddFeatureManagement() method. 必要に応じて、services.AddFeatureFilter<FilterType>() を呼び出すことで、機能フラグで使用される任意のフィルターを含めることができます。Optionally, you can include any filter to be used with feature flags by calling services.AddFeatureFilter<FilterType>():

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);        
        services.AddFeatureManagement();
    }
    
  7. Configure メソッドを更新してミドルウェアを追加し、ASP.NET Core Web アプリで要求の受信が続けられている間、定期的に機能フラグの値を更新できるようにします。Update the Configure method to add a middleware to allow the feature flag values to be refreshed at a recurring interval while the ASP.NET Core web app continues to receive requests.

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }
    
            app.UseStaticFiles();
            app.UseCookiePolicy();
            app.UseAzureAppConfiguration();
            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            });
    }
    
  8. MyFeatureFlags.cs ファイルを追加します。Add a MyFeatureFlags.cs file:

    namespace TestFeatureFlags
    {
        public enum MyFeatureFlags
        {
            Beta
        }
    }
    
  9. Controllers ディレクトリに BetaController.cs を追加します。Add BetaController.cs to the Controllers directory:

    using Microsoft.AspNetCore.Mvc;
    using Microsoft.FeatureManagement;
    using Microsoft.FeatureManagement.Mvc;
    
    namespace TestFeatureFlags.Controllers
    {
        public class BetaController: Controller
        {
            private readonly IFeatureManager _featureManager;
    
            public BetaController(IFeatureManagerSnapshot featureManager)
            {
                _featureManager = featureManager;
            }
    
            [FeatureGate(MyFeatureFlags.Beta)]
            public IActionResult Index()
            {
                return View();
            }
        }
    }
    
  10. Views ディレクトリの _ViewImports.cshtml を開き、機能マネージャーのタグ ヘルパーを追加します。Open _ViewImports.cshtml in the Views directory, and add the feature manager tag helper:

    @addTagHelper *, Microsoft.FeatureManagement.AspNetCore
    
  11. Views\Shared ディレクトリにある _Layout.cshtml を開いて、<body> > <header> の下の <nav> バー コードを次のコードに置き換えます。Open _Layout.cshtml in the Views\Shared directory, and replace the <nav> bar code under <body> > <header> with the following code:

    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">TestFeatureFlags</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <feature name="Beta">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Beta" asp-action="Index">Beta</a>
                    </li>
                    </feature>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
  12. Views の下に Beta ディレクトリを作成し、そこに Index.cshtml を追加します。Create a Beta directory under Views and add Index.cshtml to it:

    @{
        ViewData["Title"] = "Beta Home Page";
    }
    
    <h1>
        This is the beta website.
    </h1>
    

アプリをビルドしてローカルで実行するBuild and run the app locally

  1. .NET Core CLI を使用してアプリケーションをビルドするには、コマンド シェルで次のコマンドを実行します。To build the app by using the .NET Core CLI, run the following command in the command shell:

    dotnet build
    
  2. ビルドが正常に完了したら、次のコマンドを実行して、Web アプリをローカルで実行します。After the build successfully completes, run the following command to run the web app locally:

    dotnet run
    
  3. ブラウザー ウィンドウを開いて、https://localhost:5000 (ローカルでホストされた Web アプリの既定の URL) に移動します。Open a browser window, and go to https://localhost:5000, which is the default URL for the web app hosted locally. Azure Cloud Shell で作業している場合は、 [Web プレビュー][構成] の順に選択します。If you're working in the Azure Cloud Shell, select the Web Preview button followed by Configure. 確認を求められたら、ポート 5000 を選択します。When prompted, select port 5000.

    [Web プレビュー] ボタンを見つける

    ブラウザーに、次の画像のようなページが表示されます。Your browser should display a page similar to the image below. クイックスタートのアプリ (ローカルで起動)Quickstart app launch local

  4. Azure portal にサインインします。Sign in to the Azure portal. [すべてのリソース] を選択し、クイック スタートで作成した App Configuration ストア インスタンスを選択します。Select All resources, and select the App Configuration store instance that you created in the quickstart.

  5. [Feature Manager](機能マネージャー) を選択し、 [Beta](ベータ) キーの状態を [On](オン) に変更します。Select Feature Manager, and change the state of the Beta key to On.

  6. コマンド プロンプトに戻り、Ctrl-C キーを押して、dotnet プロセスの実行をキャンセルします。Return to the command prompt and cancel the running dotnet process by pressing Ctrl-C. dotnet run を使用してアプリケーションを再起動します。Restart your application using dotnet run.

  7. ブラウザー ページを最新の情報に更新して新しい構成設定を確認します。Refresh the browser page to see the new configuration settings.

    クイック スタートのアプリ (ローカルで起動)

リソースをクリーンアップするClean up resources

次のチュートリアルに進む場合は、このクイックスタートで作成したリソースを再利用できるよう残しておいてください。If you plan to continue to the next tutorial, keep the resources you created in this quickstart for that you can reuse them.

クイック スタートのサンプル アプリケーションの使用を終える場合は、課金を避けるために、このクイック スタートで作成した Azure リソースを削除することができます。If you're finished with the quickstart sample application, delete the Azure resources you created in this quickstart to avoid charges.

重要

リソース グループを削除すると、元に戻すことができません。Deleting a resource group is irreversible. リソース グループとそのすべてのリソースは完全に削除されます。The resource group and all the resources in it are permanently deleted. 間違ったリソース グループやリソースをうっかり削除しないようにしてください。Make sure that you don't accidentally delete the wrong resource group or resources. このサンプルをホストするためのリソースを、保持したいリソースを含むリソース グループ内に作成した場合は、リソース グループを削除する代わりに、各リソースをそれぞれのウィンドウから個別に削除します。If you created the resources for hosting this sample inside a resource group that contains resources you want to keep, delete each resource individually from its respective pane instead of deleting the resource group.

  1. Azure portal にサインインし、 [リソース グループ] を選択します。Sign in to the Azure portal, and select Resource groups.
  2. [名前でフィルター] ボックスにリソース グループの名前を入力します。In the Filter by name box, enter the name of your resource group.
  3. 結果一覧からリソース グループを選択し、行を右クリックするか省略記号 ( ... ) ボタンを使用してコンテキスト メニューを開きます。In the result list, select the resource group, and either right-click the row or use the ellipsis (...) button to open the context menu.
  4. [リソース グループの削除] を選択します。Select Delete resource group.
  5. リソース グループの削除の確認を求めるメッセージが表示されます。You're asked to confirm the deletion of the resource group. 確認のためにリソース グループの名前を入力し、 [削除] を選択します。Enter the name of your resource group to confirm, and select Delete.

しばらくすると、リソース グループとそのすべてのリソースが削除されます。After a few moments, the resource group and all its resources are deleted.

次のステップNext steps

このクイック スタートでは、新しい App Configuration ストアを作成し、この構成ストアを使用して、機能管理ライブラリを介して ASP.NET Core Web アプリの機能を管理しました。In this quickstart, you created a new App Configuration store and used it to manage features in an ASP.NET Core web app via the Feature Management libraries.