Nel corso degli anni, Kinsta ha compiuto notevoli progressi nel semplificare la gestione dei siti web attraverso il cruscotto MyKinsta. La nostra potente dashboard consente agli utenti di gestire i propri siti e di eseguire varie operazioni di manutenzione, tra cui il riavvio del motore PHP e la cancellazione della cache del sito.
L’introduzione dell’API di Kinsta porta la gestione dei siti web su un livello completamente nuovo. Gli sviluppatori ora possono sfruttare la potenza dell’API di Kinsta per migliorare le attività di gestione, creare interfacce personalizzate e persino realizzare applicazioni per pianificare e automatizzare le attività essenziali.
Questo tutorial vi accompagna nel mondo dell’API di Kinsta e vi spiega come costruire un’applicazione React per pianificare attività di manutenzione essenziali come il riavvio del motore PHP e la cancellazione della cache con l’API di Kinsta.
Ecco una demo live dell’applicazione per la pianificazione degli strumenti del sito.
L’API di Kinsta
L’API di Kinsta è un potente strumento che permette di interagire con la piattaforma di hosting WordPress gestito di Kinsta in modo programmatico. Può aiutarvi ad automatizzare diverse attività relative ai servizi di Kinsta, tra cui la creazione di un sito, il recupero di informazioni sul sito, lo stato di un sito e molto altro.
Per utilizzare l’API di Kinsta, è necessario avere un account con almeno un sito, un’applicazione o un database WordPress in MyKinsta. Sarà inoltre necessario generare una chiave API per autenticarsi e accedere al proprio account tramite l’API.
Ecco i passaggi necessari per generare una chiave API:
- Andare alla dashboard di MyKinsta.
- Andare alla pagina delle chiavi API (Nome > Impostazioni azienda > Chiavi API).
- Cliccare su Crea chiave API.
- Scegliere una scadenza o impostare una data di inizio personalizzata e un numero di ore alla scadenza della chiave.
- Assegnare alla chiave un nome univoco.
- Cliccare su Genera.
Dopo aver creato una chiave API, copiatela e conservatela in un luogo sicuro (potete usare un gestore di password), perché questa è l’unica volta che viene mostrata all’interno di MyKinsta. È possibile generare più chiavi API: sono elencate nella pagina delle chiavi API. Se avete bisogno di revocare una chiave API, cliccate su Revoca accanto al nome della chiave che volete revocare.
Come utilizzare gli strumenti per il sito di Kinsta con l’API di Kinsta
La pagina strumenti per il sito di Kinsta è un insieme di strumenti a disposizione degli utenti di Kinsta per gestire e mantenere i siti WordPress. Questi strumenti sono disponibili in MyKinsta (Siti WordPress > nome sito > Strumenti), ma al momento non tutti sono supportati dalle API di Kinsta. Il nostro team è costantemente al lavoro per aggiungere nuove funzionalità, e lo fa tenendo sotto controllo e ascoltando i feedback, come spiega Kristof Siket, Development Team Lead dell’API di Kinsta:
Il feedback degli utenti guida la definizione delle priorità di esposizione delle funzionalità. Il piano attuale non copre completamente la pagina degli strumenti; le funzionalità si basano invece sulle richieste degli utenti e sui feedback raccolti. Se ritenete che uno strumento o un endpoint specifico debba essere incluso nell’API di Kinsta, inviate il vostro feedback.
Per utilizzare gli strumenti per il sito forniti da Kinsta, è necessario ottenere l’ID dell’ambiente del proprio sito. Ogni sito in MyKinsta ha almeno un ambiente, ciascuno con un ID univoco. Per recuperare l’ID dell’ambiente, è possibile sfruttare l’API di Kinsta ottenendo prima l’ID del sito e poi utilizzandolo come parametro per accedere ai dati dell’ambiente corrispondente.
Per recuperare l’ID del sito, potete utilizzare l’endpoint /sites che restituisce l’elenco dei vostri siti. Una volta ottenuto l’ID del sito, è possibile recuperare l’ID dell’ambiente facendo una richiesta GET all’endpoint /sites, specificando l’ID e aggiungendo l’endpoint /environments.
Ecco un esempio di codice che dimostra come ottenere questo risultato utilizzando la Fetch API di JavaScript:
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);Nel codice sopra riportato, definite la variabile siteId con l’ID del vostro sito. Poi fate una richiesta fetch all’endpoint dell’API di Kinsta per recuperare gli ambienti del sito specificato. Ricordatevi di inserire la chiave API nell’intestazione Authorization.
Dopo aver ricevuto la risposta, i dati vengono registrati nella console, che contiene i dettagli del vostro ambiente, compreso l’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": {}
}
]
}
}Ora che sapete come accedere all’ID del vostro ambiente, usiamo gli strumenti del sito di Kinsta in modo programmatico.
Come cancellare la cache del sito con l’API di Kinsta
Per svuotare la cache del sito con l’API di Kinsta, basta inviare una richiesta post all’endpoint /sites/tools/clear-cache. Per questo è necessario passare l’ID dell’ambiente come corpo della richiesta.
Il codice che segue mostra come realizzare questa operazione utilizzando JavaScript e la 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);
};Nel codice qui sopra, viene definita una funzione clearSiteCache che accetta due parametri: l’URL dell’endpoint dell’API e un oggetto contenente la configurazione per la richiesta fetch. La configurazione comprende i campi method, headers e body.
Il campo body contiene il payload della richiesta, ovvero l’ID dell’ambiente. Utilizza JSON.stringify per convertire l’oggetto in una stringa JSON. Sostituite il valore environment_id con l’ID effettivo dell’ambiente che volete riavviare. Una volta inviata la richiesta, i dati della risposta vengono registrati nella console.
Creare un’applicazione React per programmare le attività di manutenzione con l’API di Kinsta
Con l’introduzione delle API di Kinsta, ora è possibile costruire interfacce personalizzate che offrono una flessibilità senza precedenti. Un esempio è un’applicazione che permette di programmare le attività di manutenzione del proprio sito. Immaginate di programmare lo svuotamento della cache o il riavvio del motore PHP del vostro sito in modo che avvenga automaticamente a mezzanotte in un luogo specifico. Questo può aiutarvi a garantire prestazioni ottimali senza difficoltà.
Come iniziare
Per seguire questo tutorial, è richiesta una conoscenza di base di HTML, CSS e JavaScript e una certa familiarità con React. L’obiettivo principale di questo progetto è dimostrare l’utilizzo dell’API di Kinsta, quindi questo articolo non entra nel dettaglio della creazione o dello stile dell’interfaccia utente.
Per rendere più semplice la configurazione del progetto, è stato preparato un progetto iniziale. Seguite questi passaggi:
1. Create un repository Git utilizzando questo modello su GitHub. Selezionate Use this template > Create new repository per copiare il codice di partenza in un nuovo repository all’interno dell’account GitHub e selezionate la casella per includere tutti i branch.
2. Estraete il repository sul vostro computer locale e passate al branch starter-files utilizzando il seguente comando:
git checkout starter-files3. Installate le dipendenze necessarie eseguendo il comando npm install. Una volta completata l’installazione, potrete lanciare il progetto sul vostro computer locale con npm run start. In questo modo si apre il progetto all’indirizzo http://localhost:3000/.
I file del progetto
All’interno della cartella src di questo progetto ci sono due sottocartelle principali: components e pages. La cartella components contiene componenti riutilizzabili, come l’header e il footer, utilizzati in tutte le pagine (Home, Operations, Tools, Schedule).
In questo progetto, l’obiettivo principale è quello di implementare la logica delle pagine Home e Tools, in quanto lo stile, il routing e altre logiche sono già state realizzate.
La pagina Home contiene un modulo che elenca tutti i siti dell’account MyKinsta. Ogni volta che questa pagina viene visualizzata, l’hook useEffect recupera immediatamente un elenco di tutti i siti e li inserisce in un campo di selezione del modulo. L’ID di ogni sito viene utilizzato come valore per l’opzione corrispondente.
<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>
Quando si seleziona un sito e si clicca sul pulsante “Proceed”, viene attivata la funzione handleSubmission. In questa funzione, l’API di Kinsta viene utilizzata per recuperare l’ID dell’ambiente del sito. Quindi, passate questo ID come parametro di percorso alla pagina Tools.
Nella pagina Tools potete eseguire e programmare attività di manutenzione per il sito selezionato, come la cancellazione della cache del sito o il riavvio del motore PHP. Per eseguire una di queste azioni nella pagina Tools, è necessario l’ID dell’ambiente, che viene passato come parametro di percorso a questa pagina.
Quando iniziate azioni come la cancellazione della cache del sito o il riavvio del motore PHP, venite automaticamente indirizzati alla pagina Operations. Qui potete seguire l’avanzamento dell’operazione utilizzando l’ID assegnato.
Quando pianificate un’attività, venite indirizzati alla pagina Schedule, che mostra informazioni dettagliate sull’attività pianificata.
Una volta raggiunto l’orario previsto, l’operazione specifica inizia e vi reindirizza automaticamente alla pagina Operations, dove potete monitorare l’avanzamento dell’operazione.
Interagire con l’API di Kinsta in React
Una volta realizzata l’interfaccia utente, il passo successivo sarà quello di gestire l’invio del modulo nella pagina iniziale e di recuperare l’ID dell’ambiente del sito selezionato tramite l’API di Kinsta, prima di indirizzare l’utente alla pagina Tools con l’ID come parametro del percorso.
Per interagire con l’API di Kinsta, avrete bisogno del vostro ID azienda e della vostra Chiave API. Quando effettuate chiamate API in un progetto che sarà ospitato sul cloud, le vostre credenziali, come la chiave API, devono essere conservate in modo sicuro per evitare qualsiasi forma di compromissione.
Potete memorizzarle in modo sicuro come variabili d’ambiente nella vostra applicazione React creando un file .env nella cartella principale del progetto. In questo file, aggiungete le seguenti righe:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Per accedere a queste variabili d’ambiente all’interno del vostro progetto, potete utilizzare la sintassi process.env.THE_VARIABLE. Ad esempio, per accedere a REACT_APP_KINSTA_COMPANY_ID, userete process.env.REACT_APP_KINSTA_COMPANY_ID.
Recuperare l’ID dell’ambiente con l’API di Kinsta in React
Nella pagina iniziale, quando si seleziona un sito e si clicca sul pulsante di invio, viene attivata la funzione handleSubmission. Questa funzione utilizza l’API Fetch (o il metodo di richiesta HTTP che preferite) per effettuare una richiesta GET all’API di Kinsta.
Per evitare di ripetere le intestazioni e l’URL dell’API di Kinsta in ogni chiamata API, memorizziamo headers e KinstaAPIUrl come costanti.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])La variabile KinstaAPIUrl memorizza l’URL di base dell’API di Kinsta. La costante headers viene creata utilizzando l’hook useMemo per garantire che l’oggetto headers venga creato una sola volta e non cambi tra un rendering e l’altro. Questo include l’intestazione Authorization, che contiene la chiave API di Kinsta recuperata dalle variabili d’ambiente.
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);
}Nel codice qui sopra, viene creata una funzione asincrona (fetchEnvironmentId) che prende il siteId ottenuto dal sito selezionato e lo passa all’endpoint dell’API per recuperare i dati dell’ambiente.
Una volta ricevuta la risposta, estraete l’ID dell’ambiente dai dati (potreste avere più di un ambiente: staging o live, quindi sono tutti memorizzati in un array; per questa demo utilizziamo l’ambiente live) e usate la funzione navigate (già importata e istanziata per voi) per reindirizzare l’utente alla pagina Tools con l’ID dell’ambiente come parametro del percorso.
Nota: tutti questi percorsi sono già configurati nel file App.js.
Eseguire operazioni di manutenzione con l’API di Kinsta in React
Nella pagina Tools, ci sono due strumenti che possono essere utilizzati per la manutenzione del sito, ognuno dei quali ha due pulsanti che permettono di eseguire l’operazione immediatamente o di programmarla (le funzioni sono state create e gli eventi onClick sono stati collegati a tutti i pulsanti). Questo tutorial spiegherà solo come riavviare il motore PHP del sito perché il codice è molto simile a quello che permette di svuotare la cache del sito: l’unica differenza è l’endpoint.
Per riavviare il motore PHP o per eseguire una qualsiasi operazione sugli strumenti del sito, avrete bisogno dell’ID dell’ambiente, che viene già passato alla pagina Tools come parametro del percorso. Il passo successivo sarà quello di recuperare questo parametro, memorizzarlo in una variabile e quindi inviare una richiesta all’API di Kinsta.
const { envId } = useParams();Memorizzate le intestazioni della richiesta e l’URL dell’API come variabili costanti, dato che non cambiano. Le intestazioni di una richiesta POST sono diverse da quelle di una richiesta GET perché hanno il valore Content-Type.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])Facendo clic sul pulsante Restart, viene invocata la funzione restartEngine. In questa funzione, inviamo una richiesta POST all’API di Kinsta, che prende l’ID dell’ambiente come payload:
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}`);
}Ogni volta che questo codice viene eseguito, si attiverà automaticamente un riavvio del motore PHP sul sito. Se controllate immediatamente la dashboard MyKinsta del sito, noterete questa notifica nella parte superiore della pagina:
Potete verificarlo in modo programmatico utilizzando l’endpoint /operations dell’API di Kinsta. Nel codice qui sopra, una volta che la richiesta è andata a buon fine, verrete automaticamente indirizzati alla pagina Operations con l’ID dell’operazione come parametro del percorso, dove potrete verificare lo stato dell’operazione. Controllate la pagina Operations per vedere come viene gestita.
Come programmare un’attività con l’API di Kinsta in React
Programmare un’attività con JavaScript significa calcolare il tempo stimato per l’esecuzione dell’attività in millisecondi e quindi utilizzare la funzione setTimeout.
Nella pagina Tools, facendo clic sul pulsante Schedule, appare una finestra con due campi del modulo. Questi campi permettono di selezionare la data e l’ora desiderate per l’operazione. I dati inseriti vengono utilizzati per calcolare il tempo totale, in millisecondi, che intercorre tra il momento attuale e l’inizio dell’operazione.
Per ottenere questo risultato, estraete il giorno, il mese e l’anno dal campo data passando la data in un oggetto new Date e poi memorizzateli in variabili separate.
let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();Poi estraete l’ora e i minuti dal campo time:
let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);Con questi valori, potete calcolare il tempo previsto in millisecondi:
const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;A questo punto, avete il tempo previsto in millisecondi. Ora potete creare una funzione setTimeout che si attiva alla data e all’ora specificate:
setTimeout(function () {
restartEngine();
}, eta_ms);Nel codice qui sopra, quando viene raggiunto l’orario specificato, viene invocata la funzione restartEngine() per riavviare il motore PHP.
Ecco come apparirà il codice completo:
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}`);
}Quando pianificate un’attività, verrete indirizzati alla pagina Schedule dove potrete visualizzare i dettagli della pianificazione. Quando viene raggiunto l’orario previsto, verrà richiamata la funzione setTimeout, che vi porterà automaticamente alla pagina Operations per monitorare lo stato dell’operazione.
A questo punto, avete implementato la funzionalità di pianificazione e avete attivato l’API di Kinsta per riavviare il motore PHP del sito. Potete fare lo stesso per svuotare la cache del sito.
Come distribuire un’applicazione React con Kinsta
Per distribuire il vostro progetto React sull’Hosting di Applicazioni di Kinsta, dovete inviare il progetto al vostro provider Git preferito. Una volta che il progetto sarà ospitato su GitHub, GitLab o Bitbucket, potrete procedere al deploy su Kinsta.
Ecco i passaggi da seguire per distribuire il repository su Kinsta:
- Accedere o creare un account Kinsta nella dashboard MyKinsta.
- Nella barra laterale di sinistra, cliccare su “Applicazioni” e poi su “Aggiungi servizio”.
- Selezionare “Applicazione” dal menu a tendina per distribuire un’applicazione React su Kinsta.
- Nella finestra di dialogo, scegliere il repository che si vuole distribuire. Se avete più branch, potete selezionare il branch desiderato e dare un nome all’applicazione.
- Selezionare uno dei data center disponibili nell’elenco delle opzioni di 25. Kinsta rileva automaticamente il comando di avvio dell’applicazione.
Infine, non è sicuro inviare le chiavi API a host pubblici come un provider Git. Potete aggiungerle come variabili d’ambiente utilizzando lo stesso nome e valore della variabile specificata nel file .env.
Una volta avviata la distribuzione dell’applicazione, il processo inizia e in genere si conclude in pochi minuti. Una distribuzione riuscita genera un link all’applicazione, come http://site-tools-scheduler-6u1a5.kinsta.app/.
Riepilogo
Con le API di Kinsta è possibile occuparsi delle attività ricorrenti per i siti WordPress in modo ancora più efficiente. E nel prossimo futuro sarà possibile fare ancora di più.
In questo articolo abbiamo visto come utilizzare le API di Kinsta costruendo da zero un’applicazione React – anch’essa ospitata su Kinsta – che permette di programmare il riavvio di PHP e di cancellare la cache del sito attraverso una bella dashboard che potrete anche clonare e personalizzare in base alle vostre necessità.
Come utilizzate le API di Kinsta? Quali funzioni vorreste che aggiungessimo in futuro?
Lascia un commento