Continuous Deployment ist in der sich schnell entwickelnden Softwareentwicklungslandschaft zu einem entscheidenden Faktor geworden. Es verspricht schnellere Release-Zyklen, weniger menschliche Fehler und letztlich ein besseres Nutzererlebnis.
Bei der Softwareentwicklung geht es darum, Probleme der realen Welt mit Code zu lösen. Der Weg der Software von der Erstellung bis zum Kunden umfasst zahlreiche Etappen, die Schnelligkeit, Sicherheit und Zuverlässigkeit erfordern. Hier kommt die kontinuierliche Bereitstellung ins Spiel.
In diesem Artikel wird erklärt, wie du die CircleCI-Plattform für einen kontinuierlichen Integrations- und Continuous Delivery/Deployment-Workflow (CI/CD) einbinden und gleichzeitig die Leistungsfähigkeit der Kinsta-API für die kontinuierliche Bereitstellung von Anwendungen nutzen kannst – wie in unserem React-Beispiel hier. Diese Kombination kann einen reibungslosen Weg von der Entwicklung zur Produktion ebnen.
Continuous Deployment verstehen
Continuous Deployment ist mehr als nur ein Modewort: Es ist ein Paradigmenwechsel in der Softwareentwicklung. Es geht darum, den Prozess der Erstellung, des Testens und der Bereitstellung von Codeänderungen auf Produktionsservern zu automatisieren.
Die CI/CD-Pipeline, eine grundlegende Komponente der kontinuierlichen Bereitstellung, steuert den gesamten Prozess. Sie umfasst Versionskontrolle, automatisierte Tests und automatisierte Bereitstellung. Jeder Schritt ist wichtig, um sicherzustellen, dass nur zuverlässiger, getesteter Code die Produktion erreicht.
Was ist CircleCI?
CircleCI ist ein beliebtes Tool für die Implementierung von CI/CD. Es lässt sich mit Versionskontrollsystemen wie GitHub, GitLab und Bitbucket integrieren und ermöglicht es Entwicklern, die gesamte CI/CD-Pipeline zu automatisieren. Seine Skalierbarkeit, Erweiterbarkeit und Unterstützung für verschiedene Programmiersprachen machen es zu einem vielseitigen Tool für Projekte jeder Größe.
CircleCI-Entwickler definieren Workflows, die bei Code-Commits automatisch ausgelöst werden. Dadurch werden die Build- und Testprozesse eingeleitet und der Code nach erfolgreichem Abschluss in die Zielumgebung übertragen. Dieser „hands-off“-Ansatz spart nicht nur Zeit, sondern verringert auch das Risiko menschlicher Fehler bei der Bereitstellung.
Die Kinsta-API verstehen
Die Kinsta-API ermöglicht es dir, mit den von Kinsta gehosteten Diensten programmatisch zu interagieren, wobei die Anwendungsbereitstellung ein Teil ihrer Funktionalität ist. Wenn du mit CI/CD-Workflows arbeitest, verwendest du den cURL-Befehl, um aus dem Workflow heraus mit der Kinsta-API zu interagieren.
Um die API nutzen zu können, musst du ein Konto mit mindestens einer WordPress-Site, -Anwendung oder -Datenbank in MyKinsta haben. Dann kannst du einen API-Schlüssel generieren, um deinen Zugang zur API zu authentifizieren.
So generierst du einen API-Schlüssel:
- Gehe zu deinem MyKinsta-Dashboard.
- Navigiere zur Seite mit den API-Schlüsseln (Dein Name > Unternehmenseinstellungen > API-Schlüssel).
- Klicke auf API-Schlüssel generieren.
- Wähle ein Ablaufdatum oder lege ein benutzerdefiniertes Startdatum und die Anzahl der Stunden fest, nach denen der Schlüssel abläuft.
- Gib dem Schlüssel einen eindeutigen Namen.
- Klicke auf Generieren.
Nachdem du einen API-Schlüssel generiert hast, kopiere ihn und bewahre ihn an einem sicheren Ort auf (wir empfehlen die Verwendung eines Passwortmanagers), da er nur dann in MyKinsta angezeigt wird.
So löst du die Bereitstellung mit der Kinsta-API aus
Um eine Anwendung über die API an Kinsta zu übermitteln, brauchst du die ID der Anwendung und den Namen des zu übermittelnden Zweigs im Git-Repository. Du kannst die ID deiner Anwendung abrufen, indem du zuerst die Liste deiner Anwendungen abrufst, die Details zu jeder Anwendung, einschließlich ihrer ID, enthält.
Dann kannst du eine POST-Anfrage an den API-Endpunkt /applications/deployments endpunkt mit einem cURL-Befehl stellen:
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H 'Authorization: Bearer <YOUR_TOKEN_HERE>'
-H 'Content-Type: application/json'
-d '{
"app_id": "<YOUR_APP_ID>",
"branch": "main"
}'Dieser cURL-Befehl wird im Workflow verwendet.
Erste Schritte mit CircleCI
Um mit CircleCI loszulegen, brauchst du Quellcode, der bei deinem bevorzugten Git-Anbieter gehostet wird. Für dieses Tutorial verwenden wir die Site-Builder-Anwendung, die für das Tutorial How To Create a WordPress Site With Kinsta API entwickelt wurde. Du kannst das Repository verwenden, indem du es auf GitHub aufrufst und auswählst: Diese Vorlage verwenden > Ein neues Repository erstellen.
In der React-Anwendung werden Unit-Tests erstellt, um jede Komponente zu testen. ESLint wird auch verwendet, um eine perfekte Syntax und Codeformatierung zu gewährleisten. Richten wir einen CI/CD-Workflow ein, der unsere Anwendung baut, testet, sicherstellt, dass die Syntax unseres Codes korrekt ist, und sie schließlich über die API auf Kinsta bereitstellt.
Um loszulegen, wollen wir uns einige wichtige Konzepte ansehen:
- Workflows: CircleCI basiert auf Workflows – definierten Abfolgen von Aufträgen, die die Phasen deiner CI/CD-Pipeline umreißen. Workflows können verschiedene Schritte umfassen, wie z. B. das Erstellen, Testen, Bereitstellen und mehr.
- Jobs: Jobs sind einzelne Arbeitseinheiten innerhalb eines Workflows. Jeder Job führt eine bestimmte Aufgabe aus, z. B. die Kompilierung von Code, die Durchführung von Tests oder die Bereitstellung auf einem Server. Diese Aufträge können auch verschiedene Schritte umfassen, die nacheinander ausgeführt werden (parallele Ausführung), so dass bei einem Fehler der gesamte Auftrag ausfällt.
Schritt 1: Erstelle ein CircleCI-Konto
Besuche die CircleCI-Website und erstelle ein Konto, falls du noch keins hast. Du kannst dich mit deinem bevorzugten Git-Anbieter anmelden. Das macht es einfacher, ohne weitere Konfiguration auf deine Repositories zuzugreifen.
Schritt 2: Erstelle die Konfigurationsdatei
Erstelle im Stammverzeichnis deines Projekts den Ordner .circleci, falls er noch nicht existiert, und erstelle in diesem Ordner eine Datei config.yml. In dieser Datei wird die Konfiguration deines Workflows gespeichert.
Schritt 3: Konfiguriere dein Repository
Sobald du eingeloggt bist, navigierst du zu deinem CircleCI Dashboard, klickst in der linken Seitenleiste auf Projekte, um eine Liste der Repositories zu sehen, und klickst auf die Schaltfläche Projekt einrichten für das Repository, das du konfigurieren möchtest.
Daraufhin wird ein Dialog geöffnet, in dem CircleCI automatisch deine Konfigurationsdatei erkennt. Klicke dann auf die Schaltfläche Projekt ein richten. CircleCI kann nun auf deine Codebasis zugreifen und die definierten Workflows bei Codeänderungen ausführen.
Schritt 4: Definiere die Aufgabe deines Workflows
Der wichtigste Schritt beim Einrichten deiner CircleCI-Pipeline ist die Definition deines Workflows in der Datei config.yml. Hier legst du die Reihenfolge der Aktionen fest, die deine Pipeline ausführen soll. Das ist sozusagen die Blaupause für deine Reise von der Entwicklung zur Produktion.
Zunächst legst du die CircleCI-Version fest, die derzeit 2.1 ist:
version: 2.1Du brauchst einen build Job für jedes React-Projekt. Dieser Job kümmert sich um die grundlegenden Aufgaben, die deinen Code bereit für die Bereitstellung machen. Dazu gehören die Installation der erforderlichen Abhängigkeiten, die Kompilierung deines Codes, die Durchführung von Tests, um sicherzustellen, dass alles reibungslos funktioniert, die Überprüfung des Codes auf seine Qualität und schließlich die Auslieferung des Codes an sein Ziel.
Da React-Projekte oft Tools wie Node.js benötigen, um die Arbeit zu erledigen, vereinfacht CircleCI den Zugang zu diesen Tools, indem es sie als vorgefertigte Pakete anbietet. In diesem Tutorial gibst du die Version von Node.js an, die du verwenden möchtest. Wir verwenden Node.js v20.
jobs:
build:
docker:
- image: cimg/node:20.5.0Dieser Job wird verschiedene Schritte ausführen, also lass uns diese erstellen. Der erste Schritt ist checkout, der die neueste Version deines Codes aus dem Repository holt, damit alle nachfolgenden Aktionen mit dem neuesten Code funktionieren.
steps:
- checkoutJetzt geht es ans Eingemachte – die Dinge zu erledigen. Die Schritte, die auf checkout folgen, decken die wichtigsten Aufgaben ab: Installieren von Abhängigkeiten, Kompilieren des Quellcodes, Ausführen von Unit-Tests und die Verwendung von ESLint, um deinen Code auf rote Fahnen zu überprüfen.
steps:
- checkout
- run:
name: Install Dependencies
command: npm install
- run:
name: Compile Source Code
command: npm run build
- run:
name: Run Unit Tests
command: npm test
- run:
name: Run ESLint
command: npm run lintJeder Schritt ist wie ein Wegweiser benannt, damit du nachvollziehen kannst, was passiert, wenn der Workflow in vollem Gange ist. Diese Klarheit macht es einfach, Fehler zu beheben und sicherzustellen, dass alles in der richtigen Reihenfolge abläuft.
Auslösen der kontinuierlichen Bereitstellung in Kinsta
Der letzte Schritt im build Job besteht darin, die Bereitstellung an Kinsta über die API zu initiieren. Dafür sind zwei Werte erforderlich: dein API-Schlüssel und deine App-ID, die nicht öffentlich sein sollten. Diese Werte werden als Umgebungsvariablen in CircleCI gespeichert. Definieren wir nun die Bereitstellungsphase im Workflow:
- run:
name: Deploy to Kinsta
command: |
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H "Authorization: Bearer $API_KEY"
-H "Content-Type: application/json"
-d '{
"app_id": "'"$APP_ID"'",
"branch": "main"
}'Im mitgelieferten Code führst du den cURL-Befehl aus, um die Bereitstellung mit Hilfe der in deinen Umgebungsvariablen gespeicherten Anwendungs-ID auszulösen. Erinnere dich daran, dass der Zugriff auf die Umgebungsvariablen mit der folgenden Syntax erfolgt:
"$VARIABLE_NAME"Speichern von Umgebungsvariablen mit CircleCI
Umgebungsvariablen sind entscheidend für die Sicherheit und Flexibilität deiner kontinuierlichen Integrations- und Deployment-Workflows. Um Umgebungsvariablen in CircleCI zu speichern, befolge diese Schritte:
- Öffne dein Projekt, um alle Details zu deiner Pipeline zu sehen, und klicke auf die Schaltfläche Projekteinstellungen.
- Klicke auf die Registerkarte Umgebungsvariablen in der Seitenleiste und füge deine Umgebungsvariablen hinzu.
Schritt 5: Workflow-Konfiguration
Nachdem du deine Aufgabe(n) eingerichtet und in organisierte Schritte gegliedert hast, geht es in der nächsten Phase darum, deinen Workflow zu konfigurieren. Der Workflow fungiert als Orchestrator, der die Reihenfolge der Aufträge steuert und bestimmte Filter und Regeln enthält, die bestimmen, wie diese Aufträge ausgeführt werden.
In diesem Leitfaden erstellen wir einen Workflow, der den Build-Job ausschließlich dann auslöst, wenn es einen Push oder Änderungen am Code im main Branch des Repositorys gibt:
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- mainDiese Konfiguration erfolgt mithilfe von Filtern, mit denen du steuern kannst, wann ein Job auf der Grundlage bestimmter Bedingungen ausgeführt wird. Du kannst auch Auslöser einbauen, um festzulegen, wann der Workflow ausgeführt werden soll (Beispiel: täglich um 12 Uhr UTC):
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- main
triggers:
- schedule:
cron: "0 0 * * *"Der obige Workflow enthält eine trigger, die mit dem Schlüsselwort schedule definiert ist. Der cron-Ausdruck "0 0 * * *" entspricht der täglichen Ausführung des Workflows um Mitternacht UTC.
In einem cron-Ausdruck gibt es fünf durch Leerzeichen getrennte Felder, die jeweils für eine andere Zeiteinheit stehen:
- Minute (0-59): Das erste Feld steht für die Minute der Stunde, die auf
0gesetzt wird, um zu Beginn der Stunde auszulösen. - Stunde (0-23): Das zweite Feld bezeichnet die Stunde des Tages, die auf
0für Mitternacht eingestellt ist. - Tag des Monats (1-31): Das dritte Feld bezeichnet den Tag, der durch ein Sternchen (
*) für einen beliebigen Tag angezeigt wird. - Monat (1-12): Das vierte Feld steht für den Monat, gekennzeichnet durch ein Sternchen (
*) für einen beliebigen Monat. - Wochentag (0-6, wobei 0 für Sonntag steht): Das fünfte Feld steht für den Wochentag, der ebenfalls mit einem Sternchen (
*) für einen beliebigen Tag gekennzeichnet ist.
Mit dieser Workflow-Konfiguration kannst du effektiv steuern, wann und unter welchen Bedingungen deine definierten Jobs ausgeführt werden, um eine effiziente und optimierte CI/CD-Pipeline zu erhalten.
Schritt 6: Übertragen und Beobachten
Sobald dein Workflow erfolgreich konfiguriert ist, übergibst du deine Änderungen an dein Versionskontroll-Repository. CircleCI erkennt automatisch das Vorhandensein der Konfigurationsdatei und löst deine definierten Workflows bei Codeänderungen aus.
Klicke auf den Build-Job, um seine Details zu überprüfen. Wenn du mehr als einen Job hast, werden sie alle aufgelistet. Wenn du auf einen Auftrag klickst, werden auf der Registerkarte SCHRITTE alle Schritte angezeigt, die der Auftrag ausgeführt hat und ob sie erfolgreich waren oder nicht.
Du kannst auch auf jeden Schritt klicken, um weitere Details zu sehen. Wenn du auf den Schritt Deploy to Kinsta klickst, siehst du weitere Details über die API-Anfrage und erfährst, ob sie erfolgreich war:
Wenn du dein MyKinsta-Dashboard überprüfst, wirst du feststellen, dass der Workflow die Bereitstellung automatisch auslöst. So sieht dein vollständiger CircleCI-Workflow aus:
version: 2.1
jobs:
build:
docker:
- image: cimg/node:20.5.0
steps:
- checkout # Check out the code from the repository
- run:
name: Install Dependencies
command: npm install
- run:
name: Compile Source Code
command: npm run build
- run:
name: Run Unit Tests
command: npm test
- run:
name: Run ESLint
command: npm run lint
- run:
name: Deploy to Kinsta
command: |
curl -i -X POST
https://api.kinsta.com/v2/applications/deployments
-H "Authorization: Bearer $API_KEY"
-H "Content-Type: application/json"
-d '{
"app_id": "'"$APP_ID"'",
"branch": "main"
}'
workflows:
version: 2
build-test-lint:
jobs:
- build:
filters:
branches:
only:
- mainZusammenfassung
Du hast nun erfolgreich einen maßgeschneiderten Bereitstellungsprozess für deine React-Anwendung auf Kinsta über CircleCI realisiert. Dieser Ansatz gibt dir mehr Flexibilität und Autorität bei der Bereitstellung und ermöglicht es deinem Team, spezielle Schritte innerhalb des Prozesses auszuführen.
Mit der Einführung von CircleCI machst du einen großen Schritt zur Verbesserung deiner Entwicklungsmethoden. Die Automatisierung deiner CI/CD-Pipeline garantiert nicht nur die Qualität deines Codes, sondern beschleunigt auch deine Release-Zyklen.
Wie nutzt du die Kinsta API? Welche Endpunkte würdest du gerne zur API hinzugefügt sehen? Welches Kinsta-API-Tutorial würdest du gerne als nächstes lesen?
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar