如何在連續集成中使用功能標誌

關於將真正的連續集成（CI）納入生產系統的好處，已經寫了很多東西。本教程將展示一個實現CI的簡單工作流程。我們將使用功能標誌和遠程配置，以避免GIT中需要特徵分支，以及任何形式的測試或分期環境。我們將用來證明這種方法的兩個主要工具是Netlify和Bullet Train。

鑰匙要點

>功能標誌使開發人員能夠管理功能部署而無需更改主代碼庫，從而可以在生產環境中進行更安全的測試和更快的問題分辨率。

>
• >連續集成（CI）從功能標誌中受益，因為它們有助於立即發布和測試代碼更改，增強開發速度和發行檢測。
>可以使用Bullet Train之類的工具來實現項目中的功能標誌，該工具可以輕鬆地設置和管理標誌以動態控制功能可用性。
• >
遠程配置，一個功能標誌的變體，允許遠程調整應用程序中的特定變量或功能，而無需直接代碼修改。
• >
>功能標誌通過允許更靈活的功能測試和部署策略在CI中提供了顯著優勢，但他們需要仔細的管理以避免增加代碼複雜性和潛在的配置錯誤。
我們的意思是CI和功能標誌
連續集成是一種開發人員能夠不斷發布其代碼的開發方法。開發人員在完成開發時推動他們的新功能，此時他們會自動測試並立即將其釋放到實時環境中。

>“功能標誌”提供了一種從遙控面板中門控的這些新功能的方法，使您可以隨意地關閉它們，而無需對代碼進行任何更改。這使您可以開發一項功能，並將其釋放到生產中，而無需從用戶的角度更改任何內容。

為什麼CI如此強大

>以較小的塊整合代碼，並以更頻繁的方式集成代碼，可以使開發團隊更快地提出問題，並儘快為用戶獲取新功能。 CI還消除了對工程師團隊需要保持清醒的任何大型版本的需求，直到夜晚的凌晨為止，以最大程度地減少對用戶的干擾。

特徵標誌如何輔助連續集成

發行新功能時，功能標誌在發布新功能時提供了額外的信心層。通過將新功能包裝在功能標誌中，開發人員和產品團隊可以根據需要快速啟用或禁用其功能。假設我們將新功能引入生產中，但我們可以立即看到新代碼中有一個錯誤，因為在測試中，生產環境中特定的某些特定內容（讓我們面對現實，它都發生在所有人身上……一次）。

>以前，這意味著（可能）冗長且（絕對）的（絕對）痛苦的回滾過程，並在修復該錯誤的另一天，將發行版重新安排為另一個不敬虔的小時。取而代之的是，使用開關的切換，該功能可以全部或一部分用戶關閉，並且疼痛消失了。一旦確定錯誤並修復了錯誤，就可以部署補丁發布，並且可以重新啟用該功能。

概述我們的示例項目

>

為了演示集成功能標誌和遠程配置，我們將在tic-tac-toe遊戲的事實上的初始代碼庫中基於我們的初始代碼庫。這是學習React的基礎知識的絕佳教程，因此，如果您還沒有，請務必檢查一下。

>如果您不知道反應或javascript，請不要擔心。我們將要解決的概念都是關於過程和工具的，而不是關於代碼的概念。

>不是從一開始就重複該教程，而是從一個基本的TIC-TAC-TOE遊戲開始並運行。

在這一點上，我們將使用功能標誌和遠程配置來連續配置，推送和部署新功能。要將這個概念帶到一個極端，我們將不斷推動掌握。不會使用其他分支。我們將介紹一個錯誤（當然是故意的！），並將修復程序推向掌握，以演示如何處理這種情況不需要完整的回滾或其他分支。

>

如果您想在本教程期間遵循編寫代碼，則可以在此處分配存儲庫。

>

實現CI

>自動化連續集成的最常見方法是在將更改更改為GIT存儲庫時具有構建過程觸發。不同的構建工具以不同的方式實現這一目標。

>我們將使用Netlify將其用於我們的項目。 Netlify允許您連接GIT存儲庫，並在每次推到分支機構時自動部署構建。

>要使用Netlify，只需註冊一個免費帳戶，然後在儀表板右上角選擇“從GIT中的新站點”選項。連接GitHub帳戶（或其他情況下，如果您想使用Bitbucket或Gitlab），則應向下面顯示的選項介紹。

在下一步中，配置NetLify如下運行應用程序。

>

瀏覽該URL應該以所有榮耀顯示您的TIC TAC TOE遊戲。

>為我們的項目設置功能標誌

>我們將使用功能標誌來控制TIC-TAC-TOE遊戲中獲勝者的聲明。為了創建和管理我們的功能標誌，我們將使用Bullet Train作為目前免費的火車，但是還有許多其他功能標誌產品。我們會讓您選擇您認為正確的那個。

繼續與我們繼續前進，繼續在子彈列車上創建一個免費帳戶。單擊“創建項目”按鈕並創建您的項目。我們命名了我們的FF教程。

接下來，我們需要創建一個新功能來宣布獲勝者。 單擊下一個屏幕底部的“創建您的第一個功能”按鈕，以列出以下表單並添加詳細信息。

請注意，我們一直將功能禁用。

> 請注意該功能下方可用的兩個代碼段，這將在下一步中為我們提供幫助。

實現功能標誌

首先，讓我們在我們的開發環境中運行該項目。從命令行導航到項目文件夾，然後運行命令NPM i以安裝必要的依賴項。

下一個運行npm運行開發人員，然後前往http：// localhost：8080在您的瀏覽器中。您應該看到與Netlify URL上看到的相同的TIC-TAC-TOE遊戲。

>現在，我們將在現有代碼中實現我們的新功能標誌。讓我們從為JavaScript安裝子彈列車客戶端首先，打開另一個命令行並在項目目錄中運行以下內容：

>

npm i子彈 - 訓練 - 鏈接-Save

>

>在您的首選編輯器中打開項目，並編輯./web/app.js。

找到計算溫納（正方形）函數。此功能根據是否可以找到相同形狀的行確定是否有贏家。我們將根據我們的功能標誌的值來使此函數返回null null，以便我們可以測試填充板而不聲明獲勝者。

在app.js的最高頂部，添加以下行：>

現在，讓我們初始化我們之前安裝的子彈列車客戶端。從子彈列車接口中的“功能”頁面中復制所有代碼示例2，然後將其粘貼在您剛剛添加的行之下。

>

>代碼段中的環境ID將是與子彈列車項目中的開發環境相關的正確環境ID。如果需要，可以通過瀏覽到“環境設置”頁面進行檢查。

>現在，我們需要在bullettrain.init（）函數中編輯onChange（）函數，以適應我們的需求。用一行替換其中的所有代碼：

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

您現在應該將其放在app.js

的頂部

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

>向下滾動到計算Winner（正方形）函數，在頂部，在線路的聲明上方，讓我們添加行：：>

<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和操作系統填充整個板。

>

>返回子彈列車管理員並使用右側的開關切換功能。

>刷新您的瀏覽器，遊戲再次變得可贏。在此處查看此部分的末尾的代碼。 >

提交並按下您的代碼（是的，全部在主上），並且NetLify將自動部署您的代碼。再次瀏覽您分配的NetLify URL，然後切換功能標誌，以查看其在生產環境中工作。甜！

在錯誤上工作

>我們現在將有目的地將錯誤引入TIC-TAC-TOE遊戲，並顯示如何使用功能標誌來刪除引起問題的功能。

我們要添加的功能是在遊戲開始時首先選擇誰。為之

>首先，讓我們設置我們的功能標誌以包裝新功能。在您的子彈列車項目中，創建一個名為“ select-who-goes-Fir”的新功能，如下所示。讓我們從一開始就禁用它。

現在，讓我們添加我們的新功能。在Render（）函數中，如果遊戲尚未啟動，我們將渲染按鈕而不是狀態。在Render（）函數返回的頂部，替換行：

…帶有以下代碼：

>現在，我們想編寫代碼以使用我們創建的功能標誌來控制我們的新功能。和以前一樣，這需要進入bullettrain.init（{...}）函數。

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

首先，讓我們將生命週期函數componentDidmount（）添加到板組件中，然後將整個BulletTrain.Init（{...}）函數移動到其中的內部，以便我們可以在標誌之後更新組件的狀態檢索：

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

如果我們在組件之外留下Bullettrain.Init（{...}），我們將無法調用this.setState（），並且使組件從更改的旗幟重新呈現。

>

現在，讓我們添加代碼以控制我們的新功能。我們希望該應用程序像禁用標誌之前那樣添加此功能之前的應用程序。為此，如果禁用標誌，讓我們將所選的狀態值設置為true。在bullettrain.init（{...}）方法中添加以下行，就在DeclareWinner行下方。

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

>讓我們繼續前進（再次，直接進入主人）。建造後，前往您的Netlify URL。您應該看到什麼都沒有改變 - 這是因為該功能在我們的子彈列車項目中仍然是禁用的。

>前往子彈列車並啟用該功能。

輝煌！現在我們可以看到它有效，但是哦，有一個錯誤！可以在不選擇誰之前開始遊戲。如果您這樣玩遊戲，您會發現狀態永遠不會設置為顯示獲勝者。那是不對的！

>返回子彈列車並禁用該功能，直到我們可以解決問題為止。這是子彈列車的其他功能（例如環境和用戶）派上用場的地方。在本教程中，我們不會參與其中的任何一個，但是請查看文檔以獲取有關使用多個環境或控制功能的更多信息。

>

返回我們的錯誤：我們還需要將另外一行添加到Handleclick（）的頂部，以防止玩家啟動，直到選擇了第一個玩家為止。將以下內容添加在Handleclick（）函數的頂部。

<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>    }
});

在子彈列車中再次重新打開功能，並在本地環境中測試該功能，您應該看到我們現在可以防止遊戲啟動而不選擇誰去。出色的！再次將其提交主人，然後將其直接推到部署。

>前往您的NetLify URL，您應該看到固定並正常工作的新功能。

>您可以在此處查看本節末尾的最終代碼。

>

遠程配置

>現在，我們將在功能標誌（稱為遠程配置）上查看一些略有變化。遠程配置允許您控制功能是否打開還是關閉，還可以控制不僅僅是一個不需要更改代碼而遠程更改給定值。例如，如果您想配置樣式的某些方面。 在我們的教程中，我們將使用它來更改遊戲中每個玩家使用的形狀。讓我們創建兩個遠程配置值，以便在板上使用哪些形狀。在您的子彈列車項目中，單擊“創建功能”按鈕，但是這次，選擇“遠程配置”選項卡而不是“功能標誌”。按照以下內容填寫數據。

都完成了！現在返回代碼。在我們的Bullet Train客戶端的OnChange（）函數中，我們需要檢索這些值並將其設置為組件的狀態。讓我們更改我們的this.setState（）呼叫：

>

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

>我們現在有兩個形狀，可以用狀態值替換“ x”和“ o”的所有靜態用途。每個形狀應在handleclick（）中每個形狀1，呈渲染（）中的每個形狀有2個（一個是在返回的呼叫中）。這是handleclick（）中的參考的更新代碼：

>

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

請注意，對於redender（）返回調用中的實例，您需要將JavaScript包裹在這樣的捲曲括號中：

<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>    }
});

>將其提交為主，然後推到GIT存儲庫，以查看NetLify URL上的更改。如果您做得正確，遊戲應該像以前一樣使用“ X”和“ O”形狀。繼續，將管理員中的形狀更改為不同的字母，然後刷新頁面。如果一切順利，您現在將使用不同的形狀。

>您可以通過遠程配置來實現更多的目標，例如控制整個遊戲的樣式或說板的尺寸。我們添加了更多遠程配置值，包括形狀顏色和方形大小。您可以在此處查看遊戲的完成代碼。

其他要考慮的事情

>

>不應將功能標誌視為金色子彈，但是它們確實帶有某些警告。

例如，如果您使用的是為您（例如Django或Rails）處理數據庫模式的框架，則在模型中實現功能標誌時需要小心。在模型中使用功能標誌可能會導致DB模式不匹配，這可能會使應用程序的一部分減少。

同樣，如果您正在與對其消費者俱有某些要求的第三方API進行互動，則使用功能標誌來控制此方面的方面可能會導致應用程序中的意外錯誤。另外，反之亦然，如果您的應用程序為其他人提供了API，請使用功能標誌來控制API的數據模型，因為它可能會給這些消費者帶來問題。

>最後，我們在上面的教程中使用了子彈列車，因為它目前可以免費使用和開源。還有許多其他產品在做同樣的事情或略有不同的變體 - 您應該檢查所有這些產品，以確定最適合您的東西。例如，啟動黑暗和飛艇總部。

>在連續集成中使用特徵標誌的常見問題（常見問題解答）

>在連續集成中使用功能標誌有什麼好處？

也稱為功能切換，提供了一種在運行時隱藏，啟用或禁用某些功能的方法。在連續整合中，它們提供了一些好處。首先，它們允許開發人員在不影響主代碼庫的情況下從事功能。這意味著，即使該功能未完全開發或測試，總體應用程序仍然保持穩定。其次，它們可以輕鬆測試生產環境中的功能。這對於A/B測試或金絲雀釋放尤其有用。最後，它們提供了一種方法，可以在問題中快速禁用功能，而不必退縮整個部署。

>

>如何在我的React應用程序中實現功能標誌？ React應用程序中的功能標誌涉及幾個步驟。首先，您需要定義功能標誌。這可以在配置文件中完成，也可以從遠程服務器獲取。其次，您需要創建一個上下文，以向組件提供這些功能標誌。這可以使用React的上下文API完成。最後，您需要在組件中使用這些功能標誌來有條件地渲染應用程序的不同部分。

我可以使用功能標誌來進行A/B測試嗎？

是的，是的，功能標誌是一個A/B測試的絕佳工具。它們使您可以將功能的不同功能或版本公開給用戶的不同段。這對於測試新功能對用戶行為和參與度的影響特別有用。

>

>使用功能標誌的潛在風險是什麼？我如何減輕它們？許多好處，它們也帶來潛在的風險。主要風險之一是代碼複雜性。擁有許多功能標誌可以使代碼更難理解和維護。可以通過將主動功能標誌的數量保持在最低限度，並在不再需要時將其刪除，從而減輕這種情況。另一個風險是配置錯誤。可以通過使用自動測試和監視來緩解這種情況，以確保功能標誌按預期工作。

>

>如何在大規模應用程序中管理功能標誌？大規模應用可能具有挑戰性。一種方法是使用功能標誌管理系統。這些系統提供了定義和管理功能標誌的中心位置，並且通常具有用戶細分，A/B測試和分析等功能。另一種方法是將功能標誌用作服務提供商。這些提供商為功能標誌管理提供了託管解決方案，這對於大規模應用程序特別有用。

>可以在微服務體系結構中使用特徵標誌嗎？它們對於協調跨越多個服務的功能的發布特別有用。但是，必須注意確保在所有服務中始終應用功能標誌。

>

>如何將功能標誌用於金絲雀版本？

>如何測試功能標誌？

>測試功能標誌可以通過幾種方式完成。一種方法是使用自動測試來確保每個功能標誌都按預期工作。這可能涉及為功能標誌的每個可能狀態創建測試。另一種方法是使用監視和分析來跟踪功能標誌對您應用程序行為和性能的影響。

>可以將功能標誌用於逐漸推出嗎？

是的，是的，功能標誌很棒逐漸推出的工具。它們使您可以慢慢增加可以訪問新功能或版本的用戶數量。這對於最大程度地減少潛在問題的影響並監視變更對用戶行為和參與的影響特別有用。

以上是如何在連續集成中使用功能標誌的詳細內容。更多資訊請關注PHP中文網其他相關文章！