Zo bouw je WordPress webapps met een microservices architectuur

WordPress is een krachtig Content Management Systeem (CMS) dat de basis kan leggen voor verschillende soorten sites en apps. Dit maakt gebruik van een typische ‘monolithische architectuur’, maar naarmate een site groeit, is dit misschien niet de beste oplossing. Dit is waar een ‘microservices architectuur’ voordelig kan zijn.

In dit artikel onderzoeken we hoe je WordPress webapps kunt bouwen met behulp van een microservices architectuur. We introduceren ook de Create Block Theme plugin en bespreken hoe deze opwindende oplossing in je ontwikkeling past.

Wat microservices zijn

Voordat je een webapp gaat bouwen, moet je begrijpen wat microservices zijn en hoe ze verschillen van monolithische architecturen.

Bij een monolithische architectuur is er een nauwe koppeling tussen alle onderdelen van een applicatie. Het draait in wezen als een enkele service. Het is een eenvoudige manier om een app te ontwikkelen, hoewel onderhoud en schaalbaarheid een uitdaging kunnen worden naarmate de complexiteit toeneemt.

Met microservices daarentegen kun je de app opsplitsen in een verzameling kleinere services. Elke service is onafhankelijk van elkaar wat betreft ontwikkeling, deployment en schaalbaarheid.

Elke service voert een specifieke taak uit en communiceert met de andere services via een API (Application Programming Interface). Neem bijvoorbeeld een typische e-commerce site met een winkelwagen, kassa, orderverwerking, productpagina en meer.

In een monolithische architectuur zouden al deze functies deel uitmaken van één grote applicatie. WordPress is monolithisch en het gebruik van Woo als je e-commerce platform is een uitstekend voorbeeld.

Als je echter een microservices architectuur implementeert, kun je voor elke taak de juiste technologie gebruiken. Je zou bijvoorbeeld het beste CMS van WordPress kunnen gebruiken voor je contentmarketing. Adobe Commerce zou je productbeheersysteem kunnen zijn. Een kassa-oplossing zoals Bolt zou aan je behoeften kunnen voldoen.

Deze aan elkaar lijmen is mogelijk met microservices. Laten we het vervolgens hebben over waarom microservices een belangrijke overweging zouden moeten zijn voor je volgende project.

Wat microservices onderscheidt van monolithische architecturen

De ‘elevator pitch’ voor microservices is hoe je verschillende technologieën en tools kunt combineren tot een geheel. Er zijn echter nog andere, diepere kenmerken die het vermelden waard zijn:

• Ontkoppeling. Elke service behoudt zijn onafhankelijkheid. Dit betekent dat je voor elke taak de beste technologie kunt gebruiken in plaats van te moeten werken met ongeschikte frameworks.
• Autonomie. In het verlengde daarvan hoeven de services die je integreert niet van elkaar afhankelijk te zijn om goed te presteren.
• Specialisatie. Natuurlijk zal elke service zich richten op zijn eigen taak, wat weer invloed heeft op de prestaties.
• Veerkracht. Een deel van deze inherente en performante troef is dat één storing in een service niet je hele site platlegt.

Naast deze aspecten zijn er nog meer voordelen bij het gebruik van microservices:

• Schaalbaarheid. Je kunt individuele services schalen op basis van individuele behoeften zonder de rest van je app te beïnvloeden.
• Flexibiliteit. We hebben al kort aangegeven hoe je services de beste technologie voor hun taak kunnen gebruiken. Dit geldt zelfs voor de programmeertalen die je gebruikt om ze te maken.
• Snellere ontwikkeling. Je kunt sneller kleine en gerichte services ontwikkelen, de functionaliteit van je service beter begrijpen en het systeem eenvoudiger onderhouden.
• Verbeterde foutisolatie. Met de ‘modulaire’ opzet kun je een service isoleren als deze uitvalt zonder dat dit invloed heeft op je andere services.

Aan de andere kant kunnen microservices complexiteit introduceren voor communicatie, gegevensconsistentie en het beheren van gedistribueerde systemen. Daarom moet je de vereisten van je app zorgvuldig afwegen. Kortom, overweeg zowel de voordelen als de afwegingen voordat je besluit om microservices te gebruiken.

De onderdelen van een microservices architectuur

Zoals je zou verwachten, kan een microservices architectuur uit verschillende componenten bestaan. Deze ‘radertjes’ werken samen in het hele ‘wiel’ om een schaalbare en onderhoudbare app te leveren.

Daarom zijn er een aantal componenten die essentieel zijn voor een soepele implementatie:

• API gateway: Dit is het ingangspunt voor alle clientverzoeken. Het stuurt die verzoeken door naar de juiste microservices. Het kan ook taken afhandelen zoals snelheidsbeperking en authenticatie.
• Service discovery: Je zult een dynamische manier moeten gebruiken om microservices elkaar te laten ontdekken en met elkaar te laten communiceren. Hulpmiddelen zoals Consul of Eureka kunnen hierbij helpen.
• Containerisatie: Het is gebruikelijk om microservices te containeriseren en in te zetten als containers met tools zoals Docker. Zo zorg je voor isolatie voor elke service.
• Orkestratie: Naarmate je meer microservices aan je app toevoegt, wordt het beheer ervan complexer. Een tool als Kubernetes kan helpen om dit servicebeheer te automatiseren.
• Caching: Cachingmechanismen zoals Redis of Memcached verbeteren vaak de prestaties. Dit kan cruciaal zijn, gezien de grotere druk op je backendservices en databases.
• Messaging: Natuurlijk moeten je services ook met elkaar praten. Dit is de taak van ‘asynchrone’ berichtenoplossingen zoals RabbitMQ of Apache Kafka. Deze ‘message brokers’ maken een losse koppeling tussen je microservices mogelijk.

Tools zijn echter maar één aspect van je opstelling. Er zijn nog andere overwegingen, zoals hoe je elke microservice ontwerpt binnen de volledige architectuur.

Ontwerppatronen voor microservices

Je design patterns voor microservices zijn hier net zo belangrijk als elders in je ontwikkelworkflow. Gezien de potentiële complexiteit van je app, is het belangrijk om te overwegen welke patterns de grootste impact zullen hebben. Er zijn er drie die we kunnen aanwijzen:

• Database-per-service: Elke microservice gebruikt zijn eigen dedicated database, wat helpt bij data-isolatie en autonomie.
• API samenstelling: Je kunt microservices samenstellen om services of API’s op een hoger niveau te maken. Deze flexibiliteit en herbruikbaarheid is een groot voordeel.
• Event-driven architectuur: Hier communiceren services via events. Dit bevordert een lossere koppeling en asynchrone verwerking.

Het is ook belangrijk om rekening te houden met specifieke ontwerppatronen voor de tools die je gebruikt om je architectuur te bouwen. Docker en Kubernetes hebben bijvoorbeeld allebei typische patterns waarmee je rekening moet houden naast het globale ontwerp van je architectuur.

Begrijp echter dat niet elk onderdeel een microservice hoeft te zijn. Het juiste idee is om te beginnen met de belangrijkste services en de architectuur in de loop van de tijd verder te ontwikkelen. Later zullen we hier dieper op ingaan. Eerst moeten we kijken hoe we de voorkant kunnen ontwikkelen.

Introductie van de Create Block Theme plugin

WordPress zal waarschijnlijk ergens in je architectuur voorkomen, omdat het in veel opzichten uitstekend is. Eén daarvan is het gebruiksgemak aan de frontend. Thema’s zijn een kernonderdeel van het platform en het maken van je eigen thema’s is veel eenvoudiger nu er plugins zijn zoals Create Block Theme.

Deze plugin is de spirituele opvolger van het Underscores startersthema, maar is volledig compatibel met volledige sitebewerking (FSE). Je kunt snel een startthema maken, de volledige kracht van de editor benutten en gebruikmaken van alle aanpassingsopties. Het werkt als een typische WordPress plugin, met de optie om het later te exporteren als een onafhankelijk thema.

Door de plugin Create Block Theme te gebruiken naast een microservices architectuur kun je alles aan elkaar ‘lijmen’. Je kunt bijvoorbeeld Block Patterns en herbruikbare Blocks gebruiken op verschillende WordPress sites. Dit bevordert hergebruik van code en consistentie, maar het kan ook een uniforme voorkant geven aan alle individuele services die je gebruikt.

We zullen later in dit artikel dieper ingaan op de specifieke aspecten van het gebruik van Block Theme Create. Laten we het nu hebben over headless WordPress en hoe microservices dit kunnen beïnvloeden.

De kruising tussen headless WordPress en een microservices architectuur

Als je de front- en backends van WordPress wilt ontkoppelen, kunnen microservices een natuurlijke stap voorwaarts zijn. Bij typische headless WordPress is het platform alleen bedoeld voor content management. Het kan zijn dat het als API wordt gebruikt.

Door headless WordPress te combineren met een microservices architectuur kun je:

• Gebruik maken van de WordPress REST API. WordPress biedt een ingebouwde REST API waarmee je inhoud programmatisch kunt ophalen en manipuleren. Je kunt deze API gebruiken om je microservices met WordPress te integreren.
• Onafhankelijke schaalbaarheid van je front- en backends krijgen. Met twee onafhankelijke delen van je site kun je beide schalen en betere prestaties bereiken. Ondanks de complexiteit krijg je flexibiliteit.

Vervolgens willen we ons iets meer richten op de REST API. Dit is hoe je microservices zult consumeren, dus het is een essentieel onderdeel van de hele keten.

Microservices en de WordPress REST API

De WordPress REST API speelt een cruciale rol bij het mogelijk maken van de integratie tussen je site en microservices. Met zijn endpoints kun je WordPress posts, pagina’s, gebruikers, taxonomieën en meer ophalen en manipuleren met uitvoer in JSON.

[ 
  {
    "id": 1,
    "date": "2020-04-01T10:30:00",
    "date_gmt": "2020-04-01T14:30:00",
    "guid": {
      "rendered": "https://example.com/?p=1"
    },
    "modified": "2020-04-01T10:30:00",
    "modified_gmt": "2020-04-01T14:30:00",
    "slug": "hello-world",
    "status": "publish",
    "type": "post",
    "link": "https://example.com/hello-world/",
    "title": {
      "rendered": "Hello World"
    },
    …

Als zodanig is de REST API de hub voor alle andere services in de architectuur. Dit betekent dat je moet kiezen welke huidige site services je eruit wilt halen als microservices. We zullen hier later in deze post dieper op ingaan.

In een notendop komt het erop neer dat je de verschillende functionaliteiten en verantwoordelijkheden binnen je webapp moet identificeren. Van daaruit kun je ze opsplitsen in onafhankelijke, gerichte en inzetbare microservices.

Een webapp bouwen met Create Block Theme en microservices

De rest van dit artikel gaat over de basisprincipes van microservices en headless WordPress. Het zal veel in holistische termen behandelen, omdat het eigenlijke proces specifiek zal zijn voor jouw behoeften.

Laten we desondanks eens duiken in het proces van het bouwen van een web app met behulp van microservices en de Create Block Theme plugin. De eerste stap is het opzetten van je ontwikkelomgeving.

1. Een ontwikkelomgeving opzetten

Elke app begint met een ruimte om hem te maken. Daarom heb je een ontwikkelomgeving nodig. Er zijn twee locaties voor je ontwikkelomgeving: je lokale computer en je server.

Er zijn veel manieren om een lokale ontwikkelomgeving op te zetten, hoewel wij (natuurlijk) DevKinsta aanbevelen:

We raden ook een testomgeving aan, omdat je veranderingen moet kunnen testen voordat je ze uitrolt. Als je kiest voor DevKinsta en je bent een klant van Kinsta, dan krijg je meer connectiviteit met je server:

DevKinsta installeert Docker voor je, wat helpt om nog een taak van je lijstje af te vinken. Misschien wil je Kubernetes gebruiken voor orkestratie, dus dit is het moment om het te installeren. Kinsta gebruikt dit voor Database Hosting en Applicatie Hosting en andere taken, en je kunt het downloaden binnen Docker Desktop:

Vanaf hier wil je ook alle andere frameworks instellen die je nodig hebt om je thema te ontwikkelen. Je zult echter niets kunnen doen zonder de Create Block Theme plugin, dus laten we daar nu naar kijken.

2. De plugin Create Block Theme installeren

Zodra je je ontwikkelomgeving hebt ingesteld, kun je aan de slag met de Create Block Theme plugin om je eigen blokthema te maken. Je hebt ook het volgende nodig:

• Een WordPress website om mee te werken.
• Een coderingseditor die je graag gebruikt.
• De Create Block Theme plugin.

Je kunt de plugin op de typische WordPress manier installeren. Van daaruit ga je naar de link Appearance > Create Block Theme in WordPress:

Als je de Appearance tab bekijkt, kun je de Manage Theme Fonts optie zien. Maak een blokthema aan geeft ook toegang tot deze optie, die in wezen de WordPress 6.5 Font Library feature is.

Op de pagina Create Block Theme zou je een lijst met opties moeten zien om een nieuw thema te genereren. We zullen ze hier niet allemaal doorlopen, maar we kiezen ervoor om Twenty Twenty-Four te klonen. Dit toont een reeks opties en velden:

Als het goed is, worden dit de velden voor de thema-identiteit in je style.css bestand. Ze zijn eenvoudig en bestaan uit het kiezen van een naam, schermafbeelding, URL en enkele tags voor de WordPress Themamap.

Zodra je klikt om te bevestigen, ga je weer naar het scherm Appearance > Themes en zie je je nieuwe thema klaarstaan:

In sommige gevallen download je een ZIP bestand van je thema, dat je moet uploaden naar WordPress. Merk op dat je het thema ook kunt exporteren, maar voor ons gebruik zullen we dat nu niet doen.

Tips voor het instellen en gebruiken van Create Block Theme

We zullen ook niet te diep ingaan op het aanpassen van je nieuwe Block thema, omdat dat buiten het bestek van dit artikel valt. Hier zijn echter enkele tips voor het gebruik van het Create Block Theme:

• Je aanpassingen kunnen op twee plaatsen gebeuren. Je kunt de optie Global Styles gebruiken in de Full Site Editor of door het theme.json bestand aan te passen.
• Het is een goed idee om een Block te maken voor je gekozen microservice. Hierover later meer.
• Met Create Block Theme kun je een childthema genereren op basis van het huidige actieve thema. Deze keuze hangt echter af van je doelen.

Laten we het over het laatste punt hebben. Als dit een thema is om te maken en te verspreiden, dan wil je binnen het parentthema werken. Voor je eigen gebruik zou het kunnen werken om alleen het childthema aan te passen. Als vuistregel geldt: hoe minder ‘bevolkt’ een thema aanvankelijk is, hoe meer je binnen het parentthema moet werken.

3. De gekozen microservices uitpakken

Als je blokkenthema klaar is, is het tijd om je microservices nader te bekijken. Een belangrijke beslissing die je moet nemen is welke services ‘micro’ worden

Dit kan een complexe en subjectieve vraag zijn die je eigen behoeften zullen beantwoorden. Er zijn echter een paar factoren waar je op moet letten:

• De mogelijkheden van je site: Kijk naar elke aparte functionaliteit die je site biedt en overweeg om deze op te splitsen in een aparte microservice, zoals betalingsfunctionaliteit.
• Onafhankelijke schaalbaarheid: Een bestaande service die afhankelijk is van onafhankelijke schaalbaarheid zal een goede kandidaat zijn voor microservices. Caching zou hier een voorbeeld van kunnen zijn.
• Technologische diversiteit: Als je af moet stappen van de PHP architectuur van WordPress, is dit weer een andere microservices-kandidaat. Dit kan het geval zijn voor specifieke e-commerce platforms of backend componenten.
• Gegevensisolatie: services met aangepaste vereisten voor gegevensopslag zouden microservices kunnen zijn. Dit is ook het geval als die services geen gegevens hoeven te delen met anderen.

Naar onze mening is het een goed idee om microservices te maken die specifieke API functionaliteit bieden. Dit kan zoeken, betalingsverwerking of authenticatie zijn. Als die services kunnen reageren met andere first-party API’s en externe API’s, maakt dat ze flexibeler en waardevoller.

Je microservices ontwikkelen en deployen

Om aan je microservices te werken en ze uiteindelijk te deployen, zul je moeten vertrouwen op andere tools. Hier zijn enkele belangrijke overwegingen en tools die je kunt gebruiken:

• Docker zal vaak de manier zijn waarop je je microservices containeriseert. Het verpakt de microservice en zijn dependencies samen, waardoor het eenvoudig kan worden gedeployd en geschaald.
• Elke microservice heeft ook een Dockerfile nodig. Hierin moeten de benodigde dependencies, configuraties en runtime-omgeving worden gespecificeerd.
• Gebruik Kubernetes voor containerorkestratie en -beheer. Kinsta biedt een krachtig platform met ingebouwde ondersteuning voor Kubernetes.
• Continue integratie en deployment (CI/CD) pijplijnen kunnen de manier zijn waarop je bouwen, testen en inzetten automatiseert. Tools zoals GitLab en Travis CI kunnen helpen om je CI/CD-processen te stroomlijnen.
• Serverloze functies hebben geen volwaardige server nodig, dus ze zijn geweldig voor microservices. Met platformen zoals AWS Lambda, Google Cloud Functions of Azure Functions kun je code uitvoeren zonder servers in te richten of te beheren.
• API gateways bieden een enkel toegangspunt voor je microservices. Tools zoals Kong of Amazon API Gateway kunnen je helpen bij het beheren en beveiligen van je API’s. Ze kunnen ook taken afhandelen zoals authenticatie, snelheidsbeperking en verzoekroutering.

Nu heb je een WordPress website en microservice die onafhankelijk van elkaar zijn. De laatste stap is om ze te integreren.

4. Microservices integreren met WordPress

Zodra je je microservices hebt ontwikkeld en ingezet, moet je ze integreren met WordPress. Om dit te doen, zul je API calls maken vanuit WordPress naar de endpoints die je microservice blootstelt. Daarom moet je de REST API door en door kennen.

De gebruikelijke manier om dit te doen in WordPress is met wp_remote_get() of wp_remote_post(). Hiermee kun je HTTP verzoeken versturen en de responses afhandelen. Hier is wat voorbeeldcode van hoe het allemaal in elkaar zou passen:

// API endpoint URL

$api_url = 'https://api.example.com/endpoint';

// API request parameters

$params = array(
    'param1' => 'value1',
    'param2' => 'value2',
);


// Make the API request using wp_remote_get
$response = wp_remote_get(add_query_arg($params, $api_url));

// Check if the request was successful
if (is_wp_error($response)) {
    // Handle the error
    $error_message = $response->get_error_message();

    // Log or display the error message
} else {
    // Process the API response
    $response_body = wp_remote_retrieve_body($response);

    $data = json_decode($response_body, true);

    // Use the retrieved data as needed

    // ...
}

Microservices hebben vaak baat bij het asynchroon ophalen van gegevens om te voorkomen dat de main thread wordt geblokkeerd. WordPress kan twee elementen combineren om dit te doen. Je kunt het API Fetch pakket gebruiken, samen met de ondersteuning voor async en defer geïntroduceerd in WordPress 6.3. Je code zou er ongeveer zo uit kunnen zien als hieronder:

import apiFetch from '@wordpress/api-fetch';

// Microservice API endpoint URL
const microserviceUrl = 'https://api.example.com/microservice';
...


// Make the API request to the microservice
apiFetch({
  path: microserviceUrl,
  method: 'GET',
  data: params,
})

  .then((response) => {
    // Process the response
    console.log(response);

    // Use the retrieved data from the microservice

    // ...
  })
...

Je zou ook AJAX kunnen overwegen om dynamische gebruikersinterface (UI) updates uit te voeren.

Natuurlijk zijn goede authenticatie en beveiligingsmaatregelen ook cruciaal. De WordPress REST API bevat een aantal manieren om sessies te authenticeren, zoals cookies, JSON Web Tokens (JWT) of applicatiewachtwoorden. Gezien de afhankelijkheid van externe oplossingen, is het cruciaal om je microservices en site veilig te houden.

Aangezien we een aangepast Block thema gebruiken, is het zinvol om die functionaliteit te gebruiken. Door je microservice toe te voegen aan een Block, kun je deze bijna overal op je site opnemen. Om nog een stap verder te gaan, kun je die functionaliteit zelfs opnemen in een plugin.

Het proces bestaat uit drie onderdelen: het registreren van het Block, het renderen van de inhoud en het verwerken van gegevens. JavaScript is hier de taal van je keuze en de functie registerBlockType zorgt voor de registratie en rendering:

// JavaScript function that builds the Block to enable access within the Block Editor.
( function( blocks, element ) {
    var el = element.createElement;

    blocks.registerBlockType( 'my-micro/stripe-api', {
        title: 'Stripe Payment Gateway',
        icon: 'dashicons-cart',
        category: 'embed',

        edit: function() {
            return el(
                'div',
                {},
                '' // Create the visual elements of the microservice to display within the Block Editor.
            );
        },
…

Dit is een heel eenvoudig voorbeeld van het registreren van een Block, en meer valt buiten het bestek van deze post. Je kunt echter zien dat het eenvoudig is om de Create Block Theme plugin, microservices en WordPress te combineren. Als je de juiste hostingprovider gebruikt, heb je nog een manier om waarde toe te voegen aan je microservicearchitectuur.

Kinsta gebruiken om je WordPress site en microservices te beheren en te schalen

Het hele ecosysteem van Kinsta is zeer geschikt voor het beheren van WordPress sites met behulp van een microservices architectuur. De kern wordt gevormd door de applicatiehosting. Dit kan het eenvoudig maken om gecontaineriseerde microservices te implementeren en vervolgens de andere aanbiedingen van Kinsta te gebruiken om ze te onderhouden.

Automatisch schalen houdt bijvoorbeeld je resources in de gaten om pieken in het verkeer op te vangen. Dit betekent dat je microservices omhoog of omlaag kunnen schalen op basis van de vraag. Je krijgt de prestatievoordelen terwijl de kosten laag blijven.

Kinsta biedt managed hosting voor een reeks databasetypes:

• MySQL
• PostgreSQL
• MariaDB
• Redis

Deze laatste heeft verschillende gebruiksmogelijkheden, zoals een in-memory cache, message broker, vector- en documentendatabase en meer – allemaal zonder SQL.

Deze variëteit betekent dat Kinsta zowel je WordPress als microservice databases aankan zonder dat het je moeite kost. Samen met zijn best-in-class caching, Docker en Kubernetes ondersteuning, gelikte MyKinsta dashboard en meer, heb je het complete pakket om je microservices naast WordPress te hosten.

Samenvatting

WordPress is monolithisch, maar dat weerhoudt het er niet van om microservices te integreren. Dit kan veel voordelen hebben, zoals verbeterde schaalbaarheid, flexibiliteit en snellere ontwikkeling.

Met de plugin Create Block Theme kun je een schone, veilige codebasis creëren voor de rest van je project. Microservices kunnen complexiteit aan je site toevoegen. Door een aangepast Block Theme te gebruiken, kun je die services op de beste manier voor jouw behoeften implementeren. Als je dit combineert met ontwikkeltools zoals DevKinsta en Kinsta’s applicatiehosting, heb je de ideale basis om krachtige, moderne webapps te maken.

Lijkt een microservices architectuur perfect te passen naast de Create Block Theme plugin? Laat ons je gedachten en ervaringen weten in het commentaarveld hieronder!

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).

• Website
• LinkedIn