Vous n’avez pas besoin de gérer un grand nombre des 800 millions de sites WordPress présents sur le web avant de chercher des moyens de lancer de nouveaux sites de manière efficace.
Cloner une configuration WordPress existante est un moyen d’être rapidement opérationnel, et les clients du service d’hébergement WordPress infogéré de Kinsta savent qu’il est facile de le faire à partir de notre tableau de bord MyKinsta convivial.
De plus, vous pouvez cloner des sites WordPress à grande échelle en utilisant vos technologies de développement d’applications préférées et l’API de Kinsta. Dans ce tutoriel, nous utilisons cette API et React, l’une des nombreuses bibliothèques JavaScript populaires, pour montrer comment cela fonctionne.
Ce que vous construisez
Voici le scénario : Vous êtes une agence de développement WordPress avec un ou plusieurs sites qui peuvent être utilisés comme modèles de départ. L’application React pour le clonage de sites WordPress que nous construisons ressemble à ceci :
Pré-requis
Pour suivre ce tutoriel, vous aurez besoin d’une compréhension de base de HTML, CSS et JavaScript et d’une certaine familiarité avec React. Vous aurez également besoin de Node.js et de npm (le gestionnaire de paquets Node) ou de yarn installés sur votre ordinateur. Ce projet se concentre sur la construction d’une application de clonage WordPress à l’aide de React et de l’API Kinsta plutôt que sur les détails de la création et du style de l’interface utilisateur.
Configuration de l’environnement de développement
Vous pouvez créer une application React à partir de zéro et développer votre propre interface, ou vous pouvez utiliser le modèle de démarrage Git mentionné ci-dessus en suivant les étapes suivantes :
- Visitez le dépôt GitHub de ce projet.
- Sélectionnez Utiliser ce modèle > Créer un nouveau dépôt pour copier le code de démarrage dans un dépôt de votre compte GitHub. (Cochez la case pour inclure toutes les branches)
- Téléchargez le dépôt sur votre ordinateur local et passez à la branche starter-files à l’aide de la commande :
git checkout starter-files
- 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 est le cœur d’une application React, car il contient le JavaScript nécessaire à webpack. Dans ce dossier se trouve App.js, où sont configurées les deux routes de ce projet.
Dans le dossier src se trouvent les sous-dossiers components et pages. Le dossier components contient des composants réutilisables, tels que Header.jsx et Footer.jsx, utilisés dans les pages Home.jsx et Operations.jsx .
Vous vous concentrez ici sur l’implémentation de la logique dans Home.jsx et Operations.jsx, puisque le style et le routage peuvent être trouvés dans nos fichiers de démarrage GitHub.
Home.jsx a un formulaire avec deux champs : le nom du site que vous créez et un champ de sélection qui liste les sites WordPress trouvés dans votre compte MyKinsta (cette liste est récupérée via l’API Kinsta).
Lorsque vous cliquez sur le bouton de soumission du formulaire (Cloner le site), un objet contenant la propriété operation_id est renvoyé. Cet identifiant et ce nom d’affichage seront transmis comme paramètres de route à Operations.jsx, où l’état de l’opération de clonage est signalé. L’interface comprendra également des liens permettant d’accéder à l’interface d’administration de WordPress et à la page d’accueil du site.
Utilisation de l’API Kinsta pour cloner un site WordPress
Dans Home.jsx, trois requêtes API seront faites à l’API Kinsta. La première requête vise à obtenir une liste de sites sur votre compte Kinsta. Cette liste sera stockée dans un état, puis itérée dans le champ de sélection. Cette requête sera effectuée immédiatement après le rendu de la page à l’aide du crochet useEffect.
Les deuxième et troisième requêtes sont effectuées une fois que vous avez cliqué sur le bouton Cloner le site. La deuxième requête obtient l’identifiant de l’environnement du site que vous souhaitez cloner. La troisième demande utilise cet identifiant d’environnement et le nom d’affichage du site pour lancer le clonage du site.
Interagir avec l’API Kinsta dans React
Dans ce tutoriel, vous interagissez avec deux points de terminaison de l’API Kinsta :
/sites: Le premier peut renvoyer une liste de tous les sites, demander un ID d’environnement de site et enfin cloner un site existant./operations: Ce point est utilisé pour obtenir le statut de l’opération. Par exemple, lorsque l’opération de clonage de site est en cours, vous pouvez utiliser ce point de terminaison pour suivre de manière programmatique l’état de l’opération et déterminer quand elle est terminée.
Pour interagir avec l’API Kinsta, vous avez besoin de l’ID de votre entreprise (que vous trouverez dans MyKinsta sous Entreprise > Détails de facturation > ID de l’entreprise) et d’une clé API. Voici comment créer une clé API Kinsta.
Une fois que vous avez ces informations d’identification, il est préférable de les stocker en toute sécurité en tant que variables d’environnement dans votre application React. Pour configurer les variables d’environnement, créez 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.
Cloner un site existant avec l’API Kinsta
Commençons par récupérer la liste de tous les sites lors du rendu de Home.jsx en utilisant le hook useEffect et en les stockant dans un état. Pour ce faire, importez les hooks useEffect et useState et créez un état pour stocker le tableau des sites qui seront récupérés :
import { useState, useEffect } from 'react';
const [sites, setSites] = useState([]);Ensuite, utilisez le hook useEffect pour interroger l’API Kinsta à l’aide de l’API JavaScript Fetch. Tout d’abord, créez deux variables constantes pour stocker les en-têtes et l’URL de l’API Kinsta. Cela permet d’éviter les répétitions puisque vous enverrez plus d’une requête à l’API Kinsta sur cette page :
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
};
}, []);Dans le code ci-dessus, le hook useMemo mémorise l’objet headers de sorte qu’il n’a pas besoin d’être réévalué à chaque rendu puisque sa valeur est constante. Vous pouvez maintenant créer la requête API :
useEffect(() => {
const fetchAllSites = async () => {
const query = new URLSearchParams({
company: process.env.REACT_APP_KINSTA_COMPANY_ID,
}).toString();
const resp = await fetch(
`${KinstaAPIUrl}/sites?${query}`,
{
method: 'GET',
headers
}
);
const data = await resp.json();
setSites(data.company.sites);
};
fetchAllSites();
}, [headers]);Dans le code ci-dessus, une fonction asynchrone fetchAllSites est créée. Dans cette fonction, vous définissez d’abord le paramètre query (l’ID de votre entreprise) récupéré dans votre fichier .env. Ensuite, vous faites une demande GET au point de terminaison /sites de l’API Kinsta en utilisant le paramètre query. La réponse est alors stockée dans l’état sites que vous avez créé précédemment. Enfin, vous appelez fetchAllSites pour lancer le processus de récupération.
Intégrons maintenant les valeurs stockées dans l’état sites en les parcourant en boucle pour remplir le champ de sélection. Le nom affiché sera montré à l’utilisateur, tandis que l’ID du site sera utilisé comme valeur de l’option. Ainsi, lorsque le formulaire est soumis, l’ID du site sélectionné peut être utilisé pour demander des détails sur l’environnement :
<div className="input-div">
<label>Select a site</label>
<span>Select the site you want to clone</span>
<select className="form-control">
<option> value=""></option>
{sites && (
sites.map((site) => {
return (
<option> key={site.id} value={site.id}>{site.display_name}</option>
)
})
)}
</select>
</div>Passons maintenant à la gestion de l’envoi du formulaire et à l’extraction des valeurs du formulaire. Pour ce faire, vous devez créer des variables d’état pour chaque champ de saisie :
const [selectedSiteId, setSelectedSiteId] = useState('');
const [displayName, setDisplayName] = useState('');Ensuite, liez les champs du formulaire à leurs valeurs d’état respectives en ajoutant les attributs value et onChange à chaque élément de saisie. Voici à quoi ressemblera le formulaire :
<form>
<div className="form-container">
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
</div>
<div className="input-div">
<label>Select a site</label>
<span>Select the site you want to clone</span>
<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>
</div>
<button className='btn'>Clone Site</button>
</div>
</form>Dans le code ci-dessus, l’attribut value de chaque élément de saisie est défini sur la variable d’état correspondante, et l’attribut onChange est utilisé pour mettre à jour la valeur d’état lorsque l’utilisateur interagit avec les champs de saisie.
Pour gérer l’envoi du formulaire, attachez une méthode onSubmit à l’élément de formulaire. Par exemple, vous pouvez attacher une méthode à l’élément de formulaire :
<form> onSubmit={handleSubmission}>
{/* form details */}
</form>Définissez la méthode handleSubmission, qui consiste à effectuer deux requêtes à l’API de Kinsta. La première requête récupère l’ID de l’environnement du site à cloner, et la seconde exécute l’opération de clonage.
Commençons par récupérer l’ID de l’environnement. Dans la méthode handleSubmission, créez une fonction asynchrone pour gérer cette requête. La fonction enverra une requête GET au point de terminaison /sites, en ajoutant l’ID du site sélectionné, suivi du paramètre /environments du point de terminaison :
const handleSubmission = async (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;
return envId;
}
let environmentId = await fetchEnvironmentId(selectedSiteId);
}Ci-dessus, fetchEnvironmentId est une fonction asynchrone qui envoie une requête GET à l’API Kinsta. Elle récupère les environnements du site sélectionné et extrait l’identifiant de l’environnement de la réponse. L’identifiant de l’environnement est stocké dans la variable envId, puis renvoyé. Lors de l’appel de la fonction, nous assignons sa valeur de retour à la variable envId.
À ce stade, vous pouvez cloner un site existant avec l’API de Kinsta car vous disposez des informations essentielles sur le site source : l’identifiant de l’entreprise, le nom d’affichage et l’identifiant de l’environnement.
Dans la méthode handleSubmission, créez une fonction appelée cloneExistingSite pour gérer cette requête API. Cette requête sera adressée au point de terminaison /sites/clone . Contrairement aux requêtes précédentes, les en-têtes de cette requête sont différents car vous devez spécifier Content-Type en tant que application/json. En outre, il s’agit d’une requête POST, vous devez donc inclure un corps de requête contenant la charge utile que vous souhaitez envoyer à l’API. Voici comment la requête sera structurée :
const handleSubmission = async (e) => {
e.preventDefault();
// fetch environment Id
const cloneExistingSite = async (env_Id) => {
const resp = await fetch(
`${KinstaAPIUrl}/sites/clone`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
},
body: JSON.stringify({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
display_name: displayName,
source_env_id: env_Id,
})
}
);
const data = await resp.json();
navigate(`/operations/${displayName}/${data.operation_id}`)
console.log(data);
}
cloneExistingSite(environmentId);
}Dans ce code, la requête body est construite à l’aide de JSON.stringify() pour convertir l’objet payload en une chaîne JSON. La réponse est ensuite stockée dans la variable data. En utilisant la méthode useNavigate de la bibliothèque react-router-dom, les données displayName et operation_id sont transmises en tant que paramètres de la route. Veillez à importer la méthode useNaviagte et à l’instancier :
// Import the required method
import { useNavigate } from 'react-router-dom';
// Instantiate the useNavigate method
const navigate = useNavigate();Maintenant, lorsque vous remplissez le formulaire et cliquez sur le bouton Cloner le site, un nouveau site commencera le processus de clonage, qui sera visible dans votre tableau de bord MyKinsta. Cependant, nous voulons suivre l’opération de clonage de site de manière programmatique dans l’interface utilisateur personnalisée. Vous gérez cela dans Operations.jsx en utilisant les données envoyées par la route.
Mise en œuvre de la vérification de l’état de l’opération avec l’API Kinsta
Dans Operations.jsx, récupérez l’identifiant de l’opération à partir de la route en utilisant la méthode useParams de react-router-dom. Cet identifiant sera utilisé pour effectuer une requête API chaque fois que vous cliquerez sur le bouton Vérifier l’état du site.
Tout d’abord, importez la méthode useParams et utilisez-la pour instancier les variables displayName et operationId:
// Import the useParams library
import { useParams } from 'react-router-dom';
// Instantiate the paramters
const { displayName, operationId } = useParams();Ensuite, créez un état pour stocker l’état de l’opération lorsque la requête est effectuée :
const [operationData, setOperationData] = useState({ message: "Operation in progress." });Dans le code ci-dessus, l’état est initialisé avec un message par défaut, qui sera affiché jusqu’à ce que vous cliquiez sur le bouton Vérifier l’état du site. Ajoutez un évènement onClick au bouton Vérifier l’état du site et appelez la méthode checkOperation lorsque vous cliquez sur le bouton :
<button> className='sm-btn' onClick={() => checkOperation()}>Check Site Status</button>Créez maintenant la fonction checkOperation pour effectuer la demande d’opération auprès de l’API Kinsta. Stockez les constantes headers et KinstaAPIUrl dans des variables, puis utilisez-les dans la requête API :
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
};
}, []);
const checkOperation = async () => {
const resp = await fetch(
`${KinstaAPIUrl}/operations/${operationId}`,
{
method: 'GET',
headers
}
);
const data = await resp.json();
setOperationData(data);
};Dans le code ci-dessus, une requête GET est envoyée au point de terminaison /operations avec l’ID de l’opération, et la réponse est stockée dans l’état operationData. Vous pouvez maintenant utiliser les données dans le balisage :
<div className="services">
<div className="details">
<p>{operationData.message}..</p>
<button> className='sm-btn' onClick={() => checkOperation()}>Check Site Status</button>
</div>
</div>Enfin, les données displayName transmises par la route seront utilisées pour construire l’URL du nouveau site et l’URL d’administration de WordPress. Les deux liens s’ouvriront dans un nouvel onglet.
<div className="details">
<a href={`http://${displayName}.kinsta.cloud/wp-admin/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open WordPress admin</p>
<FiExternalLink />
</a>
<a href={`http://${displayName}.kinsta.cloud/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open URL</p>
<FiExternalLink />
</a>
</div>Avec ces changements, Operations.jsx récupérera l’ID de l’opération à partir de la route, effectuera une requête API lorsque le bouton est cliqué, affichera le statut de l’opération et fournira des liens vers l’administrateur WordPress et l’URL du site sur la base des données displayName.
Déployer votre application sur Kinsta
Pour déployer votre application sur la plateforme d’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 vers 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 https://clone-wp-site-12teh.kinsta.app/.
Résumé
L’API Kinsta offre la flexibilité de créer des interfaces utilisateur personnalisées pour gérer les sites WordPress, y compris la possibilité de cloner des sites existants et de gérer divers aspects de votre environnement WordPress.
Dans cet article, vous avez appris à développer une application qui permet le clonage de sites en dehors de MyKinsta.
Comment utilisez-vous l’API Kinsta ? Quelles sont les fonctionnalités et les points de terminaison que vous aimeriez voir ajoutés à l’API ? Partagez-les dans la section des commentaires !
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