{"id":55123,"date":"2023-08-21T14:00:27","date_gmt":"2023-08-21T12:00:27","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=55123&preview=true&preview_id=55123"},"modified":"2023-09-25T13:25:54","modified_gmt":"2023-09-25T11:25:54","slug":"react-continuous-deployment","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/react-continuous-deployment\/","title":{"rendered":"Continuous deployment van React apps met CircleCI en Kinsta API"},"content":{"rendered":"

Continuous deployment is cruciaal geworden in het snel evoluerende landschap van softwareontwikkeling<\/a>. Het belooft snellere releasecycli, minder menselijke fouten en uiteindelijk een betere gebruikerservaring.<\/p>\n

Softwaredevelopment is het oplossen van problemen met code. De weg die software aflegt van de creatie naar de klant bestaat uit talloze fasen, die snelheid, veiligheid en betrouwbaarheid vereisen. Dit is waar continuous deployment schittert.<\/p>\n

Dit artikel legt uit hoe je het CircleCI-platform<\/a> kunt integreren om een continuous integratie en continuous levering\/uitrol (CI\/CD<\/a>) workflow te cre\u00ebren, terwijl je de kracht van de Kinsta API<\/a> gebruikt voor continuous inzet van applicaties – zoals ons React voorbeeld hier. Deze combinatie kan een soepel pad van ontwikkeling naar productie effenen.<\/p>\n

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

Inzicht in continuous deployment<\/h2>\n

Continuous deployment is meer dan alleen een modewoord: het is een paradigmaverschuiving in de wereld van de ontwikkeling van software. Het gaat om het automatiseren van het proces van bouwen, testen en deployen van codewijzigingen naar productieservers.<\/p>\n

De CI\/CD pipeline<\/a>, een fundamenteel onderdeel van continuous deployment, orkestreert het hele proces. Het omvat versiebeheer, geautomatiseerd testen en geautomatiseerde implementatie. Elke fase is cruciaal om ervoor te zorgen dat alleen betrouwbare, geteste code de productie bereikt.<\/p>\n

Wat is CircleCI?<\/h2>\n

CircleCI is een populair hulpmiddel voor het implementeren van CI\/CD. Het integreert met versiebeheersystemen zoals GitHub<\/a>, GitLab<\/a> en Bitbucket<\/a>, waardoor developers de hele CI\/CD-pipeline kunnen automatiseren. De schaalbaarheid, uitbreidbaarheid en ondersteuning voor verschillende programmeertalen<\/a> maken het een veelzijdige tool voor projecten van elke grootte.<\/p>\n

De developers<\/a> van CircleCI defini\u00ebren workflows die automatisch worden geactiveerd bij code-commits. Dit zet de bouw- en testprocessen in gang en na succesvolle voltooiing wordt de code gedeployd in de doelomgeving. Deze hands-off benadering bespaart niet alleen tijd, maar vermindert ook het risico op menselijke fouten tijdens de deployment.<\/p>\n

De Kinsta API begrijpen<\/h2>\n

Met de Kinsta API<\/a> kun je programmatisch communiceren met door Kinsta gehoste services, waarbij het deployen van applicaties deel uitmaakt van de functionaliteit. Wanneer je werkt met CI\/CD workflows, zul je het cURL commando gebruiken om te communiceren met de Kinsta API vanuit de workflow.<\/p>\n

Om de API te gebruiken, moet je een account hebben met ten minste \u00e9\u00e9n WordPress<\/a> site, applicatie<\/a> of database<\/a> in MyKinsta. Je kunt dan een API-sleutel genereren om je toegang tot de API te verifi\u00ebren.<\/p>\n

Om een API-sleutel te genereren:<\/p>\n

    \n
  1. Ga naar je MyKinsta dashboard.<\/li>\n
  2. Navigeer naar de pagina API sleutels <\/strong>(Je naam<\/strong> > Bedrijfsinstellingen<\/strong> > API-sleutels<\/strong>).<\/li>\n
  3. Klik op Maak API sleutel aan<\/strong>.<\/li>\n
  4. Kies een vervaldatum of stel een aangepaste begindatum in en het aantal uren dat de sleutel moet verlopen.<\/li>\n
  5. Geef de sleutel een unieke naam.<\/li>\n
  6. Klik op Genereer<\/strong>.<\/li>\n<\/ol>\n

    Nadat je een API sleutel hebt gemaakt, moet je deze kopi\u00ebren en ergens veilig opslaan (we raden aan een wachtwoordmanager<\/a> te gebruiken), omdat dit de enige keer<\/strong> is dat de sleutel wordt getoond in MyKinsta.<\/p>\n

    Deployment triggeren met Kinsta API<\/h3>\n

    Om een applicatie te deployen naar Kinsta met behulp van de API, heb je de applicatie ID en de naam van de te deployen branch in de Git repository nodig. Je kunt het ID van je applicatie achterhalen door eerst de lijst van je applicaties op te halen<\/a>, die details geeft over elke applicatie, inclusief het ID.<\/p>\n

    Je kunt dan een POST verzoek<\/a> doen naar het API \/applications\/deployments<\/a><\/code> eindpunt met een cURL commando:<\/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
    Dit cURL commando wordt gebruikt in de workflow.<\/p>\n
    Aan de slag met CircleCI<\/h2>\n
    Om aan de slag te gaan met CircleCI heb je broncode nodig die gehost wordt op de Git provider van je voorkeur. Voor deze tutorial gebruiken we de site builder applicatie<\/a> die ontwikkeld is voor de tutorial over Hoe maak je een WordPress site met Kinsta API<\/a>. Voel je vrij om de repository te gebruiken door ernaar te navigeren op GitHub en te kiezen voor: Use this template<\/strong> > Create a new repository<\/strong>.<\/p>\n
    In de React<\/a>-applicatie worden unit tests gemaakt om elk onderdeel te testen. ESLint<\/a> wordt ook gebruikt om een perfecte syntaxis en codeopmaak af te dwingen. Laten we een CI\/CD workflow opzetten die bouwt, test, ervoor zorgt dat de syntaxis van onze code correct is en uiteindelijk naar Kinsta uitrolt met behulp van de API.<\/p>\n
    Laten we, om te beginnen, enkele belangrijke concepten verkennen:<\/p>\n
      \n
    1. Workflows:<\/strong> CircleCI is gebaseerd op workflows – gedefinieerde reeksen taken die de fasen van je CI\/CD pipeline schetsen. Workflows kunnen verschillende stappen bevatten, zoals bouwen, testen, implementeren en meer.<\/li>\n
    2. Jobs:<\/strong> Jobs zijn individuele werkeenheden binnen een workflow. Elke job voert een specifieke taak uit, zoals het compileren van code, het uitvoeren van tests of het deployen naar een server. Deze jobs kunnen ook verschillende stappen bevatten die achter elkaar worden uitgevoerd (parallelle uitvoering), zodat als er \u00e9\u00e9n mislukt, de hele job mislukt.<\/li>\n<\/ol>\n
      Stap 1: Maak een CircleCI account aan<\/h3>\n
      Bezoek de CircleCI website en maak een account aan als je er nog geen hebt. Je kunt je aanmelden met de Git provider van je voorkeur. Dat maakt het makkelijker om toegang te krijgen tot je repositories zonder verdere configuratie.<\/p>\n
      Stap 2: Maak het configuratiebestand<\/h3>\n
      Maak in de hoofdmap van je project een .circleci<\/strong> map aan als die nog niet bestaat, en maak in die map een config.yml<\/strong> bestand aan. Dit bestand bevat de configuratie van je workflow.<\/p>\n
      Stap 3: Configureer je archief<\/h3>\n
      Zodra je bent ingelogd, navigeer je naar je CircleCI dashboard<\/a>, klik je op Projects <\/b>in de linker zijbalk om een lijst met repositories te zien en klik je op de knop Set Up Project <\/strong>voor de repository die je wilt configureren.<\/p>\n
      \"Configureer
      Configureer je repository.<\/figcaption><\/figure>\n
      Er wordt een dialoogvenster geopend waarin CircleCI automatisch je configuratiebestand detecteert. Klik vervolgens op de knop Set Up Project<\/strong>. CircleCI heeft nu toegang tot je codebase en voert de gedefinieerde workflows uit bij codewijzigingen.<\/p>\n
      Stap 4: Definieer de taak van je workflow<\/h3>\n
      De kern van het opzetten van je CircleCI pipeline ligt in deze cruciale stap: het defini\u00ebren van je workflow in het config.yml<\/strong> bestand. Dit is waar je de volgorde van acties orkestreert die je pipeline zal uitvoeren. Zie dit als het schetsen van de blauwdruk voor je reis van development naar productie.<\/p>\n
      Dit begint met het defini\u00ebren van de CircleCI versie, die momenteel 2.1<\/code> is:<\/p>\n
      version: 2.1<\/code><\/pre>\n
      Voor elk React project heb je een build<\/code> job nodig. Deze taak pakt de fundamentele taken aan die je code klaar maken voor deployment. Deze taken bevatten het installeren van de benodigde dependencies, het compileren van je code, het uitvoeren van tests om te zorgen dat alles goed werkt, het controleren van de code op kwaliteit en tot slot het pushen van de code naar zijn bestemming.<\/p>\n
      Omdat React projecten vaak tools zoals Node.js<\/a> nodig hebben om de klus te klaren, vereenvoudigt CircleCI de toegang tot deze tools door ze als voorverpakte images<\/a> aan te bieden. Geef in deze tutorial aan welke versie van Node.js je wilt gebruiken. Laten we Node.js v20<\/a> gebruiken.<\/p>\n
      jobs:\n  build:\n    docker:\n      - image: cimg\/node:20.5.0<\/code><\/pre>\n
      Deze opdracht zal verschillende stappen uitvoeren, dus laten we ze maken. De eerste stap is checkout<\/code>, die de laatste versie van je code ophaalt uit de repository, zodat alle volgende acties werken met de nieuwste code.<\/p>\n
      steps:\n  - checkout<\/code><\/pre>\n
      Nu het echte werk – dingen gedaan krijgen. De stappen die volgen op checkout<\/code> hebben betrekking op belangrijke taken: het installeren van dependencies, het compileren van de sourcecode, het uitvoeren van unit tests en het gebruik van ESLint om je code te inspecteren op red flags.<\/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
      Elke stap heeft, net als wegwijzers op een reis, een naam om je te helpen bijhouden wat er gebeurt als de workflow in volle gang is. Deze duidelijkheid maakt het gemakkelijk om problemen op te lossen en ervoor te zorgen dat alles op schema blijft terwijl je workflow voor je aan het werk gaat.<\/p>\n
      Het triggeren van continuous deployment naar Kinsta<\/h4>\n
      De laatste stap in de build<\/code> job is het starten van de deployment naar Kinsta via de API. Hiervoor zijn twee waarden nodig: je API sleutel<\/strong> en App ID<\/strong>, die niet openbaar mogen zijn. Deze waarden worden bewaard als omgevingsvariabelen<\/a> in CircleCI. Laten we nu de deploymentfase in de workflow defini\u00ebren:<\/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
      In de bijgeleverde code voer je het cURL commando uit om de deployment te triggeren met behulp van de Application ID die is opgeslagen in je omgevingsvariabelen. Onthoud dat omgevingsvariabelen toegankelijk zijn met de syntaxis:<\/p>\n
      \"$VARIABLE_NAME\"<\/code><\/pre>\n
      Omgevingsvariabelen opslaan met CircleCI<\/h4>\n
      Omgevingsvariabelen zijn cruciaal voor het handhaven van de veiligheid en flexibiliteit van je continuous integratie en deployment workflows. Volg deze stappen om omgevingsvariabelen op te slaan in CircleCI:<\/p>\n
        \n
      1. Open je project om alle details van je pipeline te bekijken en klik op de knop Project Settings<\/strong>.<\/li>\n
      2. Klik op het tabblad Environment Variables <\/b>in de zijbalk en voeg je omgevingsvariabelen toe.<\/li>\n<\/ol>\n
        \"Sla
        Sla de omgevingsvariabelen op.<\/figcaption><\/figure>\n
        Stap 5: Configuratie workflow<\/h3>\n
        Nu je taak of taken zijn ingesteld en gestructureerd in georganiseerde stappen, bestaat de volgende fase uit het configureren van je workflow<\/a>. De workflow fungeert als een orchestrator, die de volgorde van taken begeleidt en specifieke filters<\/a> en regels bevat om te bepalen hoe deze taken worden uitgevoerd.<\/p>\n
        In deze tutorial maken we een workflow die de bouwtaak uitsluitend triggert als er een push of wijzigingen zijn in de code op de repository’s main<\/code> branch:<\/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
        Deze configuratie wordt bereikt met behulp van filters, waarmee je kunt bepalen wanneer een taak wordt uitgevoerd op basis van bepaalde voorwaarden. Je kunt ook triggers inbouwen om te plannen wanneer de workflow moet worden uitgevoerd (voorbeeld: dagelijks om 12 uur 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
        De bovenstaande workflow heeft een trigger<\/code> gedefinieerd met het schedule<\/code> keyword. De cron expressie \"0 0 * * *\"<\/code> komt overeen met het dagelijks plannen van de workflow om middernacht UTC.<\/p>\n
        In een cron expressie zijn er vijf velden gescheiden door spaties, die elk een andere tijdseenheid vertegenwoordigen:<\/p>\n
          \n
        1. Minuut (0-59):<\/strong> Het eerste veld vertegenwoordigt de minuut van het uur, ingesteld op 0<\/code> om aan het begin van het uur te triggeren.<\/li>\n
        2. Uur (0-23):<\/strong> Het tweede veld geeft het uur van de dag aan, ingesteld op 0<\/code> voor middernacht.<\/li>\n
        3. Dag van de maand (1-31):<\/strong> Het derde veld geeft de dag aan, aangegeven met een sterretje (*<\/code>) voor een willekeurige dag.<\/li>\n
        4. Maand (1-12):<\/strong> Het vierde veld geeft de maand aan, aangegeven met een sterretje (*<\/code>) voor een willekeurige maand.<\/li>\n
        5. Dag van de week (0-6, waarbij 0 zondag is):<\/strong> Het vijfde veld geeft de dag van de week aan, ook gemarkeerd met een sterretje (*<\/code>) voor elke dag.<\/li>\n<\/ol>\n
          Met deze workflow configuratie kun je effectief beheren wanneer en onder welke omstandigheden je gedefinieerde taken worden uitgevoerd, waardoor je een effici\u00ebnte en gestroomlijnde CI\/CD pipeline behoudt.<\/p>\n
          Stap 6: Vastleggen en observeren<\/h3>\n
          Zodra je workflow succesvol is geconfigureerd, commit je je wijzigingen naar je versiebeheerrepository. CircleCI detecteert automatisch de aanwezigheid van het configuratiebestand en activeert je gedefinieerde workflows bij codewijzigingen.<\/p>\n
          \"CircleCI
          CircleCI job details.<\/figcaption><\/figure>\n
          Klik op de build job om de details te bekijken. Als je meer dan \u00e9\u00e9n job hebt, worden ze allemaal weergegeven. Als je op een job klikt, toont het tabblad STEPS <\/b>alle stappen die de job heeft uitgevoerd en of deze succesvol of mislukt zijn.<\/p>\n
          \"Stappen
          Stappen in de job.<\/figcaption><\/figure>\n
          Je kunt ook op elke stap klikken om meer details te zien. Als je op de stap Deploy to Kinsta<\/strong> klikt, zie je meer details over het API verzoek en weet je of het is gelukt:<\/p>\n
          \"Stapinformatie.\"
          Stapinformatie.<\/figcaption><\/figure>\n