Erleichtern Sie Ihre Produktions- und Bereitstellungsprobleme mit einer CI/CD-Pipeline, die sich um die mühsamen Details kümmert.

Das Bereitstellen von Webanwendungen auf Firebase Hosting kann mühsam sein. Durch die Verwendung von GitHub-Aktionen können Sie jedoch den Bereitstellungsprozess vereinfachen und optimieren und vornehmen Es ist unglaublich einfach, Bereitstellungsworkflows über die gesamte Lebensdauer einer Software zu verwalten Projekt.

Mit nur wenigen einfachen Schritten können Sie einen Bereitstellungs-Workflow einrichten, um den Prozess zu automatisieren. Dazu gehört das Nachverfolgen neuer Änderungen an Branches und das Protokollieren von Fehlern. Lesen Sie weiter, um zu erfahren, wie Sie eine React-Anwendung auf dem Hosting-Service von Firebase bereitstellen.

Was ist eine CI/CD-Pipeline?

Eine CI/CD-Pipeline (Continuous Integration/Continuous Delivery) ist eine Reihe automatisierter Prozesse, die implementiert werden, um das kontinuierliche Erstellen, Testen und Bereitstellen von Anwendungen zu ermöglichen.

instagram viewer

Einfach ausgedrückt wird eine CI/CD-Pipeline eingerichtet, um die Prozesse zu automatisieren, die am Lebenszyklus der Softwareentwicklung beteiligt sind. Dies umfasst die eigentliche Entwicklung, Tests, Veröffentlichungen (Beta, Alpha und endgültige Version), Fehlerbehebungen und sogar Funktionsaktualisierungen. Im Wesentlichen ermöglicht dieser Prozess die einfache und schnelle Auslieferung von Qualitätssoftware.

Eine CI/CD-Pipeline umfasst normalerweise mehrere Phasen, darunter:

  1. Quellphase: Diese Phase umfasst die eigentliche Entwicklung und Pflege des Anwendungscodes mit einem Versionskontrolltool wie Git.
  2. Build Stage: Dieser Schritt assembliert den Quellcode mit all seinen Abhängigkeiten in ein ausführbares Format.
  3. Testphase: Diese Phase beinhaltet automatisierte Tests, um die Qualität der Software zu validieren. Das Endziel ist es, alle Fehler zu erkennen und zu beheben. Sie können in dieser Phase verschiedene Arten von Tests durchführen, und sobald der Code die Tests bestanden hat, ist er bereit für die Bereitstellung.
  4. Bereitstellung: In dieser Phase wird der Bereitstellungsprozess in der Produktionsumgebung automatisiert.

Die Pipeline sollte jede Phase überwachen, um sicherzustellen, dass keine Fehler vorhanden sind, und um den gesamten Prozess für zukünftige Versionen zu verbessern.

Was sind GitHub-Aktionen?

GitHub Actions ist eine Funktion, die von GitHub bereitgestellt wird, um die Bereitstellungs-Workflow-Prozesse einer Software in den CI/CD-Pipelines zu automatisieren. Es ermöglicht die Definition und Automatisierung von Deployment-Workflows direkt aus dem GitHub-Repository Ihres Projekts.

GitHub Actions hat mehrere Vorteile:

  1. Benutzerfreundlich: GitHub Actions bietet eine benutzerfreundliche Oberfläche und eine einfache Syntax zum Einrichten von Bereitstellungs-Workflows. Mit dem integrierten Editor auf GitHub können Sie Ihre Projektabläufe einfach und schnell definieren.
  2. Native Integration: GitHub Actions ist Teil von GitHub und erleichtert die Einrichtung, Verwaltung und Zusammenarbeit an Workflows neben dem Code Ihres Projekts.
  3. Flexibel und anpassbar: GitHub Actions bietet eine flexible und anpassbare Plattform, die sicherstellt, dass Sie Workflows erstellen können, die Ihren spezifischen Anforderungen entsprechen. Darüber hinaus unterstützt es mehrere Programmiersprachen. Das heißt, Sie können es mit jeder Technologie verwenden, die Sie bevorzugen.

Richten Sie ein Firebase-Projekt und den React-Client ein

Um zu beginnen, gehen Sie zu Firebase und melden Sie sich mit Ihrem Google-Konto an. Klicken Sie auf der Übersichtsseite der Konsole auf Projekt erstellen um ein neues Projekt einzurichten und den Namen des Projekts anzugeben.

Nächste, Erstellen Sie eine React-Anwendung und installieren Sie die Firebase-Befehlszeilentools:

npm install -g firebase-tools

Sie finden den Code dieses Projekts in seiner GitHub-Repository.

Melden Sie sich von Ihrem Terminal aus mit Ihren Firebase-Kontoanmeldeinformationen bei Firebase an.

Firebase-Login: ci

Dadurch wird der Firebase-Authentifizierungsablauf ausgelöst, der Sie auffordert, Ihre Anmeldedaten einzugeben, wenn Sie noch nicht angemeldet sind. Sobald Firebase Sie authentifiziert hat, wird ein Token gedruckt. Kopieren Sie dieses Token; Sie verwenden es, um Firebase-Befehle in Ihrem GitHub Actions-Setup auszuführen.

Erstellen Sie abschließend eine produktionsreife Version Ihrer Anwendung:

npm-Run-Build

Dieser Befehl generiert die erforderlichen Dateien und Assets in einem neuen „Build“-Ordner im Stammverzeichnis, die zum Bereitstellen der Anwendung erforderlich sind.

Initialisieren Sie Firebase in Ihrer React-Anwendung

Führen Sie diesen Befehl aus, um Firebase in Ihrem Projektordner zu initialisieren:

Firebase-Init

Bestätigen Sie als Nächstes, dass Sie Firebase in Ihrem Projekt initialisieren möchten, und fahren Sie fort und wählen Sie aus Hosting: Konfigurieren Sie Dateien für das Firebase-Hosting und richten Sie (optional) GitHub Action-Bereitstellungen einaus der Optionsliste.

Geben Sie an, dass Sie ein vorhandenes Projekt verwenden möchten, und wählen Sie den Projektnamen aus, den Sie ursprünglich in der Entwicklerkonsole von Firebase erstellt haben.

Geben Sie als Nächstes den Ordner „Build“ als öffentlich Verzeichnis auswählen NEIN Um alle URLs in /index.html umzuschreiben, wählen Sie die Option NEIN zur Option, automatische Builds und Deployments von GitHub einzurichten, und schließlich Select Ja um die Dateioption build/index.html zu überschreiben.

Nachdem Sie die obigen Änderungen vorgenommen haben, erstellt die CLI eine firebase.json-Datei im Stammverzeichnis. Diese Datei enthält die gesamte Hostingkonfiguration, die der GitHub Actions-Workflow erfordert.

Schließlich, bevor Sie den GitHub Actions-Workflow einrichten, Erstellen Sie ein Repository auf GitHub, und verschieben Sie die Projektdateien dorthin.

GitHub-Aktionen einrichten

Wählen Sie im Repository Ihres Projekts auf GitHub aus Einstellungen > Geheimnisse und Variablen > Aktionen. Geben Sie auf der geheimen Seite des Repositorys ein FIREBASE_TOKEN als Name des Geheimnisses und fügen Sie das Firebase-Token ein, das Sie in die kopiert haben Geheimnisse Felder.

Richten Sie den Bereitstellungsworkflow ein

Klicken Sie im Repository Ihres Projekts auf die Registerkarte Aktionen und wählen Sie aus Nodejs konfigurieren Arbeitsablauf in der Kontinuierliche Integration Abschnitt.

Als nächstes benennen Sie den Dateinamen um in firebase.yml, löschen Sie den Boilerplate-Code im Editor und fügen Sie den folgenden Code hinzu:

# Dieser Workflow führt eine Neuinstallation von Knotenabhängigkeiten durch,
# Zwischenspeichern/Wiederherstellen, Erstellen der Quelle Code und führen Sie Tests über verschiedene
# Versionen des Knotens
# Weitere Informationen finden Sie unter:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
Name: Firebase-CI


An:
 drücken:
 Zweige: [ Haupt ]
 pull_request:
 Zweige: [ Haupt]


Arbeitsplätze:
 bauen:


 Läuft auf: ubuntu-neueste


 Strategie:
 Matrix:
 Knotenversion: [14.x]

 Schritte:
 - verwendet: Aktionen/checkout@v2
 - Name: Node.js verwenden ${{ matrix.node-version }}
 verwendet: actions/setup-node@v1
 mit:
 Knotenversion: ${{ matrix.node-version }}
 - Ausführen: npm install -g npm
 - Name: npm installieren, erstellen und testen
 laufen: |
 npm installieren
 npm-Run-Build
 - Name: Archiv-Build
 verwendet: actions/upload-artifact@v2
 mit:
 Name: bauen
 Pfad: bauen

 einsetzen:
 Name: Bereitstellen
 braucht: bauen
 Läuft auf: ubuntu-neueste
 Schritte:
 - verwendet: Aktionen/checkout@v2
 - Name: Build herunterladen
 verwendet: actions/download-artifact@v2
 mit:
 Name: bauen
 Pfad: bauen
 - Name: Auf Firebase bereitstellen
 verwendet: w9jds/firebase-action@master
 mit:
 Argumente: deploy --only Hosting
 env:
 FIREBASE_TOKEN: ${{ Geheimnisse. FIREBASE_TOKEN }}

Hier sind einige der wichtigsten Eigenschaften erklärt:

  1. An: Ereignisse, die die Aktionen in diesem Workflow auslösen.
  2. Arbeitsplätze: Gibt die Jobs an, die eine bestimmte Aktion ausführen soll. In diesem Fall gibt es zwei Jobs: Build und Deployment.
  3. Läuft auf: die Maschine, auf der diese Aktion ausgeführt werden soll.
  4. Schritte: Definiert eine Abfolge von Schritten, die die Aktion für einen bestimmten Job ausführen soll.
  5. Mit: Gibt alle Argumente an, die von den auszuführenden Aktionen benötigt werden.
  6. Name: Name eines bestimmten Schritts für einen Job.

Bestätigen Sie abschließend die in dieser Datei vorgenommenen Änderungen. GitHub löst diesen Workflow automatisch aus und erstellt und stellt die React-Anwendung auf dem Hosting-Dienst von Firebase bereit. Sie können die Live-URL der Anwendung in den Bereitstellungsprotokollen überprüfen.

Bereitstellen von Anwendungen mithilfe von GitHub-Aktionen

GitHub Actions bietet einen optimierten Bereitstellungsansatz. Es stellt sicher, dass Sie Anwendungen konsistent und zuverlässig bereitstellen können, unabhängig von der Technologie, mit der Sie sie erstellen.

Darüber hinaus können Sie den Bereitstellungs-Workflow einfach anpassen, indem Sie die integrierten Bereitstellungstools verwenden, um Ihre spezifischen CI/CD-Pipeline-Anforderungen zu erfüllen.