クイック スタート:Spring Boot アプリに機能フラグを追加する

このクイックスタートでは、Azure App Configuration を Spring Boot Web アプリに組み込み、機能管理のエンドツーエンド実装を作成します。 App Configuration サービスを使用し、すべての機能フラグを一箇所に格納し、その状態を制御できます。

Spring Boot 機能管理ライブラリは、包括的な機能フラグのサポートにより、フレームワークを拡張します。 これらのライブラリは、Azure のライブラリには一切依存しません。 また、Spring Boot 構成プロバイダーを介して、App Configuration とシームレスに統合されます。

前提条件

App Configuration インスタンスを作成する

  1. 新しい App Configuration ストアを作成するには、Azure portal にサインインします。 ホーム ページの左上にある [+ リソースの作成] を選択します。 [Search services and marketplace] (サービスとマーケットプレースの検索) ボックスに「App Configuration」と入力し、Enter キーを押します。

    Search for App Configuration

  2. 検索結果の [アプリ構成] を選択し、 [作成] を選択します。

    Select Create

  3. [Create App Configuration](App Configuration の作成) ペインで、次の設定を入力します。

    設定 推奨値 説明
    サブスクリプション 該当するサブスクリプション App Configuration のテストに使用する Azure サブスクリプションを選択します。 アカウントにサブスクリプションが 1 つしかない場合は自動的に選択されるため、[サブスクリプション] の一覧は表示されません。
    リソース グループ AppConfigTestResources App Configuration ストア リソースのリソース グループを選択または作成します。 このグループで複数のリソースをまとめておくと、そのリソース グループを削除することで複数のリソースを同時に削除できるため、便利です。 詳細については、リソース グループを使用した Azure リソースの管理に関するページを参照してください。
    リソース名 グローバルに一意の名前 App Configuration ストア リソースに使用する一意のリソース名を入力します。 名前は 5 から 50 文字の文字列で、数字、英字、- 文字のみを使用する必要があります。 名前の先頭または末尾を - 文字にすることはできません。
    Location 米国中部 [場所] を使用して、アプリ構成ストアがホストされている地理的位置を指定します。 最高のパフォーマンスを得るには、アプリケーションの他のコンポーネントと同じリージョンにリソースを作成します。
    [価格レベル] Free 目的の価格レベルを選択します。 詳細については、App Configuration の価格のページを参照してください。
  4. [確認および作成] を選択して設定を検証します。

  5. 作成 を選択します。 デプロイには数分かかることがあります。

  6. デプロイが完了したら、App Configuration リソースに移動します。 [設定]>[アクセス キー] の順に選択します。 接続文字列の読み取り専用の主キーをメモします。 この接続文字列は、後で、作成した App Configuration ストアと通信するようにアプリケーションを構成する際に使用します。

  1. [機能マネージャー]>[+追加] を選択して、Beta という機能フラグを追加します。

    Enable feature flag named Beta

    現時点では label を空欄にしておいてください。

Spring Boot アプリを作成する

新しい Spring Boot プロジェクトを作成する:

  1. Spring Initializr に移動します。

  2. 次のオプションを指定します。

    • JavaMaven プロジェクトを生成します。
    • Spring Boot のバージョンとして、2.0 以降を指定します。
    • アプリケーションのグループ (Group)成果物 (Artifact) の名前を指定します。 この記事では、com.exampledemo を使用します。
    • Spring Web の依存関係を追加します。
  3. 前の各オプションを指定してから、 [プロジェクトの生成] を選択します。 メッセージが表示されたら、ローカル コンピューターにプロジェクトをダウンロードします。

機能管理を追加する

  1. ファイルをローカル システム上に展開したら、Spring Boot アプリケーションの編集を開始できます。 アプリのルート ディレクトリで pom.xml を探します。

  2. テキスト エディターで pom.xml ファイルを開き、<dependencies> の一覧に以下を追加します。

    <dependency>
        <groupId>com.azure.spring</groupId>
        <artifactId>azure-spring-cloud-appconfiguration-config-web</artifactId>
        <version>2.6.0</version>
    </dependency>
    <dependency>
        <groupId>com.azure.spring</groupId>
        <artifactId>azure-spring-cloud-feature-management-web</artifactId>
        <version>2.4.0</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

Note

App Configuration ストアに接続する

  1. アプリの resources ディレクトリに移動し、bootstrap.properties を開きます。 ファイルが存在しない場合は、作成してください。 次の行をファイルに追加します。

    spring.cloud.azure.appconfiguration.stores[0].connection-string= ${APP_CONFIGURATION_CONNECTION_STRING}
    spring.cloud.azure.appconfiguration.stores[0].feature-flags.enabled=true
    
  2. APP_CONFIGURATION_CONNECTION_STRING という名前の環境変数を設定し、それを App Configuration ストアへの接続文字列に設定します。 コマンド ラインで次のコマンドを実行してコマンド プロンプトを再起動し、変更が反映されるようにします。

    Windows コマンド プロンプトを使用してアプリをローカルでビルドして実行するには、次のコマンドを実行します。

    setx APP_CONFIGURATION_CONNECTION_STRING "connection-string-of-your-app-configuration-store"
    

    変更を有効にするために、コマンド プロンプトを再起動します。 環境変数の値を出力して、正しく設定されていることを確認します。

  3. アプリのパッケージ ディレクトリに、HelloController.java という名前の新しい Java ファイルを作成します。

    package com.example.demo;
    
    import org.springframework.boot.context.properties.ConfigurationProperties;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    
    import com.azure.spring.cloud.feature.manager.FeatureManager;
    import org.springframework.web.bind.annotation.GetMapping;
    
    
    @Controller
    @ConfigurationProperties("controller")
    public class HelloController {
    
        private FeatureManager featureManager;
    
        public HelloController(FeatureManager featureManager) {
            this.featureManager = featureManager;
        }
    
        @GetMapping("/welcome")
        public String mainWithParam(Model model) {
            model.addAttribute("Beta", featureManager.isEnabledAsync("Beta").block());
            return "welcome";
        }
    }
    
  4. アプリの templates ディレクトリに、welcome.html という名前の新しい HTML ファイルを作成します。

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Feature Management with Spring Cloud Azure</title>
    
        <link rel="stylesheet" href="/css/main.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/@popperjs/core@2"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    
    </head>
    <body>
        <header>
        <!-- Fixed navbar -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <a class="navbar-brand" href="#">TestFeatureFlags</a>
            <button class="navbar-toggler" aria-expanded="false" aria-controls="navbarCollapse" aria-label="Toggle navigation" type="button" data-target="#navbarCollapse" data-toggle="collapse">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item" th:if="${Beta}">
                <a class="nav-link" href="#">Beta</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Privacy</a>
                </li>
            </ul>
            </div>
        </nav>
        </header>
        <div class="container body-content">
            <h1 class="mt-5">Welcome</h1>
            <p>Learn more about <a href="https://github.com/Azure/azure-sdk-for-java/blob/master/sdk/appconfiguration/azure-spring-cloud-feature-management/README.md">Feature Management with Spring Cloud Azure</a></p>
    
        </div>
        <footer class="footer">
            <div class="container">
            <span class="text-muted">&copy; 2019 - Projects</span>
        </div>
    
        </footer>
    </body>
    </html>
    
    
  5. CSS という名前の新しいフォルダーを static の下に作成し、その中に main.css という名前の新しい CSS ファイルを作成します。

    html {
     position: relative;
     min-height: 100%;
    }
    body {
     margin-bottom: 60px;
    }
    .footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 60px;
     line-height: 60px;
     background-color: #f5f5f5;
    }
    
    body > .container {
     padding: 60px 15px 0;
    }
    
    .footer > .container {
     padding-right: 15px;
     padding-left: 15px;
    }
    
    code {
     font-size: 80%;
    }
    

アプリをビルドしてローカルで実行する

  1. 自分の Spring Boot アプリケーションを Maven でビルドし、実行します。

    mvn clean package
    mvn spring-boot:run
    
  2. ブラウザー ウィンドウを開き、http://localhost:8080/welcome に移動します。

    Screenshot shows a browser window with a Welcome message.

  3. App Configuration ポータルで [Feature Manager](機能マネージャー) を選択し、 [Beta](ベータ) キーの状態を [On](オン) に変更します。

    Key State
    ベータ On
  4. ブラウザー ページを最新の情報に更新して新しい構成設定を確認します。

    Screenshot shows a browser window with a Welcome message and a Beta link called out.

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

この記事で作成したリソースを引き続き試用しない場合は、ここで作成したリソース グループを削除して課金されないようにしてください。

重要

リソース グループを削除すると、元に戻すことができません。 リソース グループとそのすべてのリソースは完全に削除されます。 間違ったリソース グループやリソースをうっかり削除しないようにしてください。 この記事のリソースを、保持したい他のリソースを含むリソース グループ内に作成した場合は、リソース グループを削除する代わりに、各リソースをそれぞれのペインから個別に削除します。

  1. Azure portal にサインインし、 [リソース グループ] を選択します。
  2. [名前でフィルター] ボックスにリソース グループの名前を入力します。
  3. 結果一覧でリソース グループ名を選択し、概要を表示します。
  4. [リソース グループの削除] を選択します。
  5. リソース グループの削除の確認を求めるメッセージが表示されます。 確認のためにリソース グループの名前を入力し、 [削除] を選択します。

しばらくすると、リソース グループとそのすべてのリソースが削除されます。

次のステップ

このクイックスタートでは、新しい App Configuration ストアを作成し、この構成ストアを使用して、機能管理ライブラリを介して Spring Boot Web アプリの機能を管理しました。