Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

はじめに

最終更新 Markdown で表示Agent セットアップ

このガイドでは、Flagship でフィーチャーフラグを作成し、Cloudflare Worker 内で評価します。

アプリとフラグを作成する

この例では、新しいチェックアウト体験を表示するかどうかを制御する、new-checkout という Boolean フラグを作成します。

  1. Cloudflare ダッシュボード ↗ にログインし、アカウントを選択します。
  2. Compute > Flagship に移動します。
  3. Create app を選択します。プロジェクトまたはサービスに合う名前を付けます（例: checkout-service）。
  4. アプリ内で Create flag を選択します。
  5. キー new-checkout の Boolean フラグを作成します。必要に応じて、ターゲティングルール を追加し、フラグを誰に見せるかを制御します。
  6. フラグをオンにして Save を選択します。

Worker に Flagship バインディングを追加する

Wrangler の設定ファイルに Flagship バインディングを追加すると、Worker からバインディング経由でフラグを評価できます。

{
	"flagship": [
		{
			"binding": "FLAGS",
			"app_id": "<APP_ID>",
		},
	],
}
[[flagship]]
binding = "FLAGS"
app_id = "<APP_ID>"

<APP_ID> は、Cloudflare ダッシュボード ↗ に表示されるアプリ ID に置き換えます。binding フィールドは、Worker のコードから Flagship にアクセスするときの名前です。この例では、バインディングは env.FLAGS として使えます。

Wrangler の設定を更新したら、npx wrangler types を実行して、バインディングの TypeScript 型を生成します。

Worker でフラグを評価する

env.FLAGS バインディングでフラグを評価します。バインディングは型安全なメソッドを提供し、フラグ値を返します。評価に失敗した場合は、指定したデフォルトにフォールバックします。

export default {
	async fetch(request, env) {
		const url = new URL(request.url);
		const userId = url.searchParams.get("userId") ?? "anonymous";

		const showNewCheckout = await env.FLAGS.getBooleanValue(
			"new-checkout",
			false,
			{ userId },
		);

		if (showNewCheckout) {
			return new Response("Welcome to the new checkout experience!");
		}

		return new Response("Standard checkout.");
	},
};
export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		const url = new URL(request.url);
		const userId = url.searchParams.get("userId") ?? "anonymous";

		const showNewCheckout = await env.FLAGS.getBooleanValue(
			"new-checkout",
			false,
			{ userId },
		);

		if (showNewCheckout) {
			return new Response("Welcome to the new checkout experience!");
		}

		return new Response("Standard checkout.");
	},
};

getBooleanValue の第 3 引数は 評価コンテキスト です。Flagship はコンテキストの属性を使ってターゲティングルールに照合します。この例では userId 属性を渡し、パーセンテージロールアウトとユーザー固有のターゲティングが正しく動くようにしています。

デプロイしてテストする

Worker をデプロイします。

npx wrangler deploy

リクエストを送って、フラグ評価をテストします。

curl "https://<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev/?userId=user-42"

ダッシュボードでフラグの値やターゲティングルールを変更し、応答が更新されることを確認します。フラグの変更は数秒以内にグローバルへ伝播します。

（任意）OpenFeature SDK を使う

OpenFeature ↗ の標準インターフェースを使いたい場合や、Cloudflare Worker の外で動かす場合は、バインディングの代わりに @cloudflare/flagship ↗ SDK を使えます。

SDK をインストールします。

npm i @cloudflare/flagship @openfeature/server-sdk

OpenFeature クライアントでフラグを評価します。

Flagship バインディングをプロバイダーに直接渡します。追加の HTTP オーバーヘッドがなく、Worker 内では推奨の方法です。認証はバインディングが自動で処理します。

import { OpenFeature } from "@openfeature/server-sdk";
import { FlagshipServerProvider } from "@cloudflare/flagship/server";

export default {
	async fetch(request, env) {
		await OpenFeature.setProviderAndWait(
			new FlagshipServerProvider({ binding: env.FLAGS }),
		);

		const client = OpenFeature.getClient();

		const showNewCheckout = await client.getBooleanValue(
			"new-checkout",
			false,
			{ targetingKey: "user-42" },
		);

		return new Response(
			showNewCheckout ? "New checkout!" : "Standard checkout.",
		);
	},
};
import { OpenFeature } from "@openfeature/server-sdk";
import { FlagshipServerProvider } from "@cloudflare/flagship/server";

export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		await OpenFeature.setProviderAndWait(
			new FlagshipServerProvider({ binding: env.FLAGS }),
		);

		const client = OpenFeature.getClient();

		const showNewCheckout = await client.getBooleanValue(
			"new-checkout",
			false,
			{ targetingKey: "user-42" },
		);

		return new Response(
			showNewCheckout ? "New checkout!" : "Standard checkout.",
		);
	},
};

Worker の外（例: Node.js）で動かすときは、アプリ ID、アカウント ID、API トークンを使います。Cloudflare アカウントから、Flagship Evaluate または Flagship App Evaluate 権限付きの API トークン を生成します。

import { OpenFeature } from "@openfeature/server-sdk";
import { FlagshipServerProvider } from "@cloudflare/flagship/server";

await OpenFeature.setProviderAndWait(
	new FlagshipServerProvider({
		appId: "<APP_ID>",
		accountId: "<ACCOUNT_ID>",
		authToken: "<API_TOKEN>",
	}),
);

const client = OpenFeature.getClient();

const showNewCheckout = await client.getBooleanValue("new-checkout", false, {
	targetingKey: "user-42",
});
import { OpenFeature } from "@openfeature/server-sdk";
import { FlagshipServerProvider } from "@cloudflare/flagship/server";

await OpenFeature.setProviderAndWait(
	new FlagshipServerProvider({
		appId: "<APP_ID>",
		accountId: "<ACCOUNT_ID>",
		authToken: "<API_TOKEN>",
	}),
);

const client = OpenFeature.getClient();

const showNewCheckout = await client.getBooleanValue("new-checkout", false, {
	targetingKey: "user-42",
});

詳しいセットアップ手順は、SDK ドキュメント を参照してください。

次のステップ

役に立ちましたか？