安全で柔軟なリリースのために Upstash Redis を使用して Next.js に機能フラグを実装する

アップデートはすべてのソフトウェアの一部です。バグを修正し、新しい機能を追加し、一般に、物事をより安全、信頼性、または高速にするために反復する必要があります。

ただし、新機能や変更全般を展開と結び付けることが常に良いアイデアであるとは限りません。定期的な展開スケジュールに従っているにもかかわらず、マーケティング チームが新機能を発表する準備ができていない場合があります。変更がハードコーディングされている場合、マーケティング チームは開発者に変更を有効または無効にすることが必要になる場合があります。

機能フラグまたは機能切り替えは、変更を展開から切り離す方法です。変更を実装しますが、それを if ステートメントの背後に隠します。変数が false である限り、ソフトウェアは変更前のバージョンを使用します。変数が true の場合 、新しいバージョンになります。変数の値がマーケティング チームがアクセスできるデータベースから取得されている場合、コードを変更することなくこれらの変更を切り替えることができます。

Upstash Redis® はそのようなデータベースです。これは、機能フラグを保存するために使用できる単純なキーと値のストアです。非常に高速であるため、アプリケーション内の複数の異なるフラグをチェックしてもレイテンシーが大きく増加することはありません。

このチュートリアルでは、Next.js アプリ用の簡単な機能フラグ メカニズムを構築する方法を説明します。 Vercel にデプロイし、Upstash Redis® をストレージとして使用します。

前提条件

GitHub アカウント、Vercel アカウント、Upstash アカウントが必要です。

NPM を使用しているため、Node.js の最新のインストールも必要です。

Next.js プロジェクトの初期化

最初のステップは、新しい Next.js プロジェクトを作成することです。これを行うには、次のコマンドを使用します。

$ npx create-next-app upstash-next-feature-flags

Upstash Redis® 接続の作成

次に、Next.js アプリを Upstash Redis® データベースに接続する必要があります。このためには、@upstash/redis をインストールする必要があります。 パッケージ化して、その周囲に小さなラッパーを作成します。

$ npm i @upstash/redis

upstash-next-feature-flags/lib/featureFlags.js にファイルを作成します このコードを使用すると:

import { Redis } from "@upstash/redis";
 
const { UPSTASH_TOKEN, UPSTASH_URL } = process.env;
const redis = new Redis({
 token: UPSTASH_TOKEN,
 url: UPSTASH_URL,
});
 
export async function flagIsActive(flagName) {
 const flag = await redis.get(flagName);
 return Boolean(flag);
}

このチュートリアルの後半で設定するために、環境変数から API 資格情報を取得します。 flagIsActive 関数は Redis® にクエリを実行し、戻り値を boolean に変換します。 。フラグを Redis に数値として保存するため、この変換が必要です。

API ルートの作成

2 つの異なる実装を使用して API ルートを作成する必要があります。機能フラグを使用してそれらを切り替えます。

このために、upstash-next-feature-flags/pages/api/sort-numbers.js にファイルを作成します。 .

次のコードが含まれている必要があります:

import { flagIsActive } from "../../lib/featureFlags";
 
export default async function handler(request, response) {
 let sort = bucketSort;
 
 const newSortingAlgorithm = await flagIsActive("newSortingAlgorithm");
 
 if (newSortingAlgorithm) sort = selectionSort;
 
 const { numbers } = request.body;
 const sorted = sort(numbers);
 
 response.status(200).json({
 numbers: sorted,
 newSortingAlgorithm,
 });
}
 
// old sorting algorithm
const bucketSort = (arr, size = 5) => {
 const min = Math.min(...arr);
 const max = Math.max(...arr);
 const buckets = Array.from(
 { length: Math.floor((max - min) / size) + 1 },
 () => [],
 );
 arr.forEach((val) => {
 buckets[Math.floor((val - min) / size)].push(val);
 });
 return buckets.reduce((acc, b) => [...acc, ...b.sort((a, b) => a - b)], []);
};
 
// new sorting algorithm
const selectionSort = (arr) => {
 const a = [...arr];
 for (let i = 0; i < a.length; i++) {
 const min = a
 .slice(i + 1)
 .reduce((acc, val, j) => (val < a[acc] ? j + i + 1 : acc), i);
 if (min !== i) [a[i], a[min]] = [a[min], a[i]];
 }
 return a;
};

この API ルートは、単純な数値ソーターです。これは、ソートされていない数値の配列を受け取り、2 つのソート アルゴリズムのいずれかを使用してそれらをソートします。

これらの並べ替えアルゴリズムは、アプリケーションで「切り替え」たいあらゆる変更を表します。両方をコードに入力し、flagIsActive を介してそれらを切り替えます。 Redis の値を変更することで機能します。

これを flagIsActive と呼びます。 関数を作成し、チェックしたいフラグの名前を付けます。フラグが 1 に設定されている場合 Redis では、この関数は true を返します。;それ以外の場合は、false が返されます。 .

ソート後、API ルートはソートされた配列で応答します。

プロジェクトを GitHub にプッシュする

すべてを実装したら、プロジェクトを GitHub 上のリポジトリにプッシュして、Verce のデプロイメント サービスにアクセスできるようにする必要があります。 GitHub のドキュメントでリポジトリの作成方法が説明されています。

空のリポジトリを作成すると、それを作成したプロジェクトにリンクする方法が自動的に表示されます。

Upstash Redis® データベースの作成

Upstash コンソールで新しいデータベースを作成できます。図 1 は、このチュートリアルの適切な構成を示しています。

図 1 にあるように、1 つのデータベースは無料なので、このチュートリアルには何も支払う必要はありません。

後でデータベース認証情報を収集するために必要になるため、Upstash コンソールを開いたままブラウザ タブを開いたままにしておきます。

GitHub リポジトリと Vercel のリンク

GitHub アカウントを使用して Vercel にログインする場合、数回クリックするだけで GitHub リポジトリを追加できます。図 2 には、Vercel ダッシュボードの左上が表示されます。 「新規追加…」をクリックし、「プロジェクト」を選択します。

「Continue with GitHub」を選択し、前のステップで作成したリポジトリに属するいずれかの「インポート」ボタンを選択します。

最後に、プロジェクト構成ステップが表示され、環境変数を追加する必要があります。構成の残りの部分については、デフォルトをそのまま使用できます。図 4 は、これらの変数を入力する必要がある場所を示しています。

これらは UPSTASH_TOKEN と呼ばれます。 と UPSTASH_URL それらは、以前にデータベースを作成した Upstash コンソールに表示されます。図 5 は、変数に必要な値をコピーするためにどのボタンが必要かを示しています。

大きな「デプロイ」ボタンを押すと、Vercel は GitHub リポジトリのクローンを作成し、そのインフラストラクチャにデプロイします。

Redis を使用した実装間の切り替え

これで、API エンドポイントを呼び出すことができるようになり、Redis で値を設定することで実装を切り替えることができるようになりました。 Upstash コンソールの Redis CLI は、これを実現する最も簡単な方法です。

図 6 は、CLI の場所と、値を設定するために実行する必要があるコマンドを示しています。

新しい並べ替えアルゴリズム 1 を設定します

newSortingAlgorithm を削除する場合 または、0 に設定します。 、フラグを false, に戻します。 API ルートでは古いアルゴリズムが使用されます。

API ルートの使用

最後に欠けているのは、API ルートの実際の使用です。 POST リクエストを介して JSON オブジェクトをルートに送信する必要があります。これを行う簡単な方法は、cURL を使用することです。

次のコマンドは、そのようなオブジェクトを送信します。

 $ curl --header "Content-Type: application/json" \
 --request POST \
 --data '{"numbers":[1, 100, 10, 1000, 100000, 10000]}' \
 API_ROUTE_URL

Vercel で正しい API_ROUTE_URL を見つける必要があります。図 7 のように、Vercel ダッシュボード上のプロジェクトに「ドメイン」カテゴリが表示されるはずです。

応答は、ソートされた numbers を含む JSON オブジェクトである必要があります。 と newSortingAlgorithm この並べ替えにどのアルゴリズムが使用されたかを示すフィールド。

概要

機能フラグは、デプロイメントを機能リリースから切り離す優れた方法です。ハードコーディングされた変更をデータベース内の単純な値の設定に変換することで、チームの柔軟性が高まり、技術者以外の人々にもより多くの権限が与えられます。

Upstash Redis のような高速データベースを使用すると、パフォーマンスをほとんど犠牲にすることなく、アプリケーションの機能フラグ パターンを簡単に実装できます。 Upstash Redis のアクセス時間は 1 秒未満であり、必要に応じて FaaS の近くにデプロイできます。これらはすべてオンデマンド料金で行われるため、使用しないリソースに対して料金を支払う必要はありません。