In de loop der jaren heeft Kinsta aanzienlijke vooruitgang geboekt in het stroomlijnen van websitebeheer via het MyKinsta dashboard. Met dit krachtige dashboard kunnen gebruikers hun sites beheren en verschillende onderhoudsacties uitvoeren, waaronder het herstarten van de PHP engine en het wissen van de cache van hun site.
De introductie van de Kinsta API tilt websitebeheer echter naar een heel nieuw niveau. Developers kunnen nu gebruik maken van de kracht van Kinsta API om het beheerproces te verbeteren, custom interfaces te maken en zelfs planningsapplicaties te bouwen om essentiële taken te automatiseren.
Deze tutorial duikt in de wereld van Kinsta API en legt uit hoe je een React applicatie kunt bouwen voor het plannen van essentiële onderhoudstaken zoals het herstarten van de PHP engine en het wissen van de cache met de Kinsta API.
Hier zie je een live demo van de Site Tools Scheduler applicatie.
De Kinsta API
De Kinsta API is een krachtig hulpmiddel waarmee je programmatisch kunt communiceren met Kinsta’s Managed WordPress Hosting platform. Het kan helpen bij het automatiseren van verschillende taken met betrekking tot de diensten van Kinsta, waaronder het maken van sites, het ophalen van site-informatie, het opvragen van de status van een site en nog veel meer.
Om de API van Kinsta te gebruiken, moet je een account hebben met ten minste één WordPress site, applicatie of database in MyKinsta. Je moet ook een API sleutel genereren om je te authenticeren en toegang te krijgen tot je account via de API.
Om een API-sleutel te genereren:
- Ga naar je MyKinsta dashboard.
- Navigeer naar de pagina API sleutels (Je naam > Bedrijfsinstellingen > API sleutels).
- Klik op Maak API sleutel aan.
- Kies een vervaldatum of stel een aangepaste begindatum in en het aantal uren dat de sleutel moet verlopen.
- Geef de sleutel een unieke naam.
- Klik op Genereer.
Nadat je een API sleutel hebt gemaakt, moet je deze kopiëren en ergens veilig opslaan (je kunt een wachtwoordmanager gebruiken), want dit is de enige keer dat de sleutel wordt getoond binnen MyKinsta. Je kunt meerdere API sleutels genereren – ze staan vermeld op de pagina API sleutels. Als je een API-sleutel wilt intrekken, klik je op Intrekken naast de sleutel die je wilt intrekken.
Zo gebruik je Kinsta’s site tools met Kinsta API
De Kinsta Site Tools zijn een verzameling tools die beschikbaar zijn voor Kinsta gebruikers om hen te helpen bij het beheren en onderhouden van hun WordPress sites. Deze tools zijn beschikbaar via MyKinsta (WordPress Sites > sitenaam > Tools), maar ze worden op dit moment nog niet allemaal ondersteund door de Kinsta API. Ons team werkt voortdurend aan het toevoegen van de volgende feature en volgt en luistert daarbij nauwgezet naar feedback, zoals Kristof Siket, Development Team Lead voor Kinsta API, deelt:
Feedback van gebruikers bepaalt de prioritering van features. De huidige staat dekt de Tools pagina niet volledig; in plaats daarvan wordt het toevoegen van features gebaseerd op verzoeken van gebruikers en verzamelde feedback.Als je vindt dat een specifieke tool of endpoint moet worden opgenomen in de Kinsta API, stuur dan gerust je feedback.
Om de Site Tools van Kinsta te kunnen gebruiken, is het noodzakelijk om de omgevings-ID van je site te verkrijgen. Elke site op MyKinsta heeft ten minste één omgeving, elk met een unieke ID. Om de omgevings-ID op te halen, kun je gebruikmaken van de Kinsta API door eerst je site-ID op te halen en deze vervolgens te gebruiken als parameter om toegang te krijgen tot de bijbehorende omgevingsgegevens.
Om je site-ID op te halen, kun je het /sites endpoint, dat een lijst van je sites retourneert. Zodra je de site-ID hebt verkregen, kun je de omgevings-ID ophalen door een GET-verzoek te doen naar het /sites endpoint, de ID op te geven en het /environments endpoint toe te voegen.
Hier is een voorbeeld van een codefragment dat laat zien hoe je dit kunt bereiken met JavaScript Fetch API:
const siteId = 'YOUR_site_id_PARAMETER'; // Replace with your actual site ID
const resp = await fetch(
`https://api.kinsta.com/v2/sites/${siteId}/environments`,
{
method: 'GET',
headers: {
Authorization: 'Bearer <YOUR_TOKEN_HERE>' // Replace with your actual API key/token
}
}
);
const data = await resp.json();
console.log(data);In de bovenstaande code definieer je de variabele siteId met de ID van je site. Vervolgens doe je een fetch-verzoek naar het endpoint van de Kinsta API om de omgevingen van de gespecificeerde site op te halen. Zorg ervoor dat je de API sleutel opneemt in de autorisatieheader.
Na ontvangst van de respons worden de gegevens gelogd naar de console, die de details van je omgeving(en) bevat, inclusief het ID:
{
"site": {
"environments": [
{
"id": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"name": "first-site",
"display_name": "First site",
"is_blocked": false,
"id_edge_cache": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"is_premium": false,
"domains": [],
"primaryDomain": {},
"ssh_connection": {}
}
]
}
}Nu je weet hoe je toegang krijgt tot je omgevings-ID, gaan we de site tools van Kinsta programmatisch gebruiken.
Sitecache wissen met Kinsta API
Om de cache van je site te wissen met de Kinsta API, stuur je een post verzoek naar het /sites/tools/clear-cache endpoint. Hiervoor moet je de omgevings-ID doorgeven als inhoud van het verzoek.
De onderstaande code laat zien hoe je dit kunt doen met JavaScript en de Fetch API:
const clearSiteCache = async () => {
const resp = await fetch(
`https://api.kinsta.com/v2/sites/tools/clear-cache`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer <YOUR_TOKEN_HERE>"
},
body: JSON.stringify({
environment_id: "e.g. 54fb80af-576c-4fdc-ba4f-b596c83f15a1"
})
}
);
// Parse the response as JSON
const data = await resp.json();
console.log(data);
};In de bovenstaande code wordt een clearSiteCache functie gedefinieerd die twee parameters aanneemt: de URL van het API endpoint en een object dat de configuratie voor het fetch verzoek bevat. De configuratie omvat de method, headers, en body.
In het veld body geef je de payload van het verzoek door, namelijk de omgevings-ID. Je gebruikt JSON.stringify om het object om te zetten in een JSON string. Vervang de waarde environment_id door de werkelijke ID van de omgeving die je opnieuw wilt opstarten. Zodra het verzoek is verzonden, worden de responsgegevens gelogd naar de console.
Een React applicatie bouwen om onderhoudstaken te plannen met Kinsta API
Met de introductie van de Kinsta API kun je nu custom interfaces bouwen die je ongekende flexibiliteit geven. Een voorbeeld hiervan is een applicatie waarmee je de onderhoudstaken van je site kunt plannen. Denk hierbij aan het wissen van de cache van je site of het opnieuw opstarten van de PHP engine, wat je automatisch plant op middernacht op een specifieke locatie. Dit kan helpen om zonder problemen optimale prestaties te garanderen.
Hoe te beginnen
Om deze tutorial te kunnen volgen, is het raadzaam om een basiskennis te hebben van HTML, CSS en JavaScript en enige bekendheid met React. De belangrijkste focus van dit project is het demonstreren van het gebruik van de Kinsta API, dus dit artikel gaat niet in op de details van het maken of stylen van UI en andere logica.
Om het opzetten van het project te stroomlijnen, is er een startersproject voor je voorbereid. Volg deze stappen om te beginnen:
1. Maak een Git repository met behulp van deze template op GitHub. Selecteer Use this template > Create a new repository om de startcode naar een nieuwe repository binnen je GitHub account te kopiëren, en zorg ervoor dat je het vakje om alle branches mee te nemen aanvinkt.
2. Pull de repository naar je lokale computer en schakel over naar de starter-files branch met het onderstaande commando:
git checkout starter-files3. Installeer de benodigde dependencies door het commando npm install uit te voeren. Als de installatie voltooid is, kun je het project op je lokale computer starten met npm run start. Dit opent het project op http://localhost:3000/.
De projectbestanden
Binnen de src map van dit project zijn twee belangrijke submappen: components en pages. De components map bevat herbruikbare componenten, zoals de Header en Footer, die op alle pagina’s worden gebruikt (Home, Operations, Tools, Schedule).
In dit project ligt je primaire focus op het implementeren van de logica op de Home en Tools pagina’s, omdat de styling, routing en andere logica al klaar zijn.
De Home pagina heeft een formulier dat alle sites op je MyKinsta account weergeeft. Wanneer deze pagina wordt weergegeven, pullt de useEffect hook onmiddellijk een lijst van al je sites en vult deze in binnen een select formulierveld. De ID van elke site wordt gebruikt als de waarde voor de bijbehorende optie.
<select className="form-control" value={selectedSiteId} onChange={(e) => setSelectedSiteId(e.target.value)}>
<option value=""></option>
{sites && (
sites.map((site) => {
return (
<option> key={site.id} value={site.id}>{site.display_name}</option>
)
})
)}
</select>
Wanneer een site wordt geselecteerd en op de knop “Proceed” wordt geklikt, wordt de functie handleSubmission geactiveerd. In deze functie wordt de Kinsta API gebruikt om de omgevings-ID van de site op te halen. Vervolgens wordt deze ID als routeparameter doorgegeven aan de Tools pagina.
Op de Extra pagina kun je onderhoudstaken voor de geselecteerde site uitvoeren en plannen, zoals het wissen van de cache van de site of het herstarten van de PHP engine. Om een van deze acties uit te voeren op de Tools pagina, heb je de omgevings-ID nodig. Daarom wordt deze als routeparameter doorgegeven aan deze pagina.
Wanneer je acties uitvoert zoals het wissen van de cache van de site of het herstarten van de PHP engine, word je automatisch genavigeerd naar de Operations pagina. Hier kun je de voortgang van je actie volgen aan de hand van de toegewezen ID.
Als je een taak plant, word je doorgestuurd naar de Schedule pagina, waar gedetailleerde informatie over de geplande taak wordt weergegeven.
Zodra de geplande tijd is bereikt, begint de specifieke operatie en word je automatisch doorgestuurd naar de Operations pagina, waar je de voortgang van de operatie kunt controleren.
Interactie met de Kinsta API in React
Nu de gebruikersinterface (UI) klaar is, is je volgende stap het afhandelen van de formulierindiening op de Home pagina en het ophalen van de omgevings-ID van je geselecteerde site via de Kinsta API voordat je de gebruiker naar de Tools pagina navigeert met de ID als routeparameter.
Voor interactie met de Kinsta API heb je je bedrijfs-ID en API sleutel nodig. Als je API calls maakt in een project dat in de cloud wordt gehost, moeten je gegevens, zoals de API sleutel, veilig worden opgeslagen om elke vorm van compromittering te voorkomen.
Je kunt ze veilig opslaan als omgevingsvariabelen in je React applicatie door een .env bestand aan te maken in de hoofdmap van je project. Voeg in dit bestand de volgende regels toe:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Om toegang te krijgen tot deze omgevingsvariabelen binnen je project, kun je de syntaxis process.env.THE_VARIABLE gebruiken. Om bijvoorbeeld toegang te krijgen tot REACT_APP_KINSTA_COMPANY_ID, gebruik je process.env.REACT_APP_KINSTA_COMPANY_ID.
Omgeving ID ophalen met Kinsta API in React
Op de startpagina wordt, wanneer een site wordt geselecteerd en op de verzendknop wordt geklikt, de functie handleSubmission geactiveerd. Deze functie gebruikt de Fetch API (of de HTTP verzoekmethode van je voorkeur) om een GET verzoek naar de Kinsta API te doen.
Om te voorkomen dat we de headers en de Kinsta API URL in elke API call herhalen, slaan we de headers en KinstaAPIUrl op als constanten.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])De variabele KinstaAPIUrl slaat de basis URL voor de Kinsta API op. De constante headers wordt gemaakt met de useMemo hook om ervoor te zorgen dat het headers object slechts eenmaal wordt gemaakt en niet verandert tussen renders. Het bevat de Authorization header, die de Kinsta API sleutel bevat die is opgehaald uit de omgevingsvariabelen.
const handleSubmission = (e) => {
e.preventDefault();
const fetchEnvironmentId = async (siteId) => {
const resp = await fetch(
`${KinstaAPIUrl}/sites/${siteId}/environments`,
{
method: 'GET',
headers
}
);
const data = await resp.json();
let envId = data.site.environments[0].id;
navigate(`/tools/${envId}`)
}
fetchEnvironmentId(selectedSiteId);
}In de bovenstaande code wordt een asynchrone functie (fetchEnvironmentId) gemaakt die de siteId van de geselecteerde site pakt en doorgeeft aan het API endpoint om de omgevingsdetails op te halen.
Zodra het antwoord is ontvangen, haal je de omgevings-ID uit de gegevens (je kunt meer dan één omgeving hebben: test of live – dus ze worden allemaal opgeslagen in een array, laten we de live omgeving gebruiken voor deze demo) en gebruik je de navigeerfunctie (die al voor je is geïmporteerd en geïnstantieerd) om de gebruiker om te leiden naar de Tools pagina met de omgevings-ID als routeparameter.
Opmerking: Al deze routes zijn al geconfigureerd in het App.js bestand.
Onderhoudstaken uitvoeren met Kinsta API in React
Op de Tools pagina zijn er twee tools die kunnen worden gebruikt om je site te onderhouden, elk met twee knoppen om de bewerking onmiddellijk uit te voeren of de bewerking te plannen (de functies zijn gemaakt en onClick events zijn voor jou aan alle knoppen gekoppeld). Deze tutorial legt alleen uit hoe je de PHP engine van je site herstart, omdat het erg lijkt op hoe je de cache van je site leegmaakt – het enige verschil is het endpoint.
Om de PHP engine opnieuw te starten of een andere bewerking uit te voeren, heb je de omgevings-ID nodig, die al als routeparameter is doorgegeven aan de Tools pagina. De volgende stap is om deze parameter op te halen, op te slaan in een variabele en dan een verzoek te sturen naar de Kinsta API.
const { envId } = useParams();Sla de request headers en API URL op als constante variabelen omdat ze niet veranderen. De headers voor een POST verzoek verschillen van een GET verzoek omdat het de Content-Type waarde heeft.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])Als er op de knop Restart wordt geklikt, wordt de functie restartEngine gecalled. In deze functie sturen we een POST verzoek naar de Kinsta API, die de omgevings-ID als payload meeneemt:
const restartEngine = async () => {
const resp = await fetch(
`${KinstaAPIUrl}/sites/tools/restart-php`,
{
method: 'POST',
headers,
body: JSON.stringify({
environment_id: envId
})
}
);
const data = await resp.json();
navigate(`/operations/${data.operation_id}`);
}Telkens wanneer de bovenstaande code wordt uitgevoerd, wordt automatisch een PHP engine herstart op je site. Als je meteen op het MyKinsta dashboard van je site kijkt, zie je deze melding bovenaan je pagina:
Je kunt dit programmatisch controleren met het /operations endpoint van de Kinsta API. In de bovenstaande code word je, zodra dit verzoek succesvol is, automatisch genavigeerd naar de Operations pagina met de ID van de operatie als routeparameter, waar je de status van de operatie kunt controleren. Zorg ervoor dat je de Operations pagina bekijkt om te zien hoe dit wordt afgehandeld.
Een taak plannen met Kinsta API in React
Het plannen van een taak met JavaScript betekent dat je de geschatte tijd voor de taak in milliseconden moet berekenen en dan de functie setTimeout moet gebruiken.
Als je op de Tools pagina op de knop Schedule klikt, verschijnt er een popup met twee formuliervelden. Met deze velden kun je de gewenste datum en tijd selecteren waarop de bewerking moet plaatsvinden. De ingevoerde gegevens worden gebruikt om de totale tijd, in milliseconden, te berekenen vanaf het huidige moment tot het moment waarop de bewerking naar verwachting zal beginnen.
Om dit te doen , haal je de dag, de maand en het jaar uit het datumveld door de datum door te geven aan een new Date object en vervolgens elk op te slaan in aparte variabelen.
let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();Vervolgens halen we het uur en de minuten uit het tijdveld:
let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);Met deze verkregen waarden kun je de verwachte tijd in milliseconden berekenen:
const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;Op dit punt heb je de verwachte tijd in milliseconden. Je kunt nu een setTimeout functie maken die triggert op de opgegeven datum en tijd:
setTimeout(function () {
restartEngine();
}, eta_ms);In de bovenstaande code wordt de functie restartEngine() gecalled wanneer de opgegeven tijd is bereikt om de PHP engine opnieuw te starten.
Zo ziet de volledige code eruit:
const schedulePhpEngineRestart = async (e) => {
e.preventDefault();
let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();
let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);
const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;
setTimeout(function () {
restartEngine();
}, eta_ms);
let date = `${day}-${month + 1}-${year}`;
let time = `${hour}:${minute}`;
navigate(`/schedule/${date}/${time}`);
}Wanneer je een taak inroostert, word je genavigeerd naar de Schedule pagina waar je details over de planning kunt bekijken. Als het geplande tijdstip is bereikt, wordt de functie setTimeout gecalled, die automatisch naar de Operations pagina navigeert om de status van de bewerking te volgen.
Nu heb je met succes de agenda functionaliteit geïmplementeerd en de Kinsta API geactiveerd om de PHP engine van je site opnieuw op te starten. Je kunt hetzelfde doen om de cache van je site te wissen.
Zo deploy je je React applicatie met Kinsta
Om je React project te deployen naar Kinsta’s Applicatie Hosting, moet je het project pushen naar je favoriete Git provider. Als je project is gehost op GitHub, GitLab of Bitbucket, kun je het deployen naar Kinsta.
Om je repository naar Kinsta te deployen, volg je deze stappen:
- Log in of maak je Kinsta account aan op het MyKinsta dashboard.
- Klik in de linker zijbalk op “Applicaties” en vervolgens op “Dienst toevoegen”.
- Selecteer “Applicatie” in het vervolgkeuzemenu om een React applicatie te deployen op Kinsta.
- Kies in het venster dat verschijnt de repository die je wilt deployen. Als je meerdere branches hebt, kun je de gewenste branch selecteren en een naam geven aan je applicatie.
- Selecteer een van de beschikbare datacenter locaties uit de lijst met 25 opties. Kinsta detecteert automatisch het start commando voor je applicatie.
Tot slot is het niet veilig om API sleutels naar publieke hosts zoals je Git provider te pushen. Bij het hosten kun je ze toevoegen als omgevingsvariabelen met dezelfde variabelennaam en waarde die zijn opgegeven in het .env bestand.
Zodra je de deployment van je applicatie start, begint het proces en is meestal binnen een paar minuten klaar. Een succesvolle deployment genereert een link naar je applicatie, zoals http://site-tools-scheduler-6u1a5.kinsta.app/.
Samenvatting
Met Kinsta API kun je terugkerende taken voor je WordPress sites nog efficiënter uitvoeren. En in de nabije toekomst zul je nog meer kunnen doen.
In dit artikel heb je geleerd hoe je voordeel kunt halen uit Kinsta API door een React applicatie vanaf nul te bouwen – ook gehost op Kinsta – waarmee je PHP herstarts kunt plannen en de cache van de site kunt wissen via een mooi dashboard dat je ook kunt klonen en aanpassen voor je eigen use case.
Hoe gebruik jij de Kinsta API? Welke features zou je als volgende toegevoegd/belicht willen zien?
Laat een reactie achter