ホームページ > ウェブフロントエンド > jsチュートリアル > Express.js と GrowthBook を使用した機能フラグ

Express.js と GrowthBook を使用した機能フラグ

Mary-Kate Olsen
リリース: 2024-12-12 15:33:12
オリジナル
762 人が閲覧しました

このガイドでは、GrowthBook 機能フラグを Express.js アプリケーションに追加する方法について説明します。最初から始めることを前提としているため、すでに Express.js アプリケーションをお持ちの場合は、ステップ 2 に進んでください。

1. Express.js アプリを作成する

まず、Express.js をインストールします

npm install express
ログイン後にコピー

次に、単純な hello world ルートを含むindex.js ファイルを作成します

const express = require('express')
const app = express()

app.get('/', (req, res) => {
  res.send('Hello World!')
})

// Listen on port 3000
const port = 3000
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
ログイン後にコピー

最後に、次のコマンドでアプリを実行します:

node index.js
ログイン後にコピー

http://localhost:3000 にアクセスすると、「Hello World!」が表示されるはずです。応答してください!

2. GrowthBook アカウントを作成する

GrowthBook はセルフホスト化できますが、簡単にするために、このガイドでは GrowthBook Cloud を使用します。これは、このような単純なプロジェクトには無料です。

まだアカウントをお持ちでない場合は、https://app.growthbook.io にアクセスして新しいアカウントを作成します。

ログインしたら、SDK 接続 を作成し、言語として Node.js を選択します。これにより、一意のクライアント キーが生成されます。次のステップで使用するので、このキーをメモしておいてください。

3. GrowthBook JavaScript SDK を Express.js アプリに統合する

ファイル .env がまだ存在しない場合は作成し、生成されたキーをそこに追加します。

GROWTHBOOK_API_HOST=https://cdn.growthbook.io
GROWTHBOOK_CLIENT_KEY=
ログイン後にコピー

それでは、GrowthBook JavaScript SDK をインストールしましょう

npm install @growthbook/growthbook
ログイン後にコピー

ここで、index.js ファイルの先頭を変更して、GrowthBookClient インスタンスを作成しましょう:

const express = require('express')
const app = express()
const { GrowthBookClient } = require("@growthbook/growthbook")

// GrowthBookClient instance
const client = new GrowthBookClient({
  apiHost: process.env.GROWTHBOOK_API_HOST,
  clientKey: process.env.GROWTHBOOK_CLIENT_KEY
});

// Initialize it
client.init().then((status) => {
  console.log("GrowthBook initialized", status);
});
ログイン後にコピー

リクエストごとにユーザースコープのインスタンスを作成するミドルウェアをindex.jsに追加しましょう。これをルート ハンドラーの上に必ず配置してください:

app.use((req, res, next) => {
  // Attributes about the current user/request
  const userContext = {
    attributes: {
      // In a real app this would come from a cookie or session
      // We would also add more attributes like country, etc
      id: "123",
    }
  }

  // Make this available to all subsequent route handlers
  req.growthbook = client.createScopedInstance(userContext);
  next();
});
ログイン後にコピー

ノード プロセスを再起動し、コンソールに「GrowthBook が初期化されました」というメッセージが表示され、ステータスが成功であることを確認します。 .env ファイルを使用しているため、Node.js にそれをロードするようにコマンドを変更する必要があります。

node --env-file=.env index.js
ログイン後にコピー

4. GrowthBook で機能を作成する

GrowthBook アプリケーションに戻って、新しい機能を作成できます。このチュートリアルでは、スペイン語でメッセージを表示するかどうかを決定する単純なオン/オフ機能フラグを作成します。

Feature Flags with Express.js and GrowthBook

私たちが選択したキー (スペイン語の挨拶) は、GrowthBook SDK を使用するときに参照するものです。

index.js でルートを編集して、このフラグを使用できるようになりました:

app.get('/', (req, res) => {
  let message = "Hello World!";

  if (req.growthbook.isOn("spanish-greeting")) {
    message = "Hola Mundo!";
  }

  res.send(message);
})
ログイン後にコピー

ここで、Node プロセスを再起動してブラウザでページを更新すると、元の「Hello World!」が表示されます。この機能を作成したときに、デフォルトでオフに設定したためです。

5. 特定のユーザーをターゲットにする

これで、機能にルールを追加して、特定のユーザーに対して有効にすることができます。

追加した userContext では、「123」という ID をハードコーディングしました。この ID を使用して、GrowthBook でこのユーザーの機能を有効にするルールを作成できるようになりました。

機能ページで、[ルールの追加] ボタンをクリックし、ルール タイプとして [値の強制] を選択します。次に、属性によるターゲティングを追加し、ルールを保存します。次のようになります:

Feature Flags with Express.js and GrowthBook

ルールは GrowthBook のドラフト状態から始まります。公開するには、下書きを公開する必要があります。

公開後、ノード プロセスをもう一度再起動し、ページを更新します。スペイン語のメッセージが表示されるはずです。クエ ブエノ!

userContext の ID を 456 などの別の ID に変更してみて、Node を再起動すると、応答が英語に戻ります。

結論と次のステップ

このチュートリアルでは、Express アプリで単純な機能フラグを使用し、個々のユーザーをターゲットにする方法を学びました。しかし、これは GrowthBook でできることのほんの表面にすぎません。

次のステップは次のとおりです:

  • より高度なターゲティングを使用する
  • A/B テストを実行する

ストリーミング更新、永続的キャッシュなど、GrowthBook SDK で利用可能なすべてのオプションの詳細については、Node.js ドキュメント全体をご覧ください。

以上がExpress.js と GrowthBook を使用した機能フラグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート