AngularでAzure App Configurationの機能フラグを使ってみた

実際に使ってみたので備忘録として残します。

環境

Angular v10です

Azure App Configurationの作成

• 価格：Freeで問題なし

アクセス情報を取得する

App Configurationを作成したら
[アクセスキー]→[接続文字列]をコピーしておく。(後で使う)

機能フラグの作成

[機能マネージャー]→[追加]からキーを追加する
機能フラグ名を入力して、他は既定値でOK。
「FeatureShowText」という名前の機能フラグを追加してみる
追加すると[機能マネージャー]に列が追加されます。
列には[有効]の列があるので、ここをクリックすることで機能フラグのON/OFFを切り替えれます。

Angularアプリ内で機能フラグを使用する

• パッケージをinstallする

"@azure/app-configuration": "^1.3.0"
"@azure/identity": "^1.5.0"

• 機能フラグを取得する処理をかく
  • 接続文字列を明記(本番環境などにあげる場合はKeyVaultなどから参照する構成にしよう)

async getFeatureFlag() {
    const conn = 'コピーした接続文字列を入力'; // 接続文字列 secret
    const client = new AppConfigurationClient(conn);

    const val = await client.getConfigurationSetting({ key: '.appconfig.featureflag/FeatureShowText' }); // .appconfig.featureflag/{先程追加した機能フラグ名}
    return JSON.parse(val.value).enabled;
  }

• 参照した機能フラグを保管するfeatureFlagを定義する

 featureFlag = this.getFeatureFlag();

• 実際のソース

👇こんな感じ

app.component.html

<div>
  <span *ngIf="(featureFlag | async)">
    機能フラグはいまONになっています。
    <button>新機能のボタン</button>
  </span>
  <span *ngIf="!(featureFlag | async)">
    機能フラグはいまOFFになっています。
  </span>
</div>

app.component.ts

import { Component } from '@angular/core';
import { AppConfigurationClient } from '@azure/app-configuration';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-test';

  featureFlag = this.getFeatureFlag();

  // tslint:disable-next-line:typedef
  async getFeatureFlag() {
    const conn = 'コピーした接続文字列を入力'; // 接続文字列 secret
    const client = new AppConfigurationClient(conn);

    const val = await client.getConfigurationSetting({ key: '.appconfig.featureflag/FeatureShowText' }); // .appconfig.featureflag/{先程追加した機能フラグ名}
    return JSON.parse(val.value).enabled;
  }

}

機能フラグをON/OFFして試してみよう

• ng serve -oで起動
• 実際に作成した機能フラグを有効/無効にして動きを見てみる

まとめ

機能フラグを使用することで
ロールバックや即時バグ修正のリスク回避を行うことができるので使える場面は多そう。