継続的な統合で機能フラグを使用する方法

生産システムへの真の継続的統合（CI）を達成することの利点について多くのことが書かれています。このチュートリアルでは、CIを達成する簡単なワークフローを示します。機能フラグとリモート構成を使用して、GITの機能ブランチの必要性、およびあらゆる種類のテストまたはステージング環境を回避します。このアプローチを実証するために使用する2つの主要なツールは、NetlifyとBullet Trainです。

キーテイクアウト

機能フラグにより​​、開発者はメインコードベースを変更せずに機能の展開を管理でき、より安全なテストと生産環境での迅速な問題解決を可能にします。
• 継続的統合（CI）は、コードの変更の即時リリースとテストを促進し、開発速度と問題の検出を促進するため、機能フラグから利益を得ています。
プロジェクトでの機能フラグの実装は、Bullet Trainなどのツールを使用して実現できます。これは、機能の可用性を動的に制御するためのフラグの簡単なセットアップと管理を提供します。 フィーチャフラグのバリアントであるリモート構成により、直接コードの変更を必要とせずに、アプリケーション内の特定の変数または機能をリモートで調整できます。
• フィーチャフラグは、より柔軟な機能テストと展開戦略を許可することにより、CIに大きな利点を提供しますが、コードの複雑さと潜在的な構成エラーを回避するために慎重な管理が必要です。
• CIと機能フラグが意味する
• 継続的な統合は、開発者がコードを常にリリースできる開発方法です。開発者は開発を終了するときに新しい機能をプッシュします。その時点で、自動的にテストされ、すぐにライブ環境にリリースされます。
機能フラグは、リモートコントロールパネルからこれらの新機能をゲートする方法を提供し、コードを変更せずに自由に電源を切ることができます。これにより、機能を開発し、ユーザーの観点から実際に何かを変更することなく、それを生産にリリースすることができます。
なぜCIが非常に強力なのか

コードをより小さなチャンクで統合し、より頻繁に統合することで、開発チームが問題をより迅速に取り上げ、できるだけ早くユーザーに新機能を取得することができます。また、CIは、ユーザーへの混乱を最小限に抑えるために、エンジニアチームが夜の早い時間まで起きている必要がある大規模なリリースの必要性を削除します。

機能フラグが継続的な統合をどのように支援するか

機能フラグは、新機能をリリースするときに追加の自信の層を提供します。機能フラグに新機能をラッピングすることにより、開発者と製品チームは、必要に応じて機能を迅速に有効または無効にすることができます。生産に新機能を導入するとしましょうが、テストでは明らかではなかった生産環境で特定の何かのために、新しいコードにバグがあることがすぐにわかります（それに直面してみましょう、それは皆に起こりました...一度）。

以前は、これは（おそらく）長く、（間違いなく）痛みを伴うロールバック手順を意味し、バグが修正された別の日に別の不敬な時間のリリースの再スケジュールを意味していました。代わりに、スイッチのトグルを使用すると、ユーザーのすべてまたはサブセットに対して機能をオフにすることができ、痛みはなくなります。バグが識別されて固定されたら、パッチリリースを展開し、機能を再度有効にすることができます。 サンプルプロジェクトのアウトライン

機能フラグとリモート構成の統合を実証するには、TIC-TAC-Toeゲームの事実上のReact JSチュートリアルに基づいて初期のコードベースを作成します。これは、Reactの基本を学ぶための優れたチュートリアルですので、まだ持っていない場合は必ずチェックしてください。

ReactやJavaScriptがよくわからなくても心配しないでください。私たちが進める概念は、コードに関するものではなく、プロセスとツールに関するものです。

最初からチュートリアルを繰り返すのではなく、基本的なTIC-TAC-Toeゲームを稼働させている時点から始めます。

この時点で、機能フラグとリモート構成を使用して、新しい機能を継続的に構成、プッシュ、展開します。この概念を極端に進めるために、私たちは継続的にマスターにプッシュします。他のブランチは使用されません。バグ（もちろん意図的に！）を導入し、修正をマスターに押し込み、このシナリオを扱うことで完全なロールバックや追加の分岐が必要でないことを示します。 このチュートリアル中にコードを作成してフォローしたい場合は、こちらからリポジトリをフォークできます。

ci

の達成

継続的な統合を自動化する最も一般的な方法は、GITリポジトリに変更をプッシュするときにビルドプロセストリガーをトリガーすることです。さまざまなビルドツールは、さまざまな方法でこれを実現します

プロジェクトにはnetlifyを使用します。 Netlifyを使用すると、GITリポジトリを接続し、ブランチにプッシュするたびにビルドを自動的に展開できます。

Netlifyを使用するには、無料アカウントにサインアップして、ダッシュボードの右上にある「GITからの新しいサイト」オプションを選択します。 GitHubアカウントを接続したら（または、BitbucketまたはGitLabを使用する場合はそうであれば）、以下に示すオプションを提示する必要があります。

次のステップで、次のようにアプリケーションを実行するようにNetlifyを構成します。

netlifyが先に進み、アプリケーションを構築します。数分かかりますが、それが完了したら、次のようなものが表示されるはずです。

そのURLへのブラウジングは、その栄光の中であなたのTIC TAC TOEゲームを表示するはずです。

プロジェクトの機能フラグの設定

機能フラグを使用して、TIC-TAC-Toeゲームの勝者の宣言を制御します。機能フラグを作成および管理するには、Bullet Trainは現在無料で使用しますが、他にも多くの機能フラグ製品があります。あなたが正しいと思うものを選ばせます。

私たちと一緒に続けるには、弾丸列車で無料のアカウントを作成します。 [プロジェクトの作成]ボタンをクリックして、プロジェクトを作成します。 FFチュートリアルという名前を付けました。

次に、勝者を宣言するための新しい機能を作成する必要があります。 次の画面の下部にある[最初の機能の作成]ボタンをクリックして、次のフォームを表示し、詳細を追加します。

そもそも機能を無効にしていることに注意してください。

機能の下で利用可能な2つのコードスニペットに注意してください。これは、次のステップで役立ちます。

機能フラグを実装します

まず、このプロジェクトを開発環境で実行してみましょう。コマンドラインから、プロジェクトフォルダーに移動し、コマンドnpm iを実行して必要な依存関係をインストールします。

次のnpm run devを実行し、ブラウザでhttp：// localhost：8080に移動します。 Netlify URLで見たのと同じTIC-TAC-TOEゲームが表示されるはずです。

既存のコードに新機能フラグを実装する予定です。 JavaScript用のBullet Trainクライアントをインストールすることから始めましょう。別のコマンドラインを開き、プロジェクトディレクトリで以下を実行してください。

npm i bullet-train-client - save

希望のエディターでプロジェクトを開き、編集./web/app.js。

calculatewinner（正方形）関数を見つけます。この関数は、同じ形状の線を見つけることができるかどうかに基づいて、勝者がいたかどうかを決定します。フィーチャフラグの値に基づいてこの関数返品nullを使用して、勝者を宣言せずにボードを埋めることができるようにします。

app.jsの最上部で、次の行を追加します。

さあ、以前にインストールした弾丸列車のクライアントを初期化しましょう。 Bullet Trainインターフェイスの機能ページからすべてのコード例2をコピーし、追加したばかりの行のすぐ下に貼り付けます。

コードスニペットの環境IDは、弾丸列車プロジェクトの開発環境に関連付けられた正しい環境IDになります。必要に応じて、「環境設定」ページを参照して、これを確認できます。

bulettrain.init（）関数でonchange（）関数を編集する必要があります。そこにあるすべてのコードを1つの行に置き換えます：

<span>var declareWinner = true;
</span>

これをapp.js

の上部に置く必要があります。

declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>

calculatewinner（正方形）関数まで下にスクロールして、上部にある行の宣言のすぐ上で、線を追加しましょう。

<span>var declareWinner = true;
</span>import bulletTrain from "bullet-train-client"; //Add this line if you're using bulletTrain via npm

bulletTrain.init({
    environmentID:"",
    onChange: (oldFlags,params)=>{ //Occurs whenever flags are changed
        declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>    }
});

そしてそれだけです！私たちの機能フラグは、ゲームのすべてのレンダリングで勝者が計算されるかどうかを決定します。ブラウザを更新してゲームを再生します。あなたはもはや勝つことができなくなり、代わりにボード全体がXSとOSで満たされることができます。

右側のスイッチを使用して、弾丸列車の管理者に戻り、機能を切り替えます。

ブラウザを更新すると、ゲームが再び勝ちます。こちらのこのパートの終了については、コードをご覧ください。

コードをコミットしてプッシュし（はい、すべてマスターに）、Netlifyはコードを自動的に展開します。割り当てられたNetlify URLをもう一度閲覧し、機能フラグを切り替えて、生産環境で機能することを確認します。甘い！

バグ

の作業

TIC-TAC-Toeゲームにバグを意図的に紹介し、問題を使用して問題を引き起こしている機能をドロップする方法を示します。

追加する機能は、ゲームの開始時に誰が最初に行くかを選択することです。そのため、ゲームの開始時にのみ表示されるボタンをいくつか追加し、ボードのクリックが形状を追加できないようにします。

まず、新しい機能をラップするように機能フラグを設定しましょう。 Bullet Train Projectでは、次のようにSelect-Who-Goes-Firstという新しい機能を作成します。そもそも無効にしておきましょう。

さあ、新機能を追加しましょう。 render（）関数では、ゲームがまだ開始されていない場合は、ステータスの代わりにボタンをレンダリングします。 render（）関数のreturnの上部で、行を置き換えます：

…次のコードを使用してください。

<span>if (!declareWinner) return null;
</span>

ここで、作成した機能フラグを使用して、新しい機能を制御するためのコードを書きたいと思います。前と同様に、これはbulettrain.init（{...}）関数に移動する必要があります。

最初に、ライフサイクル関数componentdidmount（）をボードコンポーネントに追加してから、その内側にbulettrain.init.init（{...}）関数全体を移動して、フラグの後にコンポーネントの状態を更新できるようにしましょう取得：

<span><div className="status">{status}</div>
</span>

<span>var declareWinner = true;
</span>

bulettrain.init（{...}）をコンポーネントの外側に置いた場合、これを呼び出すことはできません。

ここで、コードを追加して新しい機能を制御しましょう。フラグが無効になっている場合は、この機能を追加する前に、アプリケーションを動作させたいと考えています。それを行うには、フラグが無効になっている場合、選択された状態値をtrueに設定しましょう。 bulettrain.init（{...}）メソッドに次の行を追加します。

declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>

先に進んで、それを押してみましょう（もう一度、まっすぐにマスターに）。構築されたら、Netlify URLに向かいます。何も変わっていないことがわかります。これは、機能がBullet Train Projectでまだ無効になっているためです。

弾丸列車に向かい、機能を有効にします。

素晴らしい！今、私たちはそれが機能するのを見ることができますが、ああ、バグがあります！誰が最初に行くかを選択せず​​にゲームを開始することが可能です。このようにゲームをプレイすると、ステータスが勝者を表示するように設定されていないことがわかります。そうではありません！

Bullet Trainに戻り、何が間違っているかを解決できるまで機能を無効にします。これは、環境やユーザーなどのBullet Trainの追加機能が役立つ場所です。このチュートリアルではこれらのどちらにも入りませんが、複数の環境を使用したり、ユーザーごとに機能を制御したりする詳細については、ドキュメントをご覧ください。 バグに戻る：最初のプレーヤーが選択されるまでプレイヤーが開始しないように、HandleClick（）の最上部に追加する必要があるもう1つのラインがあります。 HandleClick（）関数の上部に次のものを追加します。

弾丸列車で再び機能を元に戻し、地元の環境でそれをテストすると、最初に誰が行くかを選択せず​​にゲームを開始するのを防ぐことができます。素晴らしい！それをもう一度マスターにコミットして、それをまっすぐプッシュして展開します。

Netlify URLに向かうと、新しい機能が修正され、適切に動作していることがわかります。

<span>var declareWinner = true;
</span>import bulletTrain from "bullet-train-client"; //Add this line if you're using bulletTrain via npm

bulletTrain.init({
    environmentID:"",
    onChange: (oldFlags,params)=>{ //Occurs whenever flags are changed
        declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>    }
});

このセクションの最後に最終コードを見ることができます。

remote config

remote configと呼ばれる機能フラグのわずかなバリエーションを見てみましょう。リモート構成を使用すると、機能がオンまたはオフであるかどうかだけでなく、コードを変更せずに特定の値をリモートで変更できます。これは、さまざまな場所で便利になります。たとえば、スタイリングの一部を構成できるようにしたい場合。

チュートリアルでは、これを使用して、ゲーム内の各プレーヤーが使用する形状を変更します。ボードで使用する形状の2つのリモート構成値を作成しましょう。 Bullet Train Projectでは、[機能の作成]ボタンをクリックしますが、今回は「機能フラグ」の代わりに[リモート構成]タブを選択します。以下のようにデータを入力します。

すべて完了！次に、コードに戻ります。 Bullet TrainのクライアントのOnchange（）関数では、これらの値を取得してコンポーネントの状態に設定する必要があります。 this.setState（）を変更しましょう

<span>var declareWinner = true;
</span>

2つの形状があり、「x」と「o」のapp.js全体ですべての静的使用を代わりに状態値に置き換えることができます。それぞれに3つのインスタンスが必要です：handleclick（）に1枚あたり1つのインスタンスとrender（）には2つの形状ごとに2つあります（1つは返される呼び出し中です）。これは、handleclick（）の参照の更新されたコードです：

declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>

render（）の返品コールのインスタンスについては、JavaScriptをこのような巻き毛装具で包む必要があることに注意してください。

これをマスターにコミットし、Gitリポジトリにプッシュして、Netlify URLの変更を確認します。正しく行った場合、ゲームは「X」と「O」の形で以前のように再生されるはずです。先に進み、管理者の形を別の文字に変更し、ページを更新します。すべてが順調であれば、あなたは今や異なる形で遊んでいるでしょう。

ゲーム全体のスタイリングを制御したり、ボードの寸法を言うなど、リモート構成で達成できることはもっとたくさんあります。形状の色や平方サイズなど、さらにリモート構成値を追加しました。ここでゲームの完成したコードを見ることができます。

<span>var declareWinner = true;
</span>import bulletTrain from "bullet-train-client"; //Add this line if you're using bulletTrain via npm

bulletTrain.init({
    environmentID:"",
    onChange: (oldFlags,params)=>{ //Occurs whenever flags are changed
        declareWinner <span>= bulletTrain.hasFeature("declare-winner");
</span>    }
});

について考える他のこと ただし、特徴フラグは黄金の弾丸と見なされるべきではなく、特定の注意事項が付いています。

たとえば、

DjangoやRailsなどのデータベーススキーマを処理するフレームワークを使用している場合は、モデルに機能フラグを実装するときは注意する必要があります。モデルに機能フラグを使用すると、DBスキーマの不一致が発生する可能性があり、アプリケーションの一部がダウンする可能性があります。

同様に、消費者に特定の要件を持つサードパーティAPIと対話している場合、機能フラグを使用してこの側面を制御すると、アプリケーションに予期しないエラーが発生する可能性があります。また、その逆も同様です。アプリケーションが他の人が消費するAPIを提供する場合、APIのデータモデルを制御するための機能フラグを使用して、それらの消費者の問題を引き起こす可能性があるため、アドバイスはありません。

最後に、現時点では自由に使用できるため、上記のチュートリアルで弾丸列車を使用しました。同じことをしている、またはわずかに異なるバリアントを使用して、他にも多くの製品があります。これらすべてをチェックして、自分に最適なものを決定する必要があります。たとえば、暗く発射し、飛行船hq。

継続的な統合で機能フラグを使用することについてのよくある質問（FAQ）

継続的な統合で機能フラグを使用することの利点は何ですか？

フィーチャトグルとも呼ばれる機能フラグは、ランタイム中に特定の機能を非表示、有効化、または無効にする方法を提供します。継続的な統合では、いくつかの利点があります。まず、開発者はメインコードベースに影響を与えることなく機能に取り組むことができます。これは、機能が完全に開発またはテストされていなくても、全体的なアプリケーションが安定したままであることを意味します。第二に、生産環境で機能を簡単にテストできるようになります。これは、A/Bテストやカナリアリリースに特に役立ちます。最後に、展開全体をロールバックすることなく、問題の場合に機能をすばやく無効にする方法を提供します。 Reactアプリケーションの機能フラグには、いくつかのステップが含まれます。まず、機能フラグを定義する必要があります。これは、構成ファイルで実行するか、リモートサーバーから取得できます。第二に、これらの機能フラグをコンポーネントに提供するコンテキストを作成する必要があります。これは、ReactのコンテキストAPIを使用して実行できます。最後に、コンポーネント内のこれらの機能フラグを使用して、アプリケーションのさまざまな部分を条件付きにレンダリングする必要があります。 A/Bテストに最適なツール。機能のさまざまな機能またはバージョンをユーザーのさまざまなセグメントに公開することができます。これは、ユーザーの動作とエンゲージメントに対する新機能の影響をテストするのに特に役立ちます。

機能フラグを使用する潜在的なリスクは何ですか？多くの利点も、潜在的なリスクがあります。主なリスクの1つは、コードの複雑さです。多くの機能フラグを持つことで、コードを理解して維持するのが難しくなります。これは、アクティブな機能フラグの数を最小限に抑え、不要になったら削除することで緩和できます。別のリスクは、構成エラーのリスクです。これは、自動化されたテストと監視を使用して、機能フラグが期待どおりに機能するようにすることで軽減できます。大規模なアプリケーションは困難な場合があります。 1つのアプローチは、機能フラグ管理システムを使用することです。これらのシステムは、機能フラグを定義および管理するための中心的な場所を提供し、多くの場合、ユーザーセグメンテーション、A/Bテスト、分析などの機能を備えています。別のアプローチは、機能フラグをサービスプロバイダーとして使用することです。これらのプロバイダーは、機能フラグ管理のためのホストされたソリューションを提供します。これは、大規模なアプリケーションに特に役立ちます。

機能フラグをマイクロサービスアーキテクチャで使用できますか？

はい、機能フラグはマイクロサービスアーキテクチャで使用できます。複数のサービスにまたがる機能のリリースを調整するのに特に役立ちます。ただし、機能フラグがすべてのサービスに一貫して適用されるように注意する必要があります。

カナリーリリースに機能フラグを使用するにはどうすればよいですか？または、バージョンは、すべての人に展開される前に、ユーザーの小さなサブセットにリリースされます。機能フラグを使用して、新機能またはバージョンにアクセスできる人を制御できます。これにより、変更の影響を監視し、問題が検出された場合に迅速に無効にすることができます。起動。 Dark Launchingは、ユーザーが公開される前にユーザーのサブセットに新機能がリリースされる慣行です。これにより、公開環境で機能をテストし、公式の発売前にフィードバックを収集できます。

機能フラグをテストするにはどうすればよいですか？ 1つのアプローチは、自動化されたテストを使用して、各機能フラグが期待どおりに機能していることを確認することです。これには、機能フラグの可能な各状態のテストを作成することが含まれます。もう1つのアプローチは、監視と分析を使用して、アプリケーションの動作とパフォーマンスに対する機能フラグの影響を追跡することです。

機能フラグを段階的なロールアウトに使用できますか？段階的なロールアウトのためのツール。新しい機能やバージョンにアクセスできるユーザーの数をゆっくりと増やすことができます。これは、潜在的な問題の影響を最小限に抑え、ユーザーの行動とエンゲージメントに対する変更の影響を監視するのに特に役立ちます。

以上が継続的な統合で機能フラグを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。