Es wurde viel über die Vorteile des Erreichens der echten kontinuierlichen Integration (CI) in Produktionssysteme geschrieben. Dieses Tutorial zeigt einen einfachen Workflow, der CI erreicht. Wir verwenden Feature -Flags und Remote -Konfiguration, um die Notwendigkeit von Feature -Zweigen in GIT sowie jede Art von Test- oder Staging -Umgebungen zu vermeiden. Die beiden wichtigsten Tools, die wir zum Nachweis von diesem Ansatz verwenden, sind Netlify und Bullet Train.
kontinuierliche Integration ist eine Entwicklungsmethode, bei der Entwickler ihren Code ständig freigeben können. Entwickler treiben ihre neuen Funktionen nach Abschluss der Entwicklung vor. An diesem Punkt werden sie automatisch getestet und sofort in eine Live -Umgebung freigegeben.
Feature -Flags bieten eine Möglichkeit, diese neuen Funktionen von einem Fernbedienungspanel aus zu gaten, sodass Sie sie nach Belieben ausschalten können, ohne Änderungen an Ihrem Code vorzunehmen. Auf diese Weise können Sie eine Funktion entwickeln und sie in Produktion geben, ohne etwas aus Sicht eines Benutzers zu ändern.
Das Integrieren von Code in kleinere Stücke und häufiger ermöglicht es Entwicklungsteams, Probleme viel schneller aufzunehmen und den Benutzern so schnell wie möglich neue Funktionen zu erhalten. CI beseitigt auch die Notwendigkeit großer Veröffentlichungen, bei denen ein Team von Ingenieuren bis in die frühen Morgenstunden wach bleiben muss, um die Störungen für ihre Benutzer zu minimieren.
Feature -Flags bieten eine zusätzliche Vertrauensebene bei der Veröffentlichung neuer Funktionen. Durch das Einwickeln neuer Funktionen in ein Feature -Flag können das Entwickler und das Produktteam ihre Funktionen nach Bedarf schnell aktivieren oder deaktivieren. Nehmen wir an, wir stellen ein neues Feature in die Produktion ein, aber wir können sofort sehen, dass der neue Code einen Fehler gibt einmal).
Zuvor hätte dies ein (wahrscheinlich) langwieriges und (definitiv) schmerzhafter Rollback -Verfahren und ein Umplaner der Veröffentlichung für eine weitere gottlose Stunde an einem anderen Tag bedeuten, an dem der Fehler behoben wurde. Stattdessen kann die Funktion mit einem Schalter für alle oder eine Teilmenge von Benutzern ausgeschaltet werden und der Schmerz ist verschwunden. Sobald der Fehler identifiziert und behoben wurde, kann eine Patch-Version bereitgestellt werden und die Funktion kann erneut aktiviert werden.Umriss unseres Beispielprojekts
Machen Sie sich keine Sorgen, wenn Sie React oder JavaScript nicht gut kennen. Bei den Konzepten, die wir übergehen, dreht sich alles um den Prozess und die Werkzeuge und nicht über den Code.
, anstatt das Tutorial von Anfang an zu wiederholen, werden wir an einem Punkt beginnen, an dem wir ein grundlegendes Tic-Tac-Toe-Spiel in Betrieb haben.
Zu diesem Zeitpunkt verwenden wir Feature -Flags und Remote -Konfiguration, um neue Funktionen kontinuierlich zu konfigurieren, zu drücken und bereitzustellen. Um dieses Konzept auf ein Extrem zu bringen, werden wir kontinuierlich darauf drängen, zu meistern. Es werden keine anderen Zweige verwendet. Wir werden einen Fehler vorstellen (natürlich absichtlich!) Und den Fix an den Master voranzutreiben, um zu demonstrieren, wie der Umgang mit diesem Szenario keinen vollständigen Rollback oder eine zusätzliche Verzweigung erfordert.
Wenn Sie während dieses Tutorials das Schreibcode mithalten möchten, können Sie das Repository hier aufgeben.
Ci
Wir werden Netlify für unser Projekt verwenden. Mit Netlify können Sie ein Git -Repository anschließen und Builds jedes Mal automatisch an einen Zweig einstellen.
Um Netlify zu verwenden, melden Sie sich einfach für ein kostenloses Konto an und wählen Sie die Option "Neue Site aus Git" oben rechts im Dashboard aus. Sobald Sie Ihr Github -Konto angeschlossen haben (oder auf andere Weise, wenn Sie Bitbucket oder GitLab verwenden möchten), sollten Sie dann mit den unten angegebenen Optionen angezeigt werden.
Konfigurieren Sie im nächsten Schritt Netlify, um die Anwendung wie folgt auszuführen.
netlify wird nun Ihre Bewerbung für Sie erstellen. Es wird ein paar Minuten dauern, aber sobald es fertig ist, sollten Sie so etwas wie Folgendes sehen:
Durchstöbern in dieser URL sollte Ihr Tic TAC Toe -Spiel in all seinem Ruhm zeigen.
Wir werden Feature-Flags verwenden, um die Erklärung eines Gewinners im Tic-Tac-Toe-Spiel zu steuern. Um unsere Feature -Flags zu erstellen und zu verwalten, werden wir einen Bullet -Zug verwenden, da es derzeit kostenlos ist, aber es gibt viele andere Feature -Flag -Produkte. Wir lassen Sie diejenige auswählen, die Sie für richtig halten.
Um mit uns fortzufahren, erstellen Sie ein kostenloses Konto im Bullet -Zug. Klicken Sie auf die Schaltfläche "Projekt erstellen" und erstellen Sie Ihr Projekt. Wir haben unser FF -Tutorial genannt.
Als nächstes müssen wir eine neue Funktion erstellen, um einen Gewinner zu deklarieren. Klicken Sie unten im nächsten Bildschirm auf die Schaltfläche "Erstellen Sie Ihre erste Funktion", um das folgende Formular aufzurufen und die Details hinzuzufügen.
Beachten Sie, dass wir die Funktion deaktiviert haben.
Beachten Sie die beiden Code -Snippets, die unter der Funktion verfügbar sind. Dies hilft uns im nächsten Schritt.
Erstens, lassen Sie uns dieses Projekt in unserer Entwicklungsumgebung zum Laufen bringen. Navigieren Sie in der Befehlszeile zum Projektordner und führen Sie den Befehl npm i aus, um die erforderlichen Abhängigkeiten zu installieren.
Nächster Run NPM Run Dev und unter http: // localhost: 8080 in Ihrem Browser. Sie sollten das gleiche Tic-Tac-Toe-Spiel sehen, das Sie auf der Netlify-URL gesehen haben.
Wir werden jetzt unser neues Feature -Flag in den vorhandenen Code implementieren. Beginnen wir mit der Installation des Bullet Train -Clients für JavaScript, indem wir eine weitere Befehlszeile öffnen und im Projektverzeichnis Folgendes ausführen:
npm i Bullet-train-Client-Save
Öffnen Sie das Projekt in Ihrem bevorzugten Editor und edit ./web/app.js.
Finden Sie die Funktion Calculatewinner (Quadrares). Diese Funktion bestimmt, ob es einen Gewinner gegeben hat oder nicht, basierend darauf, ob sie eine Linie derselben Form finden oder nicht. Wir werden diese Funktionsrückgabe null basierend auf dem Wert unserer Feature Flag haben, damit wir das Füllen des Boards testen können, ohne dass es einen Gewinner erklärt.
ganz oben in App.js fügen Sie die folgende Zeile hinzu:
<span>var declareWinner = true; </span>
Lassen Sie uns jetzt unseren zuvor installierten Bullet Train -Client initialisieren. Kopieren Sie alle Code -Beispiel 2 von der Features -Seite in der Kugelzugoberfläche und fügen Sie sie genau unter der von Ihnen hinzugefügten Zeile ein.
Die Umgebungs -ID in Ihrem Code -Snippet ist die richtige Umgebungs -ID, die mit der Entwicklungsumgebung in Ihrem Bullet Train -Projekt verbunden ist. Sie können dies überprüfen, indem Sie auf der Seite "Umgebungseinstellungen" durchsuchen, wenn Sie möchten.
Wir müssen nun die Funktion onchange () in der Bullettrain.init () -Funktion in dem Code bearbeiten, in dem wir gerade unseren Anforderungen geklebt haben. Ersetzen Sie den gesamten Code dort durch eine Zeile:
<span>var declareWinner = true; </span>
Sie sollten dies jetzt oben in Ihrer App.js
habendeclareWinner <span>= bulletTrain.hasFeature("declare-winner"); </span>
scrollen
<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> } });
Gehen Sie zurück zum Bullet Train Admin und wechseln Sie die Funktion mit dem Schalter rechts.
Verpflichten Sie und drücken Sie Ihren Code (ja, alles auf Master), und Netlify bereitet Ihren Code automatisch bereit. Durchsuchen Sie Ihre zugewiesene Netlify -URL erneut und wechseln Sie das Feature -Flag, um zu sehen, dass es in einer Produktionsumgebung funktioniert. Süß!
Arbeiten Sie an einem Fehler
Die Funktion, die wir hinzufügen werden, ist die Auswahl, wer zu Beginn des Spiels zuerst geht. Dafür werden wir ein paar Tasten hinzufügen, die nur zu Beginn des Spiels erscheinen und verhindern, dass Klicks auf der Platine eine Form hinzufügen.
Lassen Sie uns zunächst unser Feature -Flag einrichten, um die neue Funktion zu wickeln. Erstellen Sie in Ihrem Bullet Train Project eine neue Funktion namens Select-Who-Goes-First wie folgt. Lassen wir es von Anfang an deaktiviert.
<span>if (!declareWinner) return null; </span>
<span><div className="status">{status}</div> </span>
Fügen Sie zuerst die Board -Komponente die Lebenszyklusfunktionskomponentdidmount () hinzu und bewegen ist abgerufen:
<span>var declareWinner = true; </span>
Wenn wir BulletTrain.init ({...}) außerhalb der Komponente verlassen haben, könnten wir dies nicht nennen.SetState () und die Komponente erneut von Änderungen zu unseren Flags rendern.
Fügen wir nun den Code hinzu, um unsere neue Funktion zu steuern. Wir möchten, dass sich die Anwendung so verhalten wird, wie sie vor dem Hinzufügen dieser Funktion hinzugefügt wird, wenn das Flag deaktiviert ist. Lassen Sie uns dazu den Statuswert für ausgewählte auf True festlegen, wenn das Flag deaktiviert ist. Fügen Sie die folgende Zeile in der BulletTrain.init ({...}) -Methode direkt unter der DeclareWinner -Linie hinzu.
declareWinner <span>= bulletTrain.hasFeature("declare-winner"); </span>
Lassen Sie uns weitermachen und das (wieder direkt in den Meister) drücken. Sobald es gebaut wurde, besuchen Sie Ihre Netlify -URL. Sie sollten sehen, dass sich nichts geändert hat - dies liegt daran, dass die Funktion in unserem Bullet Train -Projekt immer noch deaktiviert ist.
Fahren Sie zum Kugelzug und aktivieren Sie die Funktion.
brillant! Jetzt können wir sehen, dass es funktioniert, aber oh, es gibt einen Fehler! Es ist möglich, das Spiel zu starten, ohne zu wählen, wer zuerst geht. Wenn Sie das Spiel wie dieses spielen, können Sie sehen, dass der Status niemals dem Gewinner angezeigt wird. Das ist nicht richtig!
Gehen Sie zurück zum Bullet Train und deaktivieren Sie die Funktion, bis wir herausfinden können, was los ist. Hier sind die zusätzlichen Funktionen von Bullet Train, z. B. Umgebungen und Benutzer, nützlich. Wir werden in diesem Tutorial in keiner dieser Tutorial eingehen, sondern finden Sie die DOCs, um mehr über die Verwendung mehrerer Umgebungen oder die Kontrolle von Funktionen pro UNSEER zu verwenden.
Zurück zu unserem Fehler: Es gibt eine weitere Zeile, die wir an die Spitze von Handleclick () hinzufügen mussten, um zu verhindern, dass die Spieler bis zum ersten Spieler ausgewählt wurden. Fügen Sie Folgendes oben in der Funktion HandleClick () hinzu.
<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> } });
Schalten Sie die Funktion im Bullet -Zug wieder ein und testen Sie das in Ihrer lokalen Umgebung, und Sie sollten sehen, dass wir jetzt verhindern, dass das Spiel beginnt, ohne zu wählen, wer zuerst geht. Exzellent! Verlassen Sie das wieder in den Master und drücken Sie es direkt in die Bereitstellung.
Gehen Sie zu Ihrer Netlify -URL und Sie sollten die neue Funktion feststellen und ordnungsgemäß funktionieren.
Sie können den endgültigen Code am Ende dieses Abschnitts hier sehen.
Wir werden uns nun eine geringfügige Variation von Feature -Flags ansehen, die als Remote -Konfiguration bezeichnet wird. Mit Remote -Konfiguration können Sie mehr steuern als nur, ob eine Funktion ein- oder ausgeschaltet ist. Sie können einen bestimmten Wert remote ändern, ohne Ihren Code zu ändern. Dies ist nützlich an vielen verschiedenen Stellen, beispielsweise, wenn Sie in der Lage sein möchten, einen Aspekt des Stylings zu konfigurieren.
In unserem Tutorial werden wir dies verwenden, um die von jedem Spieler in unserem Spiel verwendeten Formen zu ändern. Erstellen wir zwei Remote -Konfigurationswerte für welche Formen auf der Platine. Klicken Sie in Ihrem Bullet Train -Projekt auf die Schaltfläche "Funktion erstellen". Wählen Sie diesmal jedoch die Registerkarte "Remote -Konfiguration" anstelle des Funktionsflags. Füllen Sie die Daten gemäß den folgenden Ausgaben aus.
Alles fertig! Jetzt zurück zum Code. In der OnChange () -Funktion unseres Bullet Train -Kunden müssen wir diese Werte abrufen und auf den Zustand der Komponente einstellen. Ändern wir unsere this.setState () rufen Sie an:
<span>var declareWinner = true; </span>
Wir haben jetzt die beiden Formen und können alle statischen Verwendungszwecke in App.js von "X" und "O" stattdessen durch die Zustandswerte ersetzen. Es sollte jeweils 3 Instanzen von jeweils 1 pro Form in Handleclick () und 2 pro Form in Render () geben (einer ist im Anruf zur Rückkehr). Hier ist der aktualisierte Code für die Referenz in HandleClick ():
declareWinner <span>= bulletTrain.hasFeature("declare-winner"); </span>
Beachten
<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> } });
Es gibt noch viel mehr, was Sie mit Remote -Konfiguration erreichen können, z. B. das Styling des gesamten Spiels oder die Abmessungen des Boards. Wir haben noch mehr Remote -Konfigurationswerte hinzugefügt, einschließlich Formfarbe und quadratischer Größe. Sie können den fertigen Code für das Spiel hier sehen.
Andere Dinge, die über
Wenn Sie beispielsweise ein Framework verwenden, das das Datenbankschema für Sie verarbeitet, wie z. B. Django oder Rails, müssen Sie bei der Implementierung von Funktionsflags in Ihren Modellen vorsichtig sein. Die Verwendung von Feature -Flags in Ihren Modellen kann zu DB -Schema -Fehlanpassungen führen, die Teile Ihrer Anwendung abbauen können.
Wenn Sie mit einer API von Drittanbietern interagieren, die bestimmte Anforderungen für seine Verbraucher hat, können die Feature -Flags, um Aspekte davon zu steuern, zu unerwarteten Fehlern in Ihrer Anwendung führen. Umgekehrt, wenn Ihre Anwendung eine API für andere konsumiert, wird die Verwendung von Feature -Flags zur Steuerung der Datenmodelle der API nicht empfohlen, da dies zu Problemen für diese Verbraucher führt.
Schließlich haben wir im obigen Tutorial einen Bullet -Zug verwendet, da es momentan kostenlos verwendet werden kann und auch Open Source. Es gibt eine Reihe anderer Produkte, die dasselbe oder mit etwas unterschiedlichen Varianten tun. Sie sollten alle diese herausfinden, um festzustellen, was für Sie am besten ist. Starten Sie beispielsweise dunkel und Luftschiff -Hauptquartier
Kann ich Feature -Flags für A/B -Tests verwenden? Tolles Werkzeug für A/B -Tests. Sie ermöglichen es Ihnen, verschiedene Funktionen oder Versionen einer Funktion unterschiedlicher Segmente Ihrer Benutzer auszusetzen. Dies kann besonders nützlich sein, um die Auswirkungen neuer Funktionen auf das Verhalten und das Engagement von Benutzern zu testen. Viele Vorteile, sie haben auch potenzielle Risiken. Eines der Hauptrisiken ist die Codekomplexität. Viele Feature -Flags können den Code schwerer zu verstehen und zu warten. Dies kann gemindert werden, indem die Anzahl der aktiven Feature -Flags auf ein Minimum gehalten und entfernen, sobald sie nicht mehr benötigt werden. Ein weiteres Risiko ist das Konfigurationsfehler. Dies kann durch Verwendung automatisierter Tests und Überwachung gemindert werden, um sicherzustellen, dass die Feature-Flags wie erwartet funktionieren. Eine groß angelegte Anwendung kann eine Herausforderung sein. Ein Ansatz besteht darin, ein Feature Flag -Management -System zu verwenden. Diese Systeme bieten einen zentralen Ort, um Feature -Flags zu definieren und zu verwalten, und verfügen häufig über Funktionen wie Benutzersegmentierung, A/B -Tests und Analysen. Ein weiterer Ansatz besteht darin, ein Feature -Flag als Dienstleister zu verwenden. Diese Anbieter bieten eine gehostete Lösung für das Feature-Flag-Management an, die für groß angelegte Anwendungen besonders nützlich sein kann.
Wie kann ich Feature -Flags testen? Ein Ansatz besteht darin, automatisierte Tests zu verwenden, um sicherzustellen, dass jedes Feature -Flag wie erwartet funktioniert. Dies kann das Erstellen von Tests für jeden möglichen Status der Feature -Flag erstellen. Ein anderer Ansatz ist die Verwendung von Überwachung und Analyse, um die Auswirkungen von Feature -Flags auf das Verhalten und die Leistung Ihrer Anwendung zu verfolgen. Werkzeug für allmähliche Rollouts. Sie ermöglichen es Ihnen, die Anzahl der Benutzer langsam zu erhöhen, die Zugriff auf eine neue Funktion oder Version haben. Dies kann besonders nützlich sein, um die Auswirkungen potenzieller Probleme zu minimieren und die Auswirkungen der Änderung des Benutzers und des Engagements zu überwachen.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Feature -Flags in kontinuierlicher Integration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!