リミックスアプリケーションで機能フラグを使用する

20235 ワード
tutorial react devops webdev テキストリンク
Remix , サーバーのレンダリングアプリケーションを構築するための反応ベースの完全なスタックフレームワークは、特にオープンソースであったので、最近話題の多くを生成している.リミックスは、サーバー上でレンダリングされるWebアプリケーションを構築するための専用サーバー側レンダリング(SSR)フレームワークです.

機能フラグ基本


基本的に、特徴フラグは、真または偽にリモートで設定できる単純な変数ではありません.これはほとんどの機能スイッチとしてのコードの一部のセクションを切り替えるには、通常の機能や機能は、条件のifステートメントでは、その機能のフラグの値を使用してラップされて使用されます.
ここでは、機能フラグが最も単純な形式でどのように動作するかを示す汎用コードスニペットです.
const theFeatureFlag = true

if (theFeatureFlag === true ) {
     // execute the code here i.e enable this functionality
          }
危険なすべての展開または起動を行うよりもむしろ、機能フラグを使用すると、継続的な統合と連続配信サイクルで使用されるときに、生産環境で非常に有用であることができる展開から、ユーザーのセグメンテーションと簡単にデコードをコード化する機能をゆっくりとロールアウトすることができます.また、これらの外の多くの他のユースケースもあります.

ハッカーニューストレンドフィードを構築する


どのように我々はリミックスアプリケーションで機能フラグを使用することができますを実証するために、我々は人気のハッカーニュースからニュース記事をトレンドプルプルシンプルなリミックスアプリを構築することから開始されますてwebsite 非公式のハッカーニュースを使用するSearch API Algoliaについて
このアイデアはトップ20のトレンドニュースを表示するニュースフィードを作成し、ConfigCatにホストされている機能フラグでこのフィード機能をラップするようにします.フラグがトグルされるたびに、サイトを訪問しているユーザーはトップ20のニュースを示しています.フラグがトグルされたとき、ユーザはこのトレンドのニュースフィードを見ることができません.
始めましょう!

必要条件

  • 基礎知識React and Remix .
  • ローカルインストールNode.js and NPM .
  • 機能フラグを作成するのに使用されるConfigCatアカウント.Register now – それは無料です.

    • 我々の機能フラグのための我々のリミックスアプリの初期化


    ここではサンプルのリミックスアプリのソースコードですGitHub あなたが沿って続くことを望むならば.我々はすぐにリミックスコマンドを使用して作業リミックスデモアプリケーションを紡ぎ始める.
    npx create-remix@latest
    これは、インタラクティブなウェルカム画面を私たちはどこで、我々のデモアプリに含まれている必要があります選択するように指示を提示します.最後に、我々は実行するように求められますnpm install すべての依存関係をインストールするには.

    今、我々は作業デモリミックスアプリを持っている、我々の機能フラグのために我々のハッカーニュースフィードを構築するために進みましょう.我々は、サーバー上で実行されるリミックスルートコンポーネントでローダ関数を作成することによって開始します-これは、アプリケーションがレンダリングされる前に、サーバー上でAPIの呼び出しを行うことができます.
    import styleURL from "~/styles/global.css";
import { useLoaderData } from "remix";

// Runs on the server - for api calls
export const loader = async () => {
  // fetch stories from HN
  const stories = await fetch(
    "https://hn.algolia.com/api/v1/search?tags=front_page"
  );
  const newsFeed = await stories.json();

  // return stories to App component
  return [newsFeed.hits];
};
    我々は、ハッカーのニュースから目的のストーリーにプルし、ニュース記事の配列として返すフェッチ要求を正常に作成しました.次に、実際のHTMLテンプレートを作成して、この戻り配列をループし、ニュースを順序付きリスト項目としてレンダリングします.
    export default function App() {
  // get access to the stories in the loader function created above
  const [newsFeed] = useLoaderData();

  return (
    <html lang='en'>
      <head>
        <meta charSet='UTF-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge' />
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
        <link rel='stylesheet' href={styleURL} />
        <title>Demo Feature Flag</title>
      </head>

      <body>
        <div>
          <h1>Trending Hacker News Feed</h1>

          <ol>
            {newsFeed.map((story) => (
              <li key={story.id}>
                <a href={story.url}>{story.title}</a>
              </li>
            ))}
          </ol>

        </div>
      </body>
    </html>
  );
}
    これで、我々は今、上位20のトレンドニュース記事を以下に示すようにレンダリングする作業ハッカーニュースフィードを持っている必要があります.

    ConfigCatのダッシュボードの機能フラグの設定

  • 新しい機能フラグを作成するにはConfigCat dashboard . ダッシュボードの左上隅に新しい設定ファイルを作成したり、デフォルトの「main」設定を使用します.
  • その後、新しい機能スイッチを作成し、旗をあなたのアプリケーションコードの旗にアクセスするために使用される名前とキー値を与えることができます'追加機能フラグ'オプションを選択します.
  • 最後に、ダッシュボードにアプリケーションを接続するためにSDKキーをコピーします.

    • またtargeting options ユーザーセグメンテーションによってフィーチャーフラグにどのようにサービスを提供するかを設定するには、簡単にするためにデフォルトの設定を使用するだけです.

    機能フラグサービスSDKの初期化


    機能フラグ管理ソリューションSDKに依存します.SDKはあなたのアプリケーションコードにインストールされ、機能フラグ管理サービスとどのような状態フラグがどの状態になっているかを判断し、どのようにサービスを提供するかについて設定規則をチェックします.また、ConfigCatのようないくつかの企業のSDKは、一般的にオープンソースと安全ですが、これはすべての企業と同じではありません.
    ConfigCat機能フラグサービスを使用するには、NPM経由でConfigCat SSRパッケージをアプリケーションにインストールする必要があります.
    npm i configcat-js-ssr
    ここでは、パッケージをルートアプリケーションコンポーネントにインポートし、以前にコピーしたSDKキーでローダ関数で初期化します.これは、我々のConfigCatダッシュボードに我々のリミックスアプリケーションをつなぎます.
    そこで、初期のローダ関数をリファクタにしましょう.
    import styleURL from "~/styles/global.css";
import { useLoaderData } from "remix";
import * as configCat from "configcat-js-ssr";

// Runs on the server - for api calls
export const loader = async () => {

  // Connect to your ConfigCat's dashboard
  const configCatClient = configCat.createClient(
    "fK7ZCApWbkaDu14njPKZQw/vBw-jxALN0eiWNilfwboGA"
  );

  // Check and store status of feature flag
  const newsFeedFlag = await configCatClient.getValueAsync(
    "newsfeedfeatureflag",
    false
  );

  // Fetch stories from Hacker News
  const stories = await fetch(
    "https://hn.algolia.com/api/v1/search?tags=front_page"
  );
  const newsFeed = await stories.json();

  // return stories and status of the feature flag to App component
  return [newsFeed.hits, newsFeedFlag];
};

    フィーチャーフラグによるニュースフィード機能の制御


    ConfigCatダッシュボードの機能フラグの状態にアクセスできるようになりました.機能フラグの状態に応じて、ニュースフィードが見えるかどうかの3項演算子を使用して初期HTMLテンプレートを再設定しましょう.
    export default function App() {
   // Get access to the stories and state of feature flag in the loader function created above
  const [newsFeed, newsFeedFlag] = useLoaderData();

  return (
    <html lang='en'>
      <head>
        <meta charset='UTF-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge' />
        <meta name='viewport' content='width=device-width, initial-scale=1.0' />
        <link rel='stylesheet' href={styleURL} />
        <title>Demo Feature Flag</title>
      </head>

      <body>
        <div>
          <h1>Trending Hacker News Feed</h1>

          {newsFeedFlag ? (
            <ol>
              {newsFeed.map((story) => (
                <li key={story.id}>
                  <a href={story.url}>{story.title}</a>
                </li>
              ))}
            </ol>

          ) : (
            <h2>Ops! News Feed unavailable</h2>
          )}
        </div>
      </body>
    </html>
  );
}
    我々は現在、機能のトグルを使用してConfigCatダッシュボードからのニュースフィード機能を制御することができます.機能フラグがトグルされると、ニュースフィードは無効になり、ユーザーは以下に示すようにアクセスできません.

    しかし、機能が戻ってトグルされたとき、ユーザーはニュースフィードへのアクセスを与えられます.

    上のリミックスサンプルアプリGitHub

    キーテイクアウト


    上記のようにリミックスのアプリケーションで見られるように、機能フラグを簡単にリモートで制御するか、アプリケーションの機能をリリースしやすい.機能フラグ開発者、テスター、およびIT担当者は基本的に特定の機能をオンまたはオフにすることができますし、既存のアプリケーションインフラストラクチャに影響を与えることなく、ユーザーセグメンテーションを介してターゲットのリリースを実行します.
    しかし、それは主要な開発プロセスからそれらをそらすかもしれないので、機能フラグシステムを構築するあなたのチームのコアコンピテンシーではありません.機能フラグ管理サービスの必要性は、したがって、機能フラグとしてあなたの将来のリリースの制御を取るのに役立ちます.
    詳細については、ConfigCatに次のことができますFacebook , および.
    SUSEラーニング(ネットワーク構成)
    LinuxシステムAndroid SDKダウンロードバージョン、Warning:File/root/.android/repositories.cfg coul