Continuous deployment is cruciaal geworden in het snel evoluerende landschap van softwareontwikkeling. Het belooft snellere releasecycli, minder menselijke fouten en uiteindelijk een betere gebruikerservaring.

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.

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

Inzicht in continuous deployment

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.

De CI/CD pipeline, 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.

Wat is CircleCI?

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

De developers van CircleCI definiëren 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.

De Kinsta API begrijpen

Met de Kinsta API 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.

Om de API te gebruiken, moet je een account hebben met ten minste één WordPress site, applicatie of database in MyKinsta. Je kunt dan een API-sleutel genereren om je toegang tot de API te verifiëren.

Om een API-sleutel te genereren:

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

Nadat je een API sleutel hebt gemaakt, moet je deze kopiëren en ergens veilig opslaan (we raden aan een wachtwoordmanager te gebruiken), omdat dit de enige keer is dat de sleutel wordt getoond in MyKinsta.

Deployment triggeren met Kinsta API

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, die details geeft over elke applicatie, inclusief het ID.

Je kunt dan een POST verzoek doen naar het API /applications/deployments eindpunt met een cURL commando:

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"
  }'

Dit cURL commando wordt gebruikt in de workflow.

Aan de slag met CircleCI

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 die ontwikkeld is voor de tutorial over Hoe maak je een WordPress site met Kinsta API. Voel je vrij om de repository te gebruiken door ernaar te navigeren op GitHub en te kiezen voor: Use this template > Create a new repository.

In de React-applicatie worden unit tests gemaakt om elk onderdeel te testen. ESLint 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.

Laten we, om te beginnen, enkele belangrijke concepten verkennen:

  1. Workflows: 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.
  2. Jobs: 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 één mislukt, de hele job mislukt.

Stap 1: Maak een CircleCI account aan

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.

Stap 2: Maak het configuratiebestand

Maak in de hoofdmap van je project een .circleci map aan als die nog niet bestaat, en maak in die map een config.yml bestand aan. Dit bestand bevat de configuratie van je workflow.

Stap 3: Configureer je archief

Zodra je bent ingelogd, navigeer je naar je CircleCI dashboard, klik je op Projects in de linker zijbalk om een lijst met repositories te zien en klik je op de knop Set Up Project voor de repository die je wilt configureren.

Configureer je repository.
Configureer je repository.

Er wordt een dialoogvenster geopend waarin CircleCI automatisch je configuratiebestand detecteert. Klik vervolgens op de knop Set Up Project. CircleCI heeft nu toegang tot je codebase en voert de gedefinieerde workflows uit bij codewijzigingen.

Stap 4: Definieer de taak van je workflow

De kern van het opzetten van je CircleCI pipeline ligt in deze cruciale stap: het definiëren van je workflow in het config.yml 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.

Dit begint met het definiëren van de CircleCI versie, die momenteel 2.1 is:

version: 2.1

Voor elk React project heb je een build 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.

Omdat React projecten vaak tools zoals Node.js nodig hebben om de klus te klaren, vereenvoudigt CircleCI de toegang tot deze tools door ze als voorverpakte images aan te bieden. Geef in deze tutorial aan welke versie van Node.js je wilt gebruiken. Laten we Node.js v20 gebruiken.

jobs:
  build:
    docker:
      - image: cimg/node:20.5.0

Deze opdracht zal verschillende stappen uitvoeren, dus laten we ze maken. De eerste stap is checkout, die de laatste versie van je code ophaalt uit de repository, zodat alle volgende acties werken met de nieuwste code.

steps:
  - checkout

Nu het echte werk – dingen gedaan krijgen. De stappen die volgen op checkout 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.

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 lint

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.

Het triggeren van continuous deployment naar Kinsta

De laatste stap in de build job is het starten van de deployment naar Kinsta via de API. Hiervoor zijn twee waarden nodig: je API sleutel en App ID, die niet openbaar mogen zijn. Deze waarden worden bewaard als omgevingsvariabelen in CircleCI. Laten we nu de deploymentfase in de workflow definiëren:

- 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"
        }'

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:

"$VARIABLE_NAME"

Omgevingsvariabelen opslaan met CircleCI

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:

  1. Open je project om alle details van je pipeline te bekijken en klik op de knop Project Settings.
  2. Klik op het tabblad Environment Variables in de zijbalk en voeg je omgevingsvariabelen toe.
Sla de omgevingsvariabelen op.
Sla de omgevingsvariabelen op.

Stap 5: Configuratie workflow

Nu je taak of taken zijn ingesteld en gestructureerd in georganiseerde stappen, bestaat de volgende fase uit het configureren van je workflow. De workflow fungeert als een orchestrator, die de volgorde van taken begeleidt en specifieke filters en regels bevat om te bepalen hoe deze taken worden uitgevoerd.

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 branch:

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

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):

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
    triggers:
      - schedule:
          cron: "0 0 * * *"

De bovenstaande workflow heeft een trigger gedefinieerd met het schedule keyword. De cron expressie "0 0 * * *" komt overeen met het dagelijks plannen van de workflow om middernacht UTC.

In een cron expressie zijn er vijf velden gescheiden door spaties, die elk een andere tijdseenheid vertegenwoordigen:

  1. Minuut (0-59): Het eerste veld vertegenwoordigt de minuut van het uur, ingesteld op 0 om aan het begin van het uur te triggeren.
  2. Uur (0-23): Het tweede veld geeft het uur van de dag aan, ingesteld op 0 voor middernacht.
  3. Dag van de maand (1-31): Het derde veld geeft de dag aan, aangegeven met een sterretje (*) voor een willekeurige dag.
  4. Maand (1-12): Het vierde veld geeft de maand aan, aangegeven met een sterretje (*) voor een willekeurige maand.
  5. Dag van de week (0-6, waarbij 0 zondag is): Het vijfde veld geeft de dag van de week aan, ook gemarkeerd met een sterretje (*) voor elke dag.

Met deze workflow configuratie kun je effectief beheren wanneer en onder welke omstandigheden je gedefinieerde taken worden uitgevoerd, waardoor je een efficiënte en gestroomlijnde CI/CD pipeline behoudt.

Stap 6: Vastleggen en observeren

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.

CircleCI job details.
CircleCI job details.

Klik op de build job om de details te bekijken. Als je meer dan één job hebt, worden ze allemaal weergegeven. Als je op een job klikt, toont het tabblad STEPS alle stappen die de job heeft uitgevoerd en of deze succesvol of mislukt zijn.

Stappen in de job.
Stappen in de job.

Je kunt ook op elke stap klikken om meer details te zien. Als je op de stap Deploy to Kinsta klikt, zie je meer details over het API verzoek en weet je of het is gelukt:

Stapinformatie.
Stapinformatie.

Als je je MyKinsta dashboard bekijkt, zul je zien dat de workflow automatisch de rollout start. Zo ziet je complete CircleCI workflow eruit:

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:
                - main

Samenvatting

Je hebt nu met succes een custom deploymentproces gerealiseerd voor je React applicatie naar Kinsta via CircleCI. Deze aanpak geeft je meer flexibiliteit en autoriteit over je deployment, waardoor je team gespecialiseerde stappen binnen het proces kan uitvoeren.

Door CircleCI te gebruiken, zet je een grote stap in de richting van het verbeteren van je ontwikkelmethodologieën. De automatisering van je CI/CD pipeline garandeert niet alleen de kwaliteit van je code, maar versnelt ook je releasecycli.

Hoe gebruik jij de Kinsta API? Welke endpoints zou je graag toegevoegd zien aan de API? Welke Kinsta API gerelateerde tutorial zou je als volgende willen lezen?

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.