So richten Sie Continuous Integration für Ihre Firebase-App ein

Eines schönen Tages beschloss ich, das glänzende neue Kind auf dem Markt, firebase, auszuprobieren.

In Firebase sind viele Funktionen integriert, die alle einfach per Plug-and-Play implementiert werden können. Mit der Zeit kamen bei der Übernahme durch Google eine Reihe neuer Funktionen ins Spiel, nämlich die Speicherung großer Dateien und die verbesserte Authentifizierung.

So weit, ist es gut.

Vor ein paar Tagen dachte ich darüber nach, eine Messenger-App über Firebase zu hacken, und es war daher eine Achterbahnfahrt gewesen. Während die App an sich ziemlich einfach ist, hat der CI-Teil Spaß gemacht.

Ich persönlich habe für keines der Projekte, für die ich gearbeitet habe, ein CI eingerichtet. Dies ist mein erster Versuch, einen einzurichten. Bevor wir in die Tiefe gehen, ein kleiner Haftungsausschluss.

Dies ist keinesfalls ein Tutorial oder ein Leitfaden für Experten. Es ist einfach ein Bericht über meine Reise, um ein schwer fassbares Konzept zu erfassen.

Ich wollte in diesem frühen Stadium meines Lernzyklus nicht mit Jenkins herumspielen und entschied mich daher für Gitlab CI, da mein Code bereits vorhanden war.

Um CI einzurichten, benötigt gitlab einfach eine Datei mit dem Namen .gitlab-ci.yml im Stammverzeichnis des Projekts. Nach dem Hinzufügen versucht das integrierte CI, Ihr Projekt zu erstellen, indem Tasks ausgeführt werden, wie in der YAML angegeben.

Genug Gerede. Sehen wir uns Code an :)

Versuchen wir es zeilenweise.

Bild: Knoten: Neueste

Dadurch wird das neueste Image des Knotens in Ihre Instanz gezogen. Da meine App über npm erstellt wird, verwende ich npm als Paketmanager und damit als Knoten.

before_script:
 - Npm Prune
 - npm install
 - npm install -g grunt-cli
 - npm install -g firebase-tools

Dieser Block weist mein CI an, eine Reihe von Befehlen auszuführen, bevor eine meiner Phasen ausgeführt wird. Um es von oben zu betrachten, haben wir npm prune, dessen Verwendung laut Dokumentation ist:

#npm beschneiden
Dieser Befehl entfernt "fremde" Pakete. Wenn ein Paketname angegeben wird, werden nur Pakete entfernt, die mit einem der angegebenen Namen übereinstimmen.
Fremdpakete sind Pakete, die nicht in der Abhängigkeitsliste des übergeordneten Pakets aufgeführt sind.

Dann müssen wir npm installieren, um alle Abhängigkeiten meiner App zu installieren.

Die Tools npm install -g grunt-cli und npm install -g firebase sind so ziemlich selbsterklärend. Sonst google es. :)

Stufen:
 - entfalten

Dieser Block deklariert die Phasen in der Build-Pipeline. Ab sofort haben wir nur eine Bereitstellungsphase. Überprüfen Sie https://gitlab.com/help/ci/yaml/README.md#stages

Bei Bedarf kann der gesamte Satz hinzugefügt werden.

Weiter geht es

Zwischenspeicher:
 Pfade:
 - node_modules /
 Schlüssel: "$ CI_BUILD_REPO"

Das ist der lustige Teil. Die CI-Engine wird angewiesen, den Ordner node_modules über Builds hinweg zwischenzuspeichern. Dies bedeutet, dass nicht jedes Mal, wenn Sie einen Build auslösen, alle Ihre node_modules heruntergeladen werden müssen.

Das Schlüsselargument ist eigentlich die Kennung, mit der die Caches validiert werden. Lesen Sie https://gitlab.com/help/ci/yaml/README.md#cachekey

deploy_to_firebase:
 Bühne: bereitstellen
 nur:
 - Meister
 Skript:
 - Grunze alle
 - firebase deploy - Token $ FIREBASE_DEPLOY_KEY

Endlich haben wir den Deployment-Teil. Dieser Block wurde mit deploy_to_firebase markiert. Dies ist eher eine benutzerdefinierte Aufgabe. Es beinhaltet eine Reihe von Aufgaben, die das CI ausführen muss. Zeile für Zeile gehen,

Bühne: bereitstellen

Dies markiert die Stufe, auf die diese Aufgabe zeigt. In diesem Fall wird es bereitgestellt.

nur:
 - Meister

Dies weist das CI an, Builds nur dann auszuführen, wenn sich der Git-Master-Zweig ändert. Lesen Sie https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell.

Skript:
 - Grunze alle
 - firebase deploy - Token $ FIREBASE_DEPLOY_KEY

Dies ist der letzte Teil des benutzerdefinierten Bereitstellungsjobs.

Hier bitten wir CI, unsere vorkonfigurierte Grunt-Task all auszuführen.

Mit dieser Aufgabe wird ES6 transpiliert, mein JSX kompiliert, mein CSS minimiert und schließlich über die erstellten Dateien in ein Erstellungsverzeichnis kopiert, damit sie über die Leitung zur Firebase bereitgestellt werden können.

Dann gibt es: firebase deploy - Token $ FIREBASE_DEPLOY_KEY

Das $ FIREBASE_DEPLOY_KEY ist eigentlich eine geschützte Variable. Dies wird vom Befehl deploy verwendet, um mit firebase zu authentifizieren, dass die Bereitstellung gültig ist. Da es sich um ein Zugriffstoken handelt, darf es nicht als Teil des Codes verfügbar gemacht werden. Daher wird dies wie eine Umgebungsvariable beibehalten.

Das $ FIREBASE_DEPLOY_KEY wird durch den Befehl firebase login: ci generiert. Lesen Sie https://firebase.google.com/docs/cli/#administrative_commands.

Und das ist es.

Drücken Sie auf main und es sollte anfangen zu bauen.

Viel Glück und Gott Geschwindigkeit :)

PS: lies auf ES6 nach, reagiere und grunze und greife bei Bedarf auf Kommentare zurück.