Im Laufe der Jahre hat Kinsta erhebliche Fortschritte bei der Vereinfachung der Website-Verwaltung über das MyKinsta-Dashboard gemacht. Mit diesem leistungsstarken Dashboard können Nutzer/innen ihre Websites verwalten und verschiedene Wartungsmaßnahmen durchführen, wie z. B. den Neustart der PHP-Engine und das Löschen des Caches ihrer Website.
Die Einführung der Kinsta-API hebt die Verwaltung von Websites jedoch auf eine ganz neue Ebene. Entwickler können jetzt die Leistung der Kinsta-API nutzen, um den Verwaltungsprozess zu verbessern, benutzerdefinierte Schnittstellen zu erstellen und sogar Scheduler-Anwendungen zu entwickeln, um wichtige Aufgaben zu automatisieren.
Dieses Tutorial taucht in die Welt der Kinsta-API ein und erklärt, wie man mit der Kinsta-API eine React-Anwendung zur Planung wichtiger Wartungsaufgaben wie PHP-Engine-Neustarts und Cache-Löschung erstellt.
Hier siehst du eine Live-Demo der Anwendung zur Planung von Website-Tools.
Die Kinsta-API verstehen
Die Kinsta-API ist ein leistungsstarkes Werkzeug, mit dem du programmatisch mit der Managed WordPress Hosting-Plattform von Kinsta interagieren kannst. Mit ihrer Hilfe lassen sich verschiedene Aufgaben im Zusammenhang mit den von Kinsta angebotenen Diensten automatisieren, z. B. das Erstellen von Websites, das Abrufen von Website-Informationen, das Abfragen des Status einer Website und vieles mehr.
Um die Kinsta-API nutzen zu können, musst du ein Konto mit mindestens einer WordPress-Website, -Anwendung oder -Datenbank in MyKinsta haben. Außerdem musst du einen API-Schlüssel erstellen, um dich zu authentifizieren und über die API auf dein Konto zuzugreifen.
So generierst du einen API-Schlüssel:
- Gehe zu deinem MyKinsta-Dashboard.
- Navigiere zur Seite mit den API-Schlüsseln (Dein Name > Unternehmenseinstellungen > API-Schlüssel).
- Klicke auf API-Schlüssel generieren.
- Wähle ein Ablaufdatum oder lege ein benutzerdefiniertes Startdatum und die Anzahl der Stunden fest, nach denen der Schlüssel abläuft.
- Gib dem Schlüssel einen eindeutigen Namen.
- Klicke auf Generieren.
Nachdem du einen API-Schlüssel generiert hast, kopiere ihn und speichere ihn an einem sicheren Ort (du kannst einen Passwort-Manager verwenden), da er nur dann innerhalb von MyKinsta sichtbar ist. Du kannst mehrere API-Schlüssel generieren – sie sind auf der Seite API-Schlüssel aufgeführt. Wenn du einen API-Schlüssel widerrufen musst, klicke auf Widerruf neben dem Schlüssel, den du widerrufen möchtest.
Wie du die Kinsta-Site-Tools mit der Kinsta-API verwendest
Die Kinsta-Site-Tools sind eine Reihe von Tools, die Kinsta-Nutzern bei der Verwaltung und Pflege ihrer WordPress-Sites helfen. Diese Tools sind über MyKinsta (WordPress-Sites > sitename > Tools) verfügbar, aber noch nicht alle werden von der Kinsta-API unterstützt. Unser Team arbeitet ständig daran, die nächsten Funktionen hinzuzufügen und hört dabei genau auf das Feedback der Nutzer, wie Kristof Siket, Development Team Lead für die Kinsta API, erklärt:
Das Feedback der Nutzerinnen und Nutzer bestimmt die Prioritäten für die Veröffentlichung der Funktionen. Der aktuelle Plan deckt die Tools-Seite nicht vollständig ab; stattdessen basieren die Funktionen auf den Nutzeranfragen und dem gesammelten Feedback.Wenn du glaubst, dass ein bestimmtes Tool oder ein Endpunkt in die Kinsta-API aufgenommen werden sollte, kannst du uns gerne dein Feedback schicken.
Um die von Kinsta bereitgestellten Website-Tools nutzen zu können, musst du die Umgebungs-ID deiner Website erhalten. Jede Website auf MyKinsta hat mindestens eine Umgebung mit einer eindeutigen ID. Um die Umgebungs-ID abzurufen, kannst du die Kinsta-API nutzen, indem du zunächst deine Site-ID abrufst und sie dann als Parameter für den Zugriff auf die entsprechenden Umgebungsdaten verwendest.
Um deine Site ID abzurufen, kannst du den /sites-Endpunkt verwenden, der eine Liste deiner Websites zurückgibt. Sobald du die Site-ID erhalten hast, kannst du die Umgebungs-ID abrufen, indem du eine GET-Anfrage an den Endpunkt /sites stellst, die ID angibst und den /environments-Endpunkt anhängst.
Hier ist ein Beispielcode, der zeigt, wie du dies mit der JavaScript Fetch API erreichen kannst:
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);Im obigen Code definierst du die Variable siteId mit der ID deiner Website. Dann stellst du eine Fetch-Anfrage an den Endpunkt der Kinsta-API, um die Umgebungen der angegebenen Website abzurufen. Achte darauf, dass du den API-Schlüssel in den Authorization-Header einfügst.
Nach dem Empfang der Antwort werden die Daten in der Konsole protokolliert, die die Details deiner Umgebung(en), einschließlich der ID, enthält:
{
"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": {}
}
]
}
}Da du nun weißt, wie du auf deine Umgebungs-ID zugreifen kannst, können wir die Website-Tools von Kinsta programmatisch nutzen.
So löschst du den Website-Cache mit der Kinsta-API
Um den Cache deiner Website mit der Kinsta-API zu löschen, sendest du eine Post-Anfrage an den /sites/tools/clear-cache-Endpunkt. Dazu musst du die Umgebungs-ID als Body der Anfrage übergeben.
Der folgende Code zeigt dir, wie du dies mit JavaScript und der Fetch-API erreichen kannst:
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);
};Im obigen Code wird eine Funktion clearSiteCache definiert, die zwei Parameter entgegennimmt: die URL des API-Endpunkts und ein Objekt, das die Konfiguration für die Fetch-Anfrage enthält. Die Konfiguration umfasst die Parameter method, headers und body.
Im Feld body übergibst du die Nutzlast der Anfrage, d. h. die Umgebungs-ID. Mit JSON.stringify wandelst du das Objekt in einen JSON-String um. Ersetze den Wert environment_id durch die tatsächliche ID der Umgebung, die du neu starten willst. Sobald die Anfrage gesendet wurde, werden die Antwortdaten in der Konsole protokolliert.
Erstellung einer React-Anwendung zur Planung von Wartungsaufgaben mit der Kinsta-API
Mit der Einführung der Kinsta-API kannst du jetzt benutzerdefinierte Schnittstellen erstellen, die eine unvergleichliche Flexibilität bieten. Ein Beispiel dafür ist eine Anwendung, mit der du die Wartungsaufgaben für deine Website planen kannst. Stell dir vor, du planst die Cache-Löschung oder den Neustart der PHP-Engine deiner Website so, dass sie automatisch um Mitternacht an einem bestimmten Ort stattfinden. So kannst du ohne Probleme eine optimale Leistung sicherstellen.
Erste Schritte
Um diesem Tutorial zu folgen, ist es ratsam, ein Grundverständnis von HTML, CSS und JavaScript und eine gewisse Vertrautheit mit React zu haben. In diesem Projekt geht es vor allem darum, die Nutzung der Kinsta-API zu demonstrieren. Daher wird in diesem Artikel nicht näher auf die Gestaltung der Benutzeroberfläche und andere Logik eingegangen.
Um die Einrichtung des Projekts zu vereinfachen, haben wir ein Starterprojekt für dich vorbereitet. Befolge diese Schritte, um loszulegen:
1. Erstelle ein Git-Repository mit dieser Vorlage auf GitHub. Wähle Diese Vorlage verwenden > Neues Repository erstellen, um den Startcode in ein neues Repository in deinem GitHub-Konto zu kopieren, und achte darauf, dass du alle Zweige einschließt.
2. Ziehe das Repository auf deinen lokalen Computer und wechsle mit dem folgenden Befehl in den starter-files-Zweig:
git checkout starter-files3. Installiere die notwendigen Abhängigkeiten, indem du den Befehl npm install ausführst. Sobald die Installation abgeschlossen ist, kannst du das Projekt auf deinem lokalen Computer mit npm run start starten. Dadurch wird das Projekt unter http://localhost:3000/ geöffnet.
Das Verständnis der Projektdateien
Im src-Ordner dieses Projekts gibt es zwei Hauptunterordner: components und pages. Der Ordner components enthält wiederverwendbare Komponenten, wie z. B. die Kopf- und Fußzeile, die auf allen Seiten (Home, Operations, Tools, Schedule) verwendet werden.
In diesem Projekt geht es in erster Linie darum, die Logik auf den Seiten Home und Tools zu implementieren, da das Styling, das Routing und die andere Logik bereits fertig sind.
Auf der Startseite befindet sich ein Formular, in dem alle Seiten deines MyKinsta-Kontos aufgelistet sind. Wenn diese Seite angezeigt wird, ruft der useEffect-Hook sofort eine Liste all deiner Websites ab und füllt sie in ein Auswahlfeld des Formulars ein. Die ID jeder Seite wird als Wert für die entsprechende Option verwendet.
<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>
Wenn eine Website ausgewählt und die Schaltfläche „Weiter“ angeklickt wird, wird die Funktion handleSubmission ausgelöst. In dieser Funktion wird die Kinsta-API verwendet, um die Umgebungs-ID der Website abzurufen. Anschließend wird diese ID als Routenparameter an die Tools-Seite übergeben.
Auf der Seite Tools kannst du Wartungsaufgaben für die ausgewählte Website durchführen und planen, z. B. den Cache der Website leeren oder die PHP-Engine neu starten. Um eine dieser Aktionen auf der Seite Extras durchzuführen, benötigst du die Umgebungs-ID. Daher wird sie als Routenparameter an diese Seite übergeben.
Wenn du Aktionen wie das Löschen des Website-Caches oder den Neustart der PHP-Engine einleitest, wirst du automatisch zur Seite Vorgänge navigiert. Hier kannst du den Fortschritt deines Vorgangs anhand der zugewiesenen ID verfolgen.
Wenn du eine Aufgabe planst, wirst du zur Seite Planen weitergeleitet, auf der detaillierte Informationen über die geplante Aufgabe angezeigt werden.
Sobald die geplante Zeit erreicht ist, beginnt der jeweilige Vorgang und leitet dich automatisch zur Seite Vorgänge weiter, auf der du den Fortschritt des Vorgangs verfolgen kannst.
Interaktion mit der Kinsta-API in React
Nachdem du die Benutzeroberfläche (UI) eingerichtet hast, musst du als Nächstes das Formular auf der Startseite ausfüllen und die Umgebungs-ID der ausgewählten Website über die Kinsta-API abrufen, bevor du den Benutzer mit der ID als Routenparameter zur Tools-Seite weiterleitest.
Um mit der Kinsta-API zu interagieren, brauchst du deine Unternehmens-ID und deinen API-Schlüssel. Wenn du in einem Projekt, das in der Cloud gehostet wird, API-Aufrufe machst, müssen deine Anmeldedaten, wie der API-Schlüssel, sicher gespeichert werden, um jede Form der Kompromittierung zu vermeiden.
Du kannst sie sicher als Umgebungsvariablen in deiner React-Anwendung speichern, indem du eine .env-Datei im Stammverzeichnis deines Projekts erstellst. Füge in diese Datei die folgenden Zeilen ein:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Um innerhalb deines Projekts auf diese Umgebungsvariablen zuzugreifen, kannst du die Syntax process.env.THE_VARIABLE verwenden. Um zum Beispiel auf die REACT_APP_KINSTA_COMPANY_ID zuzugreifen, würdest du process.env.REACT_APP_KINSTA_COMPANY_ID verwenden.
Abrufen der Umgebungs-ID mit der Kinsta-API in React
Wenn du auf der Startseite eine Seite auswählst und auf den Submit-Button klickst, wird die Funktion handleSubmission ausgelöst. Diese Funktion verwendet die Fetch-API (oder deine bevorzugte HTTP-Anforderungsmethode), um eine GET-Anforderung an die Kinsta-API zu stellen.
Um zu vermeiden, dass die Kopfzeilen und die Kinsta-API-URL bei jedem API-Aufruf wiederholt werden, speichern wir die headers und KinstaAPIUrl als Konstanten.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])Die Variable KinstaAPIUrl speichert die Basis-URL für die Kinsta-API. Die Konstante headers wird mit dem useMemo-Hook erstellt, um sicherzustellen, dass das Header-Objekt nur einmal erstellt wird und sich zwischen den Renderings nicht ändert. Sie enthält den Authorization-Header, der den Kinsta-API-Schlüssel enthält, der aus den Umgebungsvariablen abgerufen wird.
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);
}Im obigen Code wird eine asynchrone Funktion (fetchEnvironmentId) erstellt, die die von der ausgewählten Website erhaltene siteId übernimmt und an den API-Endpunkt weitergibt, um die Umgebungsdetails abzurufen.
Sobald die Antwort eingegangen ist, extrahierst du die Umgebungs-ID aus den Daten (du kannst mehr als eine Umgebung haben: Staging oder Live – also werden sie alle in einem Array gespeichert, für diese Demo verwenden wir die Live-Umgebung) und verwendest die Funktion navigate (die bereits für dich importiert und instanziiert wurde), um den Benutzer mit der Umgebungs-ID als Routenparameter zur Seite Tools umzuleiten.
Hinweis: Alle diese Routen sind bereits in der App.js-Datei konfiguriert.
Wartungsaufgaben mit der Kinsta-API in React durchführen
Auf der Tools-Seite gibt es zwei Tools, mit denen du deine Website warten kannst. Jedes Tool hat zwei Schaltflächen, mit denen du den Vorgang entweder sofort ausführen oder planen kannst (die Funktionen wurden bereits erstellt und die onClick Ereignisse wurden für dich an alle Schaltflächen angehängt). In diesem Lernprogramm wird nur erklärt, wie du die PHP-Engine deiner Website neu startest, denn es ist sehr ähnlich wie das Löschen des Caches – der einzige Unterschied ist der Endpunkt.
Um die PHP-Engine neu zu starten oder eine andere Funktion des Website-Tools auszuführen, benötigst du die Umgebungs-ID, die bereits als Routenparameter an die Tools-Seite übergeben wird. Der nächste Schritt wäre, diesen Parameter abzurufen, ihn in einer Variablen zu speichern und dann eine Anfrage an die Kinsta-API zu senden.
const { envId } = useParams();Speichere die Kopfzeilen der Anfrage und die API-URL als konstante Variablen, da sie sich nicht ändern. Die Kopfzeilen für eine POST-Anfrage unterscheiden sich von denen einer GET-Anfrage, da sie den Wert Content-Type enthalten.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])Wenn du auf die Schaltfläche Neustart klickst, wird die Funktion restartEngine aufgerufen. In dieser Funktion senden wir eine POST-Anfrage an die Kinsta-API, die die Umgebungs-ID als Nutzdaten enthält:
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}`);
}Jedes Mal, wenn der obige Code ausgeführt wird, löst er automatisch einen Neustart der PHP-Engine auf deiner Website aus. Wenn du das MyKinsta-Dashboard deiner Website sofort überprüfst, wirst du diese Benachrichtigung oben auf deiner Seite sehen:
Du kannst dies auch programmatisch überprüfen, indem du den /operations-Endpunkt der Kinsta-API nutzt. Im obigen Code wirst du, sobald die Anfrage erfolgreich war, automatisch zur Seite Operationen mit der ID der Operation als Routenparameter weitergeleitet, wo du den Status des Vorgangs überprüfen kannst. Sieh dir die Vorgangsseite an, um zu sehen, wie dies gehandhabt wird.
So planst du eine Aufgabe mit der Kinsta-API in React
Um eine Aufgabe mit JavaScript zu planen, musst du die geschätzte Zeit für die Aufgabe in Millisekunden berechnen und dann die Funktion setTimeout verwenden.
Wenn du auf der Seite Werkzeuge auf die Schaltfläche Planen klickst, erscheint ein Modal mit zwei Formularfeldern. In diesen Feldern kannst du das gewünschte Datum und die Uhrzeit auswählen, zu der der Vorgang ausgeführt werden soll. Die eingegebenen Daten werden verwendet, um die Gesamtzeit in Millisekunden zu berechnen, die vom aktuellen Zeitpunkt bis zum voraussichtlichen Beginn des Vorgangs vergeht.
Um dies zu erreichen, extrahiere den Tag, den Monat und das Jahr aus dem Datumsfeld, indem du das Datum in ein new Date Objekt übergibst, und speichere sie dann in separaten Variablen.
let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();Als Nächstes extrahieren wir die Stunde und die Minute aus dem Zeitfeld:
let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);Mit diesen Werten kannst du die erwartete Zeit in Millisekunden berechnen:
const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;An dieser Stelle hast du die erwartete Zeit in Millisekunden. Du kannst nun eine setTimeout Funktion erstellen, die zum angegebenen Datum und zur angegebenen Uhrzeit ausgelöst wird:
setTimeout(function () {
restartEngine();
}, eta_ms);Im obigen Code wird die Funktion restartEngine() aufgerufen, wenn die angegebene Zeit erreicht ist, um die PHP-Engine neu zu starten.
So sieht der vollständige Code aus:
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}`);
}Wenn du eine Aufgabe planst, wirst du auf die Seite mit dem Zeitplan weitergeleitet, wo du die Details des Zeitplans einsehen kannst. Wenn die geplante Zeit erreicht ist, wird die Funktion setTimeout aufgerufen, die automatisch zur Vorgangsseite navigiert, um den Status des Vorgangs zu verfolgen.
Jetzt hast du die Zeitplanfunktion erfolgreich implementiert und die Kinsta-API dazu veranlasst, die PHP-Engine deiner Website neu zu starten. Auf die gleiche Weise kannst du auch den Cache deiner Website löschen.
Wie du deine React-Anwendung mit Kinsta bereitstellst
Um dein React-Projekt auf dem Anwendungs-Hosting von Kinsta bereitzustellen, musst du das Projekt zu deinem bevorzugten Git-Anbieter pushen. Wenn dein Projekt entweder auf GitHub, GitLab oder Bitbucket gehostet wird, kannst du mit der Bereitstellung bei Kinsta beginnen.
Befolge diese Schritte, um dein Repository bei Kinsta bereitzustellen:
- Melde dich auf dem MyKinsta-Dashboard an oder erstelle dein Kinsta-Konto.
- Klicke in der linken Seitenleiste auf „Anwendungen“ und dann auf „Dienst hinzufügen“.
- Wähle „Anwendung“ aus dem Dropdown-Menü, um eine React-Anwendung auf Kinsta bereitzustellen.
- Wähle in dem erscheinenden Modal das Repository aus, das du bereitstellen möchtest. Wenn du mehrere Zweige hast, kannst du den gewünschten Zweig auswählen und einen Namen für deine Anwendung vergeben.
- Wähle einen der verfügbaren Rechenzentrumsstandorte aus der Liste der 25 Optionen aus. Kinsta erkennt automatisch den Startbefehl für deine Anwendung.
Schließlich ist es nicht sicher, API-Schlüssel an öffentliche Hoster wie deinen Git-Provider weiterzugeben. Beim Hosten kannst du sie als Umgebungsvariablen hinzufügen, indem du denselben Variablennamen und Wert wie in der .env-Datei angibst.
Sobald du die Bereitstellung deiner Anwendung initiierst, beginnt der Prozess und ist normalerweise innerhalb weniger Minuten abgeschlossen. Eine erfolgreiche Bereitstellung erzeugt einen Link zu deiner Anwendung, wie http://site-tools-scheduler-6u1a5.kinsta.app/.
Zusammenfassung
Mit der Kinsta-API kannst du wiederkehrende Aufgaben für deine WordPress-Seiten noch effizienter erledigen. Und in naher Zukunft wirst du noch mehr tun können.
In diesem Artikel hast du gelernt, wie du die Vorteile der Kinsta-API nutzen kannst, indem du eine React-Anwendung von Grund auf neu erstellst – die ebenfalls auf Kinsta gehostet wird -, mit der du einen PHP-Neustart planen und den Cache der Website über ein schönes Dashboard leeren kannst, das du auch klonen und für deinen eigenen Anwendungsfall anpassen kannst.
Wie nutzt du die Kinsta-API? Welche Funktionen würdest du gerne als Nächstes hinzufügen/entdecken?
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar