Kinsta ist eine Cloud-Plattform, die Unternehmen und Entwicklerteams dabei hilft, ihre Webprojekte schneller und effizienter umzusetzen und zu verwalten.
Kinsta bietet Entwicklern und Nutzern eine API, mit der sie ihre WordPress-Websites, –Anwendungen und –Datenbanken programmatisch verwalten können.
Mit der Kinsta-API kannst du Aufgaben automatisieren, Daten abrufen und Kinsta mit anderen Anwendungen integrieren, ohne auf MyKinsta zuzugreifen. Um auf die API zuzugreifen, brauchst du einen API-Schlüssel. Dieser Artikel erklärt, wie du einen Kinsta-API-Schlüssel erstellst und verwendest.
So erstellst du einen API-Schlüssel
Um die Kinsta-API nutzen zu können, musst du ein Konto mit mindestens einer WordPress-Site, -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 erstellen.
- 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 Erzeugen.
Wenn du einen API-Schlüssel erstellst, kopiere ihn und bewahre ihn an einem sicheren Ort auf, an dem nur du ihn einsehen kannst. Du kannst mehrere API-Schlüssel erstellen – sie werden auf der Seite API-Schlüssel aufgelistet. Wenn du einen API-Schlüssel widerrufen musst, klicke auf Widerruf neben dem Schlüssel, den du widerrufen möchtest.
Wie du Kinsta API mit deinem API-Schlüssel verwendest
Sobald du den API-Schlüssel hast, kannst du über die Kinsta-API mit allen Kinsta-Diensten (WordPress-Seiten, Anwendungen und Datenbanken) interagieren, z. B. eine Liste der Datenbanken nach Unternehmens-ID abrufen, Unternehmensseiten aufrufen, eine WordPress-Seite erstellen und mehr.
Um zum Beispiel eine Liste der Unternehmensseiten in deinem MyKinsta zu erhalten, lautet der Endpunkt /sites. Der API-Schlüssel dient als Autorisierungskopfzeile; du fügst auch die Unternehmens-ID hinzu (erforderlicher Parameter). Hier siehst du, wie du diese API-Anfrage mit cURL stellst:
curl -i -X GET
'https://api.kinsta.com/v2/sites?company='
-H 'Authorization: Bearer <YOUR_API_KEY_HERE>'Ersetze YOUR_API_KEY_HERE durch den tatsächlichen API-Schlüssel, den du erstellt hast, und
COMPANY_ID_HERE durch deine eindeutige Unternehmens-ID. Dies liefert eine JSON-Antwort mit allen Unternehmensseiten in deinem DevKinsta-Dashboard:
{
"company": {
"sites": [
{
"id": "YOUR_SITE_ID",
"name": "my-test-site",
"display_name": "Test site",
"status": "live",
"site_labels": []
}
]
}
}Ein anderes Beispiel: Angenommen, du möchtest eine bestimmte Website nach ihrer ID abrufen (GET-Anfrage). Dann kannst du den Endpunkt /sites/{site_id} verwenden. {site_id} wird durch die eindeutige ID der Website ersetzt, die du abrufen möchtest. Hier siehst du, wie du diese API-Anfrage mit NodeJS stellst:
import fetch from 'node-fetch';
async function fetchSite() {
const siteId = 'YOUR_SITE_ID';
const response = await fetch(
`https://api.kinsta.com/v2/sites/${siteId}`,
{
method: 'GET',
headers: {
Authorization: 'Bearer
}
}
);
const data = await response.json();
console.log(data);
}
fetchSite();Mit der Kinsta-API kannst du noch mehr tun. Ausführliche Informationen zu den verfügbaren API-Endpunkten und den benötigten Parametern, zum Herunterladen unserer OpenAPI-Spezifikation und zum Ausprobieren der Endpunkte findest du in unserer API-Referenz.
Berechtigungen
Die API-Zugriffsberechtigungen für Kinsta hängen von der Rolle des Nutzers im Unternehmen ab, da Firmeninhaber, Administratoren und Entwickler API-Schlüssel erstellen können.
Ein API-Schlüssel, der von einem Entwickler erstellt wurde, hat beispielsweise nicht dieselben Zugriffsrechte wie ein Schlüssel, der von einem Firmeninhaber oder Administrator erstellt wurde. Die spezifischen Berechtigungen, die mit jeder Benutzerrolle verbunden sind, gewährleisten eine angemessene Zugangskontrolle und Sicherheit für die Kinsta-API.
So verwendest du die Kinsta-API, um einen Status-Checker zu erstellen
Wenn du eine Anwendung, Website oder Datenbank auf MyKinsta erstellst, durchläuft sie verschiedene Phasen. Eine Möglichkeit, diese Phasen zu erkennen, ist ihr Status. Eine Anwendung, die auf Kinsta bereitgestellt wird, hat zum Beispiel einen Status, der angibt, ob sie gerade bereitgestellt wird, erfolgreich bereitgestellt wurde oder fehlgeschlagen ist.
Die Kinsta-API bietet Endpunkte, mit denen du Statusinformationen über deine Projekte auf MyKinsta abrufen kannst. Für dieses Projekt wirst du mit drei Endpunkten interagieren, nämlich mit dem /applications, /sites, und /databases, um mit der JavaScript Fetch API eine Liste aller Anwendungen, Websites und Datenbanken abzurufen.
Sobald du die Liste abgerufen hast, kannst du die Methode find() in JavaScript verwenden, um nach einem bestimmten Projektnamen zu suchen, der in die Benutzeroberfläche (UI) eingegeben wurde. Dies gibt den Namen und den Status des Projekts zurück, wenn es existiert.
Voraussetzung
Um bei diesem Projekt mitzukommen, ist es ratsam, ein grundlegendes Verstä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 Erstellung oder das Styling der Benutzeroberfläche eingegangen.
Mit dieser Vorlage kannst du ein Git-Repository auf GitHub erstellen. Wähle Diese Vorlage verwenden > Neues Repository erstellen, um den Startcode in ein neues Repository in deinem GitHub-Konto zu kopieren, und aktiviere das Kontrollkästchen Alle Zweige einschließen. Wenn du auf deinen lokalen Computer ziehst, stelle sicher, dass du die status-checker-ui zweig, um die Startdateien mit dem folgenden Befehl zu verwenden:
git checkout status-checker-uiInstalliere 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 dem Befehl npm run start starten. Dadurch wird das Projekt unter http://localhost:3000/ geöffnet.
Dieses Projekt hat zwei Hauptseiten: die Start- und die Service-Seite. Auf der Startseite findest du eine Liste der von Kinsta angebotenen Dienste (WordPress-, Anwendungs- und Datenbank-Hosting). Wenn du auf einen der Dienste klickst, gelangst du auf die Service-Seite, auf der du spezielle Informationen zu dem ausgewählten Dienst findest.
Wenn du z. B. auf den Abschnitt Anwendungen klickst, wirst du auf die Service-Seite für Anwendungen weitergeleitet. Auf dieser Seite kannst du nach jeder Anwendung in deinem MyKinsta-Konto suchen. Der Anwendungsstatus wird entweder über den eindeutigen Namen oder den Anzeigenamen abgerufen.
Interaktion mit der Kinsta-API
Um die Suchfunktion für dieses Projekt zu implementieren, musst du drei Funktionen erstellen, die Abrufe für jeden Dienst (Anwendungen, Websites und Datenbanken) verarbeiten. Dann implementierst du eine Suchfunktion, die das gesamte Datenfeld durchsucht, um zu prüfen, ob ein bestimmter Suchwert vorhanden ist.
Du brauchst deine Unternehmens-ID und deinen API-Schlüssel, um mit der Kinsta-API zu interagieren, damit du eine Liste der Datenbanken, Anwendungen und Websites abrufen kannst, die in deinem MyKinsta-Konto verfügbar sind. Sobald du sie hast, speicherst du sie als Umgebungsvariablen in deiner React-Anwendung, indem du eine .env-Datei im Stammverzeichnis deines Projekts erstellst.
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Jetzt kannst du mit process.env.THE_VARIABLE überall in deinem Projekt auf diese Werte zugreifen. Um zum Beispiel auf REACT_APP_KINSTA_COMPANY_ID zuzugreifen, verwendest du process.env.REACT_APP_KINSTA_COMPANY_ID.
Bevor du die API verwendest, erstelle drei Zustände in der Seite Service.jsx, um den Status und den Namen der Ausgabe zu speichern, die bei der Suche nach einer Website, Anwendung oder Datenbank erzeugt wird. Der dritte Status dient dazu, Fehlerinformationen zu speichern.
let [status, setStatus] = useState('');
let [name, setName] = useState('');
let [error, setError] = useState('');Erstelle außerdem eine Variable, um die URL der Kinsta-API zu speichern:
const KinstaAPIUrl = 'https://api.kinsta.com/v2';Wenn du damit fertig bist, hänge ein onClick Ereignis mit einer CheckQuery() Funktion an den Submit-Button des Formulars auf der Seite Service.jsx an, so dass eine Funktion basierend auf dem Slug ausgelöst wird. Das heißt, wenn der Slug auf Datenbanken hinweist, wird die Funktion CheckDatabases() ausgelöst:
const CheckQuery = async (name) => {
if (slug === 'wp-site') {
await CheckSites(name);
} else if (slug === 'application') {
await CheckApplications(name);
} else if (slug === 'database') {
await CheckDatabases(name);
}
}Liste der Websites mit der Kinsta-API abrufen
Um mit der Kinsta-API eine Liste der Websites abzurufen, die in deinem MyKinsta-Unternehmenskonto verfügbar sind, erstellst du eine Funktion, gibst eine Abfrage mit der Unternehmens-ID als Parameter ein und autorisierst die Anfrage mit deinem API-Schlüssel. Diese Anfrage verwendet den Endpunkt /sites der Kinsta-API:
const CheckSites = async (name) => {
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/sites?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
}Mit dem obigen Code werden alle in deinem MyKinsta-Konto verfügbaren Websites abgerufen. Du kannst nun die Methode find() verwenden, um zu suchen, ob die Suchanfrage mit einem Namen oder Anzeigenamen übereinstimmt:
const data = await resp.json();
let sitesData = data.company.sites;
let site = sitesData.find(site => site.name === name || site.display_name === name);Damit kannst du dann einige Bedingungen erstellen, um zu prüfen, ob ein Wert zurückgegeben wird, und dann die Zustände setzen, andernfalls den Fehlerzustand mit einer Meldung aktualisieren, um den Nutzer darüber zu informieren, dass diese Seite nicht existiert:
if (site) {
setName(site.display_name);
if (site.status === 'live') {
setStatus('🟢 Running');
} else if (site.status === 'staging') {
setStatus('🟡 Staging');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such site found for your account');
setUniqueName('');
}So sieht dein Code aus, mit dem du den Status einer bestimmten Website überprüfen kannst:
const CheckSites = async (name) => {
setName('');
setStatus('');
setError('');
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/sites?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
let sitesData = data.company.sites;
let site = sitesData.find(site => site.name === name || site.display_name === name);
if (site) {
setName(site.display_name);
if (site.status === 'live') {
setStatus('🟢 Running');
} else if (site.status === 'staging') {
setStatus('🟡 Staging');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such site found for your account');
setUniqueName('');
}
}Hinweis: Alle drei Zustände werden jedes Mal, wenn die Funktion CheckSites() ausgelöst wird, als leere Zeichenketten initialisiert. Das ist notwendig, um sicherzustellen, dass alle vorherigen Suchdaten gelöscht werden.
Liste der Anwendungen mit der Kinsta-API abrufen
Genau wie bei den Websites verwendest du den Endpunkt /applications, übergibst eine Abfrage, die die Unternehmens-ID enthält, und verwendest ebenfalls die Methode find(), um das zurückgegebene Array zu durchsuchen:
const CheckApplications = async (name) => {
setName('');
setStatus('');
setError('');
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/applications?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
let appsData = data.company.apps.items;
let app = appsData.find(app => app.unique_name === name || app.name === name || app.display_name === name);
if (app) {
setName(app.display_name);
if (app.status === 'deploymentSuccess') {
setStatus('🟢 Running');
} else if (app.status === 'deploymentFailed') {
setStatus('🔴 Failed');
} else if (app.status === 'deploymentPending') {
setStatus('🟡 Pending');
} else if (app.status === 'deploymentInProgress') {
setStatus('🟡 In Progress');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such app found for your account');
setUniqueName('');
}
}Liste der Datenbanken mit der Kinsta-API abrufen
Um eine Liste von Datenbanken abzurufen, verwendest du den Endpunkt /databases der Kinsta-API:
const CheckDatabases = async (name) => {
setName('');
setStatus('');
setError('');
const query = new URLSearchParams({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/databases?${query}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
let databasesData = data.company.databases.items;
let database = databasesData.find(database => database.name === name || database.display_name === name);
if (database) {
setName(database.display_name);
if (database.status === 'ready') {
setStatus('🟢 Running');
} else if (database.status === 'creating') {
setStatus('🟡 Creating');
} else {
setStatus('🟡 Unknown');
}
setUniqueName('');
} else {
setError('No such database found for your account');
setUniqueName('');
}
}Sobald dies erledigt ist. Du hast die Kinsta-API erfolgreich in deinem React-Projekt verwendet. Damit deine Anwendung gut funktioniert, fügst du die Daten, die von diesen Funktionen zurückgegeben werden und die auf die zuvor erstellten Zustände gesetzt wurden, in deinen Markup-Code ein:
{status !== '' && (
<div className="services">
<div className="details">
<div className="name-details">
<span> className="tag">Name: </span>
<span> className="value">{name}</span>
</div>
<div className="status-details">
<span> className="tag">Status: </span>
<span> className="value"> {status}</span>
</div>
</div>
</div>
)}Füge außerdem eine Bedingung hinzu, die ausgelöst wird, wenn ein Fehler auftritt. Wenn ein Nutzer zum Beispiel nach einem Projekt sucht, das in MyKinsta nicht existiert, wird der Fehler ausgelöst.
{error !== '' && (
<div className="services">
<div className="details">
<p>{error}</p>
</div>
</div>
)}Jetzt funktioniert dein Projekt einwandfrei und du kannst den Status von Anwendungen, Websites oder Datenbanken auf deinem MyKinsta-Dashboard überprüfen. Du kannst deinen Code mit diesem GitHub-Repository vergleichen.
So stellst du deinen Status Checker auf Kinsta bereit
Um dein React-Projekt auf Kinsta bereitzustellen, musst du das Projekt bei deinem bevorzugten Git-Provider pushen. Wenn dein Projekt entweder auf GitHub, GitLab oder Bitbucket gehostet wird, kannst du es auf Kinsta bereitstellen.
Befolge diese Schritte, um dein Repository auf 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. Kinsta erkennt automatisch den Startbefehl für deine Anwendung.
Schließlich ist es nicht sicher, API-Schlüssel an öffentliche Hoster wie deinen Git-Anbieter weiterzugeben. Wenn du hostest, 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 initiiert hast, beginnt der Prozess und ist in der Regel innerhalb weniger Minuten abgeschlossen. Wenn die Bereitstellung erfolgreich war, erhältst du einen Link, über den du auf die bereitgestellte Version deiner Anwendung zugreifen kannst. In diesem Fall lautet der Link zum Beispiel https://status-checker-1t256.kinsta.app/.
Zusammenfassung
Mit dem Kinsta-API-Schlüssel kannst du ganz einfach Aufgaben automatisieren, Daten abrufen und Kinsta in andere Anwendungen integrieren. Denke daran, deinen Zugangsschlüssel sicher aufzubewahren.
Jetzt kannst du die Leistung der Kinsta-API nutzen, um Berichte zu erstellen, Aufgaben zu planen, WordPress-Seiten zu erstellen und verschiedene Aktivitäten zu automatisieren.
Welchen Endpunkt würdest du der Kinsta-API gerne als nächstes hinzufügen? Lass es uns in den Kommentaren wissen.
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