{"id":65094,"date":"2023-08-21T12:59:07","date_gmt":"2023-08-21T11:59:07","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=65094&preview=true&preview_id=65094"},"modified":"2023-08-31T09:18:17","modified_gmt":"2023-08-31T08:18:17","slug":"react-continuous-deployment","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/react-continuous-deployment\/","title":{"rendered":"Continuous Deployment von React-Anwendungen mit CircleCI und Kinsta API"},"content":{"rendered":"

Continuous Deployment ist in der sich schnell entwickelnden Softwareentwicklungslandschaft<\/a> zu einem entscheidenden Faktor geworden. Es verspricht schnellere Release-Zyklen, weniger menschliche Fehler und letztlich ein besseres Nutzererlebnis.<\/p>\n

Bei der Softwareentwicklung geht es darum, Probleme der realen Welt mit Code zu l\u00f6sen. Der Weg der Software von der Erstellung bis zum Kunden umfasst zahlreiche Etappen, die Schnelligkeit, Sicherheit und Zuverl\u00e4ssigkeit erfordern. Hier kommt die kontinuierliche Bereitstellung ins Spiel.<\/p>\n

In diesem Artikel wird erkl\u00e4rt, wie du die CircleCI-Plattform<\/a> f\u00fcr einen kontinuierlichen Integrations- und Continuous Delivery\/Deployment-Workflow (CI\/CD<\/a>) einbinden und gleichzeitig die Leistungsf\u00e4higkeit der Kinsta-API<\/a> f\u00fcr 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.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Continuous Deployment verstehen<\/h2>\n

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\u00e4nderungen auf Produktionsservern zu automatisieren.<\/p>\n

Die CI\/CD-Pipeline<\/a>, 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\u00e4ssiger, getesteter Code die Produktion erreicht.<\/p>\n

Was ist CircleCI?<\/h2>\n

CircleCI ist ein beliebtes Tool f\u00fcr die Implementierung von CI\/CD. Es l\u00e4sst sich mit Versionskontrollsystemen wie GitHub<\/a>, GitLab<\/a> und Bitbucket<\/a> integrieren und erm\u00f6glicht es Entwicklern, die gesamte CI\/CD-Pipeline zu automatisieren. Seine Skalierbarkeit, Erweiterbarkeit und Unterst\u00fctzung f\u00fcr verschiedene Programmiersprachen<\/a> machen es zu einem vielseitigen Tool f\u00fcr Projekte jeder Gr\u00f6\u00dfe.<\/p>\n

CircleCI-Entwickler<\/a> definieren Workflows, die bei Code-Commits automatisch ausgel\u00f6st werden. Dadurch werden die Build- und Testprozesse eingeleitet und der Code nach erfolgreichem Abschluss in die Zielumgebung \u00fcbertragen. Dieser „hands-off“-Ansatz spart nicht nur Zeit, sondern verringert auch das Risiko menschlicher Fehler bei der Bereitstellung.<\/p>\n

Die Kinsta-API verstehen<\/h2>\n

Die Kinsta-API<\/a> erm\u00f6glicht es dir, mit den von Kinsta gehosteten Diensten programmatisch zu interagieren, wobei die Anwendungsbereitstellung ein Teil ihrer Funktionalit\u00e4t ist. Wenn du mit CI\/CD-Workflows arbeitest, verwendest du den cURL-Befehl, um aus dem Workflow heraus mit der Kinsta-API zu interagieren.<\/p>\n

Um die API nutzen zu k\u00f6nnen, musst du ein Konto mit mindestens einer WordPress-Site<\/a>, -Anwendung<\/a> oder -Datenbank<\/a> in MyKinsta haben. Dann kannst du einen API-Schl\u00fcssel generieren, um deinen Zugang zur API zu authentifizieren.<\/p>\n

So generierst du einen API-Schl\u00fcssel:<\/p>\n

    \n
  1. Gehe zu deinem MyKinsta-Dashboard.<\/li>\n
  2. Navigiere zur Seite mit den API-Schl\u00fcsseln <\/strong>(Dein Name<\/strong> > Unternehmenseinstellungen<\/strong> > API-Schl\u00fcssel<\/strong>).<\/li>\n
  3. Klicke auf API-Schl\u00fcssel generieren<\/strong>.<\/li>\n
  4. W\u00e4hle ein Ablaufdatum oder lege ein benutzerdefiniertes Startdatum und die Anzahl der Stunden fest, nach denen der Schl\u00fcssel abl\u00e4uft.<\/li>\n
  5. Gib dem Schl\u00fcssel einen eindeutigen Namen.<\/li>\n
  6. Klicke auf Generieren<\/strong>.<\/li>\n<\/ol>\n

    Nachdem du einen API-Schl\u00fcssel generiert hast, kopiere ihn und bewahre ihn an einem sicheren Ort auf (wir empfehlen die Verwendung eines Passwortmanagers<\/a>), da er nur dann<\/strong> in MyKinsta angezeigt wird.<\/p>\n

    So l\u00f6st du die Bereitstellung mit der Kinsta-API aus<\/h3>\n

    Um eine Anwendung \u00fcber die API an Kinsta zu \u00fcbermitteln, brauchst du die ID der Anwendung und den Namen des zu \u00fcbermittelnden Zweigs im Git-Repository. Du kannst die ID deiner Anwendung abrufen, indem du zuerst die Liste deiner Anwendungen abrufst<\/a>, die Details zu jeder Anwendung, einschlie\u00dflich ihrer ID, enth\u00e4lt.<\/p>\n

    Dann kannst du eine POST-Anfrage<\/a> an den API-Endpunkt \/applications\/deployments<\/a><\/code> endpunkt mit einem cURL-Befehl stellen:<\/p>\n

    curl -i -X POST \n  https:\/\/api.kinsta.com\/v2\/applications\/deployments \n  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>' \n  -H 'Content-Type: application\/json' \n  -d '{\n    \"app_id\": \"<YOUR_APP_ID>\",\n    \"branch\": \"main\"\n  }'<\/code><\/pre>\n
    Dieser cURL-Befehl wird im Workflow verwendet.<\/p>\n
    Erste Schritte mit CircleCI<\/h2>\n
    Um mit CircleCI loszulegen, brauchst du Quellcode, der bei deinem bevorzugten Git-Anbieter gehostet wird. F\u00fcr dieses Tutorial verwenden wir die Site-Builder-Anwendung<\/a>, die f\u00fcr das Tutorial How To Create a WordPress Site With Kinsta API<\/a> entwickelt wurde. Du kannst das Repository verwenden, indem du es auf GitHub aufrufst und ausw\u00e4hlst: Diese Vorlage verwenden<\/strong> > Ein neues Repository erstellen<\/strong>.<\/p>\n
    In der React<\/a>-Anwendung werden Unit-Tests erstellt, um jede Komponente zu testen. ESLint<\/a> wird auch verwendet, um eine perfekte Syntax und Codeformatierung zu gew\u00e4hrleisten. Richten wir einen CI\/CD-Workflow ein, der unsere Anwendung baut, testet, sicherstellt, dass die Syntax unseres Codes korrekt ist, und sie schlie\u00dflich \u00fcber die API auf Kinsta bereitstellt.<\/p>\n
    Um loszulegen, wollen wir uns einige wichtige Konzepte ansehen:<\/p>\n
      \n
    1. Workflows:<\/strong> CircleCI basiert auf Workflows – definierten Abfolgen von Auftr\u00e4gen, die die Phasen deiner CI\/CD-Pipeline umrei\u00dfen. Workflows k\u00f6nnen verschiedene Schritte umfassen, wie z. B. das Erstellen, Testen, Bereitstellen und mehr.<\/li>\n
    2. Jobs:<\/strong> Jobs sind einzelne Arbeitseinheiten innerhalb eines Workflows. Jeder Job f\u00fchrt eine bestimmte Aufgabe aus, z. B. die Kompilierung von Code, die Durchf\u00fchrung von Tests oder die Bereitstellung auf einem Server. Diese Auftr\u00e4ge k\u00f6nnen auch verschiedene Schritte umfassen, die nacheinander ausgef\u00fchrt werden (parallele Ausf\u00fchrung), so dass bei einem Fehler der gesamte Auftrag ausf\u00e4llt.<\/li>\n<\/ol>\n
      Schritt 1: Erstelle ein CircleCI-Konto<\/h3>\n
      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.<\/p>\n
      Schritt 2: Erstelle die Konfigurationsdatei<\/h3>\n
      Erstelle im Stammverzeichnis deines Projekts den Ordner .circleci<\/strong>, falls er noch nicht existiert, und erstelle in diesem Ordner eine Datei config.yml<\/strong>. In dieser Datei wird die Konfiguration deines Workflows gespeichert.<\/p>\n
      Schritt 3: Konfiguriere dein Repository<\/h3>\n
      Sobald du eingeloggt bist, navigierst du zu deinem CircleCI Dashboard<\/a>, klickst in der linken Seitenleiste auf Projekte<\/strong>, um eine Liste der Repositories zu sehen, und klickst auf die Schaltfl\u00e4che Projekt einrichten<\/strong> f\u00fcr das Repository, das du konfigurieren m\u00f6chtest.<\/p>\n
      \"Konfiguriere
      Konfiguriere dein Repository<\/figcaption><\/figure>\n
      Daraufhin wird ein Dialog ge\u00f6ffnet, in dem CircleCI automatisch deine Konfigurationsdatei erkennt. Klicke dann auf die Schaltfl\u00e4che Projekt ein richten<\/strong>. CircleCI kann nun auf deine Codebasis zugreifen und die definierten Workflows bei Code\u00e4nderungen ausf\u00fchren.<\/p>\n
      Schritt 4: Definiere die Aufgabe deines Workflows<\/h3>\n
      Der wichtigste Schritt beim Einrichten deiner CircleCI-Pipeline ist die Definition deines Workflows in der Datei config.yml<\/strong>. Hier legst du die Reihenfolge der Aktionen fest, die deine Pipeline ausf\u00fchren soll. Das ist sozusagen die Blaupause f\u00fcr deine Reise von der Entwicklung zur Produktion.<\/p>\n
      Zun\u00e4chst legst du die CircleCI-Version fest, die derzeit 2.1<\/code> ist:<\/p>\n
      version: 2.1<\/code><\/pre>\n
      Du brauchst einen build<\/code> Job f\u00fcr jedes React-Projekt. Dieser Job k\u00fcmmert sich um die grundlegenden Aufgaben, die deinen Code bereit f\u00fcr die Bereitstellung machen. Dazu geh\u00f6ren die Installation der erforderlichen Abh\u00e4ngigkeiten, die Kompilierung deines Codes, die Durchf\u00fchrung von Tests, um sicherzustellen, dass alles reibungslos funktioniert, die \u00dcberpr\u00fcfung des Codes auf seine Qualit\u00e4t und schlie\u00dflich die Auslieferung des Codes an sein Ziel.<\/p>\n
      Da React-Projekte oft Tools wie Node.js<\/a> ben\u00f6tigen, um die Arbeit zu erledigen, vereinfacht CircleCI den Zugang zu diesen Tools, indem es sie als vorgefertigte Pakete<\/a> anbietet. In diesem Tutorial gibst du die Version von Node.js an, die du verwenden m\u00f6chtest. Wir verwenden Node.js v20<\/a>.<\/p>\n
      jobs:\n  build:\n    docker:\n      - image: cimg\/node:20.5.0<\/code><\/pre>\n
      Dieser Job wird verschiedene Schritte ausf\u00fchren, also lass uns diese erstellen. Der erste Schritt ist checkout<\/code>, der die neueste Version deines Codes aus dem Repository holt, damit alle nachfolgenden Aktionen mit dem neuesten Code funktionieren.<\/p>\n
      steps:\n  - checkout<\/code><\/pre>\n
      Jetzt geht es ans Eingemachte – die Dinge zu erledigen. Die Schritte, die auf checkout<\/code> folgen, decken die wichtigsten Aufgaben ab: Installieren von Abh\u00e4ngigkeiten, Kompilieren des Quellcodes, Ausf\u00fchren von Unit-Tests und die Verwendung von ESLint, um deinen Code auf rote Fahnen zu \u00fcberpr\u00fcfen.<\/p>\n
      steps:\n  - checkout\n  - run:\n      name: Install Dependencies\n      command: npm install\n  - run:\n      name: Compile Source Code\n      command: npm run build\n  - run:\n      name: Run Unit Tests\n      command: npm test\n  - run:\n      name: Run ESLint\n      command: npm run lint<\/code><\/pre>\n
      Jeder 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\u00e4uft.<\/p>\n
      Ausl\u00f6sen der kontinuierlichen Bereitstellung in Kinsta<\/h4>\n
      Der letzte Schritt im build<\/code> Job besteht darin, die Bereitstellung an Kinsta \u00fcber die API zu initiieren. Daf\u00fcr sind zwei Werte erforderlich: dein API-Schl\u00fcssel<\/strong> und deine App-ID<\/strong>, die nicht \u00f6ffentlich sein sollten. Diese Werte werden als Umgebungsvariablen<\/a> in CircleCI gespeichert. Definieren wir nun die Bereitstellungsphase im Workflow:<\/p>\n
      - run:\n    name: Deploy to Kinsta\n    command: |\n      curl -i -X POST \n        https:\/\/api.kinsta.com\/v2\/applications\/deployments \n        -H \"Authorization: Bearer $API_KEY\" \n        -H \"Content-Type: application\/json\" \n        -d '{\n          \"app_id\": \"'\"$APP_ID\"'\",\n          \"branch\": \"main\"\n        }'<\/code><\/pre>\n
      Im mitgelieferten Code f\u00fchrst du den cURL-Befehl aus, um die Bereitstellung mit Hilfe der in deinen Umgebungsvariablen gespeicherten Anwendungs-ID auszul\u00f6sen. Erinnere dich daran, dass der Zugriff auf die Umgebungsvariablen mit der folgenden Syntax erfolgt:<\/p>\n
      \"$VARIABLE_NAME\"<\/code><\/pre>\n
      Speichern von Umgebungsvariablen mit CircleCI<\/h4>\n
      Umgebungsvariablen sind entscheidend f\u00fcr die Sicherheit und Flexibilit\u00e4t deiner kontinuierlichen Integrations- und Deployment-Workflows. Um Umgebungsvariablen in CircleCI zu speichern, befolge diese Schritte:<\/p>\n
        \n
      1. \u00d6ffne dein Projekt, um alle Details zu deiner Pipeline zu sehen, und klicke auf die Schaltfl\u00e4che Projekteinstellungen<\/strong>.<\/li>\n
      2. Klicke auf die Registerkarte Umgebungsvariablen<\/strong> in der Seitenleiste und f\u00fcge deine Umgebungsvariablen hinzu.<\/li>\n<\/ol>\n
        \"Speichere
        Speichere die Umgebungsvariablen<\/figcaption><\/figure>\n
        Schritt 5: Workflow-Konfiguration<\/h3>\n
        Nachdem du deine Aufgabe(n) eingerichtet und in organisierte Schritte gegliedert hast, geht es in der n\u00e4chsten Phase darum, deinen Workflow zu konfigurieren<\/a>. Der Workflow fungiert als Orchestrator, der die Reihenfolge der Auftr\u00e4ge steuert und bestimmte Filter und Regeln enth\u00e4lt<\/a>, die bestimmen, wie diese Auftr\u00e4ge ausgef\u00fchrt werden.<\/p>\n
        In diesem Leitfaden erstellen wir einen Workflow, der den Build-Job ausschlie\u00dflich dann ausl\u00f6st, wenn es einen Push oder \u00c4nderungen am Code im main<\/code> Branch des Repositorys gibt:<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main<\/code><\/pre>\n
        Diese Konfiguration erfolgt mithilfe von Filtern, mit denen du steuern kannst, wann ein Job auf der Grundlage bestimmter Bedingungen ausgef\u00fchrt wird. Du kannst auch Ausl\u00f6ser einbauen, um festzulegen, wann der Workflow ausgef\u00fchrt werden soll (Beispiel: t\u00e4glich um 12 Uhr UTC):<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main\n    triggers:\n      - schedule:\n          cron: \"0 0 * * *\"<\/code><\/pre>\n
        Der obige Workflow enth\u00e4lt eine trigger<\/code>, die mit dem Schl\u00fcsselwort schedule<\/code> definiert ist. Der cron-Ausdruck \"0 0 * * *\"<\/code> entspricht der t\u00e4glichen Ausf\u00fchrung des Workflows um Mitternacht UTC.<\/p>\n
        In einem cron-Ausdruck gibt es f\u00fcnf durch Leerzeichen getrennte Felder, die jeweils f\u00fcr eine andere Zeiteinheit stehen:<\/p>\n
          \n
        1. Minute (0-59):<\/strong> Das erste Feld steht f\u00fcr die Minute der Stunde, die auf 0<\/code> gesetzt wird, um zu Beginn der Stunde auszul\u00f6sen.<\/li>\n
        2. Stunde (0-23):<\/strong> Das zweite Feld bezeichnet die Stunde des Tages, die auf 0<\/code> f\u00fcr Mitternacht eingestellt ist.<\/li>\n
        3. Tag des Monats (1-31):<\/strong> Das dritte Feld bezeichnet den Tag, der durch ein Sternchen (*<\/code>) f\u00fcr einen beliebigen Tag angezeigt wird.<\/li>\n
        4. Monat (1-12):<\/strong> Das vierte Feld steht f\u00fcr den Monat, gekennzeichnet durch ein Sternchen (*<\/code>) f\u00fcr einen beliebigen Monat.<\/li>\n
        5. Wochentag (0-6, wobei 0 f\u00fcr Sonntag steht):<\/strong> Das f\u00fcnfte Feld steht f\u00fcr den Wochentag, der ebenfalls mit einem Sternchen (*<\/code>) f\u00fcr einen beliebigen Tag gekennzeichnet ist.<\/li>\n<\/ol>\n
          Mit dieser Workflow-Konfiguration kannst du effektiv steuern, wann und unter welchen Bedingungen deine definierten Jobs ausgef\u00fchrt werden, um eine effiziente und optimierte CI\/CD-Pipeline zu erhalten.<\/p>\n
          Schritt 6: \u00dcbertragen und Beobachten<\/h3>\n
          Sobald dein Workflow erfolgreich konfiguriert ist, \u00fcbergibst du deine \u00c4nderungen an dein Versionskontroll-Repository. CircleCI erkennt automatisch das Vorhandensein der Konfigurationsdatei und l\u00f6st deine definierten Workflows bei Code\u00e4nderungen aus.<\/p>\n
          \"Details
          Details zum CircleCI-Job<\/figcaption><\/figure>\n
          Klicke auf den Build-Job, um seine Details zu \u00fcberpr\u00fcfen. Wenn du mehr als einen Job hast, werden sie alle aufgelistet. Wenn du auf einen Auftrag klickst, werden auf der Registerkarte SCHRITTE<\/strong> alle Schritte angezeigt, die der Auftrag ausgef\u00fchrt hat und ob sie erfolgreich waren oder nicht.<\/p>\n
          \"Job-Schritte\"
          Job-Schritte<\/figcaption><\/figure>\n
          Du kannst auch auf jeden Schritt klicken, um weitere Details zu sehen. Wenn du auf den Schritt Deploy to Kinsta<\/strong> klickst, siehst du weitere Details \u00fcber die API-Anfrage und erf\u00e4hrst, ob sie erfolgreich war:<\/p>\n
          \"Schrittinformationen\"
          Schrittinformationen<\/figcaption><\/figure>\n