Au fil des ans, Kinsta a fait des progrès significatifs dans la rationalisation de la gestion des sites web via le tableau de bord MyKinsta. Ce puissant tableau de bord permet aux utilisateurs de gérer leurs sites et d’effectuer diverses opérations de maintenance, notamment le redémarrage du moteur PHP et le vidage du cache de leur site.
Cependant, l’introduction de l’API Kinsta porte la gestion des sites web à un tout autre niveau. Les développeurs peuvent désormais tirer parti de la puissance de l’API Kinsta pour améliorer le processus de gestion, créer des interfaces personnalisées et même élaborer des applications de planification pour automatiser les tâches essentielles.
Ce tutoriel plonge dans le monde de l’API Kinsta et explique comment construire une application React pour planifier des tâches de maintenance essentielles comme le redémarrage du moteur PHP et le nettoyage du cache avec l’API Kinsta.
Voici une démonstration en direct de l’application de planification des outils du site.
Comprendre l’API Kinsta
L’API Kinsta est un outil puissant qui vous permet d’interagir avec la plateforme d’hébergement WordPress infogérée de Kinsta de manière programmatique. Elle peut vous aider à automatiser diverses tâches liées aux services fournis par Kinsta, y compris la création de sites, la récupération d’informations sur les sites, l’obtention du statut d’un site, et bien plus encore.
Pour utiliser l’API de Kinsta, vous devez avoir un compte avec au moins un site, une application ou une base de données WordPress dans MyKinsta. Vous devez également générer une clé API pour vous authentifier et accéder à votre compte via l’API.
Pour générer une clé API :
- Allez sur votre tableau de bord MyKinsta.
- Naviguez jusqu’à la page des clés API (Votre nom > PRéglages de l’entreprise > Clés API).
- Cliquez sur Créer une clé API.
- Choisissez une date d’expiration ou définissez une date de début personnalisée et un nombre d’heures pour l’expiration de la clé.
- Donnez un nom unique à la clé.
- Cliquez sur Générer.
Après avoir créé une clé API, copiez-la et conservez-la dans un endroit sûr (vous pouvez utiliser un gestionnaire de mot de passe), car c’est la seule fois où elle sera révélée dans MyKinsta. Vous pouvez générer plusieurs clés API – elles sont listées sur la page Clés API. Si vous devez révoquer une clé API, cliquez sur Révoquer à côté de celle que vous souhaitez révoquer.
Comment utiliser les outils de site de Kinsta avec l’API de Kinsta
L’outil de site Kinsta est un ensemble d’outils mis à la disposition des utilisateurs de Kinsta pour les aider à gérer et à entretenir leurs sites WordPress. Ces outils sont disponibles via MyKinsta (Sites WordPress Sites > Nom du site > Outils), mais ils ne sont pas tous supportés par l’API de Kinsta pour le moment. Notre équipe travaille constamment à l’ajout de nouvelles fonctionnalités, en suivant de près et en écoutant les commentaires, comme l’explique Kristof Siket, chef de l’équipe de développement de l’API Kinsta :
Les commentaires des utilisateurs déterminent l’ordre de priorité de l’exposition des fonctionnalités. Le plan actuel ne couvre pas entièrement la page Outils ; les fonctionnalités sont plutôt basées sur les demandes des utilisateurs et les commentaires recueillis.Si vous pensez qu’un outil ou un point de terminaison spécifique devrait être inclus dans l’API Kinsta, n’hésitez pas à nous faire part de vos commentaires.
Afin d’utiliser les outils de site fournis par Kinsta, il est nécessaire d’obtenir l’identifiant d’environnement de votre site. Chaque site sur MyKinsta a au moins un environnement, chacun avec un ID unique. Pour récupérer l’ID de l’environnement, vous pouvez utiliser l’API de Kinsta en obtenant d’abord votre ID de site et en l’utilisant ensuite comme paramètre pour accéder aux données de l’environnement correspondant.
Pour récupérer l’ID de votre site, vous pouvez utiliser le point de terminaison /sites qui renvoie une liste de vos sites. Une fois que vous avez obtenu l’identifiant du site, vous pouvez récupérer l’identifiant de l’environnement en effectuant une requête GET au point de terminaison /sites, en spécifiant l’identifiant et en ajoutant le point de terminaison /environments au point de terminaison.
Voici un exemple d’extrait de code qui montre comment réaliser cette opération à l’aide de l’API JavaScript Fetch:
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);Dans le code ci-dessus, vous définissez la variable siteId avec l’ID de votre site. Ensuite, vous faites une requête de récupération au point de terminaison de l’API Kinsta pour récupérer les environnements du site spécifié. Veillez à inclure la clé API dans l’en-tête d’autorisation.
Après avoir reçu la réponse, les données sont enregistrées dans la console, qui contient les détails de votre ou vos environnements, y compris 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": {}
}
]
}
}Maintenant que vous savez comment accéder à l’ID de votre environnement, nous allons utiliser les outils de site de Kinsta de manière programmatique.
Comment vider le cache du site avec l’API Kinsta
Pour vider le cache de votre site avec l’API Kinsta, vous devez envoyer une requête post au point de terminaison /sites/tools/clear-cache . Pour cela, vous devez transmettre l’identifiant de l’environnement dans le corps de la requête.
Le code ci-dessous montre comment procéder en utilisant JavaScript et l’API Fetch :
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);
};Dans le code ci-dessus, une fonction clearSiteCache est définie qui prend deux paramètres : l’URL du point de terminaison de l’API et un objet contenant la configuration de la requête de récupération. La configuration comprend les éléments suivants : method, headers, et body.
Le champ body est l’endroit où vous transmettez la charge utile de la requête, qui est l’identifiant de l’environnement. Vous utilisez JSON.stringify pour convertir l’objet en chaîne JSON. Remplacez la valeur environment_id par l’ID réel de l’environnement que vous souhaitez redémarrer. Une fois la requête envoyée, les données de la réponse sont enregistrées dans la console.
Construire une application React pour planifier des tâches de maintenance avec l’API Kinsta
Avec l’introduction de l’API Kinsta, vous pouvez désormais créer des interfaces personnalisées qui offrent une flexibilité inégalée. L’un de ces exemples est une application qui vous permet de planifier les tâches de maintenance de votre site. Imaginez que vous planifiez le vidage du cache de votre site ou le redémarrage du moteur PHP pour qu’ils se produisent automatiquement à minuit dans un lieu spécifique. Cela peut vous aider à garantir des performances optimales sans difficulté.
Pour commencer
Pour suivre ce tutoriel, il est conseillé d’avoir des connaissances de base en HTML, CSS et JavaScript, ainsi qu’une certaine familiarité avec React. L’objectif principal de ce projet est de démontrer l’utilisation de l’API Kinsta, c’est pourquoi cet article n’entre pas dans les détails de la création ou du style de l’interface utilisateur et d’autres aspects logiques.
Pour simplifier le processus de configuration du projet, un projet de démarrage a été préparé pour vous. Suivez les étapes suivantes pour commencer :
1. Créez un dépôt Git en utilisant ce modèle sur GitHub. Sélectionnez Utiliser ce modèle > Créer un nouveau dépôt pour copier le code de démarrage dans un nouveau dépôt au sein de votre compte GitHub, et assurez-vous de cocher la case pour inclure toutes les branches.
2. Téléchargez le dépôt sur votre ordinateur local et passez à la branche starter-files à l’aide de la commande ci-dessous :
git checkout starter-files3. Installez les dépendances nécessaires en exécutant la commande npm install. Une fois l’installation terminée, vous pouvez lancer le projet sur votre ordinateur local à l’aide de la commande npm run start. Le projet s’ouvre alors à l’adresse http://localhost:3000/.
Comprendre les fichiers du projet
Le dossier src de ce projet contient deux sous-dossiers principaux : components et pages. Le dossier components contient des composants réutilisables, tels que l’en-tête et le pied de page, utilisés sur toutes les pages (Home, Operations, Tools, Schedule).
Dans ce projet, vous vous concentrerez principalement sur l’implémentation de la logique sur les pages Home et Tools, étant donné que le style, le routage et d’autres éléments logiques ont déjà été réalisés.
La page d’accueil contient un formulaire qui liste tous les sites de votre compte MyKinsta. Chaque fois que cette page est affichée, le hook useEffect récupère immédiatement une liste de tous vos sites et les remplit dans un champ de sélection du formulaire. L’identifiant de chaque site est utilisé comme valeur pour l’option correspondante.
<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>
Lorsqu’un site est sélectionné et que le bouton « Proceed » est cliqué, la fonction handleSubmission est déclenchée. Dans cette fonction, l’API Kinsta est utilisée pour récupérer l’identifiant d’environnement du site. Ensuite, transmettez cet identifiant comme paramètre de route à la page Tools.
La page Tolls est l’endroit où vous pouvez effectuer et planifier des tâches de maintenance pour le site sélectionné, comme vider le cache du site ou redémarrer le moteur PHP. Pour effectuer l’une de ces actions sur la page Tools, vous avez besoin de l’identifiant de l’environnement. Il est donc transmis en tant que paramètre de route à cette page.
Lorsque vous initiez des actions telles que vider le cache du site ou redémarrer le moteur PHP, vous êtes automatiquement dirigé vers la page Opérations. Ici, vous pouvez suivre la progression de votre opération en utilisant l’ID qui lui a été attribué.
Lorsque vous planifiez une tâche, vous êtes dirigé vers la page Schedule, qui affiche des informations détaillées sur la tâche planifiée.
Une fois l’heure planifiée atteinte, l’opération spécifique commence et vous redirige automatiquement vers la page Operations, où vous pouvez suivre la progression de l’opération.
Interagir avec l’API Kinsta dans React
L’interface utilisateur (UI) étant maintenant en place, votre prochaine étape consiste à gérer la soumission du formulaire sur la page d’accueil et à récupérer l’ID de l’environnement de votre site sélectionné via l’API Kinsta avant de faire naviguer l’utilisateur vers la page Tools avec l’ID comme paramètre d’itinéraire.
Pour interagir avec l’API de Kinsta, vous avez besoin de l’ID de votre entreprise et de votre clé API. Lorsque vous faites des appels API dans un projet qui sera hébergé sur le cloud, vos informations d’identification, comme la clé API, doivent être stockées en toute sécurité pour éviter toute forme de compromission.
Vous pouvez les stocker en toute sécurité en tant que variables d’environnement dans votre application React en créant un fichier .env dans le dossier racine de votre projet. Dans ce fichier, ajoutez les lignes suivantes :
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Pour accéder à ces variables d’environnement dans votre projet, vous pouvez utiliser la syntaxe process.env.THE_VARIABLE. Par exemple, pour accéder à REACT_APP_KINSTA_COMPANY_ID, vous devez utiliser process.env.REACT_APP_KINSTA_COMPANY_ID.
Récupérer l’ID de l’environnement avec l’API Kinsta dans React
Sur la page d’accueil, lorsqu’un site est sélectionné et que le bouton d’envoi est cliqué, la fonction handleSubmission est déclenchée. Cette fonction utilise l’API Fetch (ou votre méthode de requête HTTP préférée) pour effectuer une requête GET à l’API Kinsta.
Pour éviter de répéter les en-têtes et l’URL de l’API Kinsta à chaque appel d’API, stockons les headers et KinstaAPIUrl en tant que constantes.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])La variable KinstaAPIUrl stocke l’URL de base de l’API Kinsta. La constante headers est créée à l’aide du hook useMemo pour s’assurer que l’objet headers n’est créé qu’une seule fois et ne change pas entre les rendus. Elle inclut l’en-tête Authorization, qui contient la clé de l’API Kinsta récupérée dans les variables d’environnement.
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);
}Dans le code ci-dessus, une fonction asynchrone (fetchEnvironmentId) est créée, qui prend le siteId obtenu à partir du site sélectionné et le transmet au point de terminaison de l’API pour récupérer les détails de l’environnement.
Une fois la réponse reçue, extrayez l’ID de l’environnement des données (vous pouvez avoir plus d’un environnement : staging ou production – ils sont donc tous stockés dans un tableau, utilisons l’environnement de production pour cette démo) et utilisez la fonction navigate (déjà importée et instanciée pour vous) pour rediriger l’utilisateur vers la page Tools avec l’ID de l’environnement comme paramètre de la route.
Remarque : toutes ces routes sont déjà configurées dans le fichier App.js.
Effectuer des tâches de maintenance avec l’API Kinsta dans React
Sur la page Tools, il y a deux outils qui peuvent être utilisés pour maintenir votre site, chacun ayant deux boutons pour effectuer l’opération immédiatement ou planifier l’opération (les fonctions ont été créées, et les événements onClick ont été attachés à tous les boutons pour vous). Ce tutoriel explique seulement comment redémarrer le moteur PHP de votre site car c’est très similaire à la façon de vider le cache de votre site – la seule différence est le point de terminaison.
Pour redémarrer le moteur PHP ou effectuer n’importe quelle opération d’outil de site, vous avez besoin de l’ID de l’environnement, qui est déjà passé à la page Tools en tant que paramètre de route. L’étape suivante consiste à récupérer ce paramètre, à le stocker dans une variable, puis à envoyer une requête à l’API Kinsta.
const { envId } = useParams();Enregistrez les en-têtes de la requête et l’URL de l’API en tant que variables constantes puisqu’elles ne changent pas. L’en-tête d’une requête POST est différent d’une requête GET car il contient la valeur 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}`
}
}, [])Lorsque vous cliquez sur le bouton Restart, la fonction restartEngine est appelée. Dans cette fonction, envoyons une requête POST à l’API Kinsta, qui prend l’ID de l’environnement comme charge utile :
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}`);
}Chaque fois que le code ci-dessus est exécuté, il déclenche automatiquement un redémarrage du moteur PHP sur votre site. Si vous consultez immédiatement le tableau de bord MyKinsta de votre site, vous remarquerez cette notification en haut de votre page :
Vous pouvez le vérifier de manière programmatique en utilisant le point de terminaison /operations de l’API Kinsta. Dans le code ci-dessus, une fois que cette requête est réussie, vous êtes automatiquement dirigé vers la page Operations avec l’ID de l’opération comme paramètre de route où vous pouvez vérifier le statut de l’opération. Assurez-vous de consulter la page des opérations pour voir comment cela est géré.
Comment planifier une tâche avec l’API Kinsta dans React
Pour planifier une tâche avec JavaScript, vous devez calculer la durée estimée de la tâche en millisecondes, puis utiliser la fonction setTimeout.
Sur la page Tools, lorsque vous cliquez sur le bouton Schedule, une fenêtre modale apparaît avec deux champs de formulaire. Ces champs vous permettent de sélectionner la date et l’heure souhaitées pour l’exécution de l’opération. Les données saisies sont utilisées pour calculer le temps total, en millisecondes, entre le moment présent et le moment où l’opération est censée commencer.
Pour cela, extrayez le jour, le mois et l’année du champ de la date en passant la date dans un objet new Date, puis stockez-les dans des variables distinctes.
let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();Ensuite, extrayons l’heure et les minutes du champ time :
let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);Avec ces valeurs obtenues, vous pouvez calculer le temps attendu en millisecondes :
const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;À ce stade, vous disposez du temps prévu en millisecondes. Vous pouvez maintenant créer une fonction setTimeout qui se déclenche à la date et à l’heure spécifiées :
setTimeout(function () {
restartEngine();
}, eta_ms);Dans le code ci-dessus, la fonction restartEngine() est appelée lorsque l’heure spécifiée est atteinte pour redémarrer le moteur PHP.
Voici à quoi ressemblera le code complet :
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}`);
}Lorsque vous planifiez une tâche, vous êtes dirigé vers la page de planification où vous pouvez consulter les détails de la planification. Lorsque l’heure prévue est atteinte, la fonction setTimeout est appelée, ce qui permet de naviguer automatiquement vers la page des opérations pour suivre l’état de l’opération.
À ce stade, vous avez mis en œuvre la fonctionnalité de planification et déclenché l’API Kinsta pour redémarrer le moteur PHP de votre site. Vous pouvez faire de même pour vider le cache de votre site.
Comment déployer votre application React avec Kinsta
Pour déployer votre projet React sur l’hébergement d’applications de Kinsta, vous devez pousser le projet vers votre fournisseur Git préféré. Lorsque votre projet est hébergé sur GitHub, GitLab ou Bitbucket, vous pouvez procéder au déploiement sur Kinsta.
Pour déployer votre dépôt sur Kinsta, suivez les étapes suivantes :
- Connectez-vous ou créez votre compte Kinsta sur le tableau de bord MyKinsta.
- Dans la colonne latérale de gauche, cliquez sur « Applications », puis sur « Ajouter un service ».
- Sélectionnez « Application » dans le menu déroulant pour déployer une application React sur Kinsta.
- Dans la fenêtre modale qui s’affiche, choisissez le dépôt que vous souhaitez déployer. Si vous avez plusieurs branches, vous pouvez sélectionner la branche souhaitée et donner un nom à votre application.
- Sélectionnez l’un des emplacements de centre de données disponibles dans la liste des 25 options. Kinsta détecte automatiquement la commande de démarrage de votre application.
Enfin, il n’est pas sûr d’envoyer les clés d’API à des hôtes publics comme votre fournisseur Git. Lors de l’hébergement, vous pouvez les ajouter en tant que variables d’environnement en utilisant le même nom de variable et la même valeur que ceux spécifiés dans le fichier .env.
Une fois que vous avez lancé le déploiement de votre application, le processus commence et se termine généralement en quelques minutes. Un déploiement réussi génère un lien vers votre application, comme http://site-tools-scheduler-6u1a5.kinsta.app/.
Résumé
Avec l’API Kinsta, vous pouvez vous occuper des tâches récurrentes pour vos sites WordPress de manière encore plus efficace. Et dans un futur proche, vous pourrez faire encore plus.
Dans cet article, vous avez appris à tirer parti de l’API Kinsta en construisant une application React à partir de zéro – hébergée sur Kinsta également – qui vous permet de planifier le redémarrage de PHP et de vider le cache du site à travers un tableau de bord agréable que vous pouvez également cloner et personnaliser pour votre propre cas d’utilisation.
Comment utilisez-vous l’API Kinsta ? Quelles sont les fonctionnalités que vous aimeriez voir ajoutées/exposées prochainement ?
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire