A lo largo de los años, Kinsta ha progresado significativamente en la optimización de la gestión de sitios web a través del panel de control MyKinsta. Este potente panel permite a los usuarios gestionar sus sitios y realizar diversas acciones de mantenimiento, como reiniciar el motor PHP y borrar la caché de su sitio.
Sin embargo, la introducción de la API de Kinsta lleva la gestión de sitios web a un nivel completamente nuevo. Ahora los desarrolladores pueden aprovechar la potencia de la API de Kinsta para mejorar el proceso de gestión, crear interfaces personalizadas e incluso crear aplicaciones de programación para automatizar tareas esenciales.
Este tutorial se adentra en el mundo de la API Kinsta y explica cómo crear una aplicación React para programar tareas de mantenimiento esenciales como reinicios del motor PHP y limpieza de la caché con la API de Kinsta.
Aquí tienes una demostración en tiempo real de la aplicación programación de herramientas del sitio.
Comprender la API de Kinsta
La API de Kinsta es una potente herramienta que te permite interactuar con la plataforma de Alojamiento Administrado de WordPress de Kinsta mediante programación. Puede ayudarte a automatizar varias tareas relacionadas con los servicios proporcionados por Kinsta, incluyendo la creación de sitios, la recuperación de información del sitio, la obtención del estado de un sitio y mucho más.
Para utilizar la API de Kinsta, debes tener una cuenta con al menos un sitio, aplicación o base de datos de WordPress en MyKinsta. También necesitas generar una clave API para autenticarte y acceder a tu cuenta a través de la API.
Para generar una clave API:
- Ve a tu panel de MyKinsta.
- Ve a la página Claves API (Tu nombre > Configuración de la empresa > Claves API).
- Haz clic en Crear Clave API.
- Elige una fecha de caducidad o establece una fecha de inicio personalizada y un número de horas para que caduque la clave.
- Dale a la clave un nombre único.
- Haz clic en Generar.
Después de crear una clave API, cópiala y guárdala en algún lugar seguro (puedes utilizar un gestor de contraseñas), ya que es la única vez que se revela dentro de MyKinsta. Puedes generar múltiples claves API — están listadas en la página Claves API. Si necesitas revocar una clave API, haz clic en Revocar junto a la que quieras revocar.
Cómo Utilizar las Herramientas de Sitio de Kinsta con la API de Kinsta
Las herramientas de sitio de Kinsta son un conjunto de herramientas a disposición de los usuarios de Kinsta para ayudarles a gestionar y mantener sus sitios de WordPress. Estas herramientas están disponibles a través de MyKinsta (Sitios WordPress > nombre del sitio > Herramientas), pero no todas son compatibles con la API de Kinsta en este momento. Nuestro equipo está trabajando constantemente para añadir las próximas funciones, siguiendo de cerca y escuchando los comentarios, como comparte Kristof Siket, jefe del equipo de desarrollo de la API de Kinsta:
Los comentarios de los usuarios impulsan la priorización de la exposición de funciones. El plan actual no cubre totalmente la página Herramientas; en su lugar, las funciones se basan en las peticiones de los usuarios y en los comentarios recogidos.Si crees que una herramienta o endpoint específico debería incluirse en la API de Kinsta, no dudes en enviar tus comentarios.
Para utilizar las herramientas de sitio proporcionadas por Kinsta, es necesario obtener el ID de entorno de tu sitio. Cada sitio en MyKinsta tiene al menos un entorno, cada uno con un ID único. Para recuperar el ID del entorno, puedes aprovechar la API de Kinsta obteniendo primero el ID de tu sitio y utilizándolo después como parámetro para acceder a los datos del entorno correspondiente.
Para recuperar el ID de tu sitio, puedes utilizar el endpoint /sites que devuelve una lista de tus sitios. Una vez que hayas obtenido el ID del sitio, puedes recuperar el ID del entorno haciendo una solicitud GET al endpoint /sites, especificando el ID y añadiendo el parámetro /environments al endpoint.
Aquí tienes un fragmento de código de ejemplo que demuestra cómo conseguirlo utilizando la API Fetch de 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);En el código anterior, defines la variable siteId con el ID de tu sitio. A continuación, realiza una solicitud de obtención al endpoint de la API de Kinsta para recuperar los entornos del sitio especificado. Asegúrate de incluir la clave API en la cabecera de Autorización.
Tras recibir la respuesta, los datos se registran en la consola, que contiene los detalles de tu(s) entorno(s), incluido el 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": {}
}
]
}
}Ahora que ya sabes cómo acceder al ID de tu entorno, vamos a utilizar las herramientas del sitio de Kinsta mediante programación.
Cómo Borrar la Caché del Sitio con la API de Kinsta
Para borrar la caché de tu sitio con la API de Kinsta, enviarás una solicitud post al endpoint /sites/tools/clear-cache. Esto requiere que pases el ID de entorno como cuerpo de la solicitud.
El siguiente código muestra cómo hacerlo utilizando JavaScript y la 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);
};En el código anterior, se define una función clearSiteCache que recibe dos parámetros: la URL del endpoint de la API y un objeto que contiene la configuración para la solicitud de obtención. La configuración incluye los campos method, headers, y body.
El campo body es donde pasas el payload de la solicitud, que es el ID del entorno. Utiliza JSON.stringify para convertir el objeto en una cadena JSON. Sustituye el valor environment_id por el ID real del entorno que quieres reiniciar. Una vez enviada la solicitud, los datos de respuesta se registran en la consola.
Crear una Aplicación React para Programar Tareas de Mantenimiento con la API de Kinsta
Con la introducción de la API de Kinsta, ahora puedes construir interfaces personalizadas que proporcionan una flexibilidad sin precedentes. Un ejemplo es una aplicación que te permite programar las tareas de mantenimiento de tu sitio. Imagina programar la limpieza de la caché de tu sitio o el reinicio del motor PHP para que se produzca automáticamente a medianoche en una ubicación específica. Esto puede ayudarte a garantizar un rendimiento óptimo sin dificultad.
Cómo Empezar
Para seguir este tutorial, es aconsejable tener conocimientos básicos de HTML, CSS y JavaScript y cierta familiaridad con React. El objetivo principal de este proyecto es demostrar la utilización de la API Kinsta, por lo que este artículo no profundiza en los detalles de la creación o el estilo de la interfaz de usuario, ni en otros aspectos lógicos.
Para agilizar el proceso de configuración del proyecto, se ha preparado para ti un proyecto de inicio. Sigue estos pasos para empezar:
1. Crea un repositorio Git utilizando esta plantilla en GitHub. Selecciona Utilizar esta plantilla > Crear un nuevo repositorio para copiar el código de inicio en un nuevo repositorio dentro de tu cuenta de GitHub, y asegúrate de marcar la casilla para incluir todas las ramas.
2. Descarga el repositorio a tu ordenador local y cambia a la rama starter-files utilizando el siguiente comando:
git checkout starter-files3. Instala las dependencias necesarias ejecutando el comando npm install. Una vez completada la instalación, puedes lanzar el proyecto en tu ordenador local con npm run start. Esto abre el proyecto en http://localhost:3000/.
Comprender los Archivos del Proyecto
Dentro de la carpeta src de este proyecto hay dos subcarpetas principales: components y pages. La carpeta components contiene componentes reutilizables, como el Header y el Footer que se utilizan en todas las páginas (Home, Operations, Tools, Schedule).
En este proyecto, tu objetivo principal es implementar la lógica en las Home y Tools, ya que el estilo, el enrutamiento y otra lógica ya están hechos.
La página de Inicio tiene un formulario que enumera todos los sitios de tu cuenta MyKinsta. Cada vez que se muestra esta página, el hook useEffect inmediatamente recupera una lista de todos tus sitios y los rellena en un campo de formulario de selección. El ID de cada sitio se utiliza como valor para la opción correspondiente.
<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>
Cuando se selecciona un sitio y se pulsa el botón «Continuar», se activa la función handleSubmission. En esta función, se utiliza la API de Kinsta para recuperar el ID de entorno del sitio. A continuación, pasa este ID como parámetro de ruta a la página Tools.
La página Tools es donde puedes realizar y programar tareas de mantenimiento para el sitio seleccionado, como borrar la caché del sitio o reiniciar el motor PHP. Para realizar cualquiera de estas acciones en la página Tools, necesitas el ID de entorno. Por lo tanto, se pasa como parámetro de ruta a esta página.
Cuando inicias acciones como borrar la caché del sitio o reiniciar el motor PHP, se te dirige automáticamente a la página Operations. Aquí, puedes seguir el progreso de tu operación utilizando su ID asignado.
Cuando programes una tarea, se te redirigirá a la página Schedule, que muestra información detallada sobre la tarea programada.
Una vez alcanzada la hora programada, la operación específica comienza y te redirige automáticamente a la página Operations, donde puedes supervisar el progreso de la operación.
Interactuar con la API de Kinsta en React
Con la interfaz de usuario (UI) ahora en su lugar, tu siguiente paso es gestionar el envío del formulario en la página de Inicio y recuperar el ID de entorno de tu sitio seleccionado a través de la API de Kinsta antes de navegar al usuario a la página Tools con el ID como parámetro de ruta.
Para interactuar con la API de Kinsta, necesitas el ID de tu empresa y la clave API. Al realizar llamadas a la API en un proyecto que se alojará en la nube, tus credenciales, como la clave de la API, deben almacenarse de forma segura para evitar cualquier forma de compromiso.
Puedes almacenarlas de forma segura como variables de entorno en tu aplicación React creando un archivo .env en la carpeta root de tu proyecto. En este archivo, añade las siguientes líneas:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Para acceder a estas variables de entorno dentro de tu proyecto, puedes utilizar la sintaxis process.env.THE_VARIABLE. Por ejemplo, para acceder a REACT_APP_KINSTA_COMPANY_ID, utilizarías process.env.REACT_APP_KINSTA_COMPANY_ID.
Obtener el ID de Entorno con la API de Kinsta en React
En la página de inicio, cuando se selecciona un sitio y se pulsa el botón de envío, se activa la función handleSubmission. Esta función utiliza la API Fetch (o tu método de solicitud HTTP preferido) para realizar una solicitud GET a la API Kinsta.
Para evitar repetir las cabeceras y la URL de la API Kinsta en cada llamada a la API, vamos a almacenar las headers y KinstaAPIUrl como constantes.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])La variable KinstaAPIUrl almacena la URL base de la API Kinsta. La constante headers se crea utilizando el hook useMemo para garantizar que el objeto headers sólo se crea una vez y no cambia entre renders. Incluye la cabecera Autorización, que contiene la clave de la API Kinsta obtenida de las variables de entorno.
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);
}En el código anterior, se crea una función asíncrona (fetchEnvironmentId), que toma el siteId obtenido del sitio seleccionado y lo pasa al endpoint de la API para recuperar los detalles del entorno.
Una vez recibida la respuesta, extrae el ID del entorno de los datos (puedes tener más de un entorno: de staging o producción — por lo que todos se almacenan en un array, vamos a utilizar el entorno en producción para esta demostración) y utiliza la función navegar (ya importada e instanciada para ti) para redirigir al usuario a la página Tools con el ID del entorno como parámetro de ruta.
Nota: Todas estas rutas ya están configuradas en el archivo App.js.
Realizar Tareas de Mantenimiento con la API de Kinsta en React
En la Página Tools, hay dos herramientas que se pueden utilizar para mantener tu sitio, cada una con dos botones para realizar la operación inmediatamente o programar la operación (se han creado las funciones y se han adjuntado eventos onClick a todos los botones para ti). Este tutorial sólo explicará cómo reiniciar el motor PHP de tu sitio porque es muy similar a cómo borrar la caché de tu sitio — la única diferencia es el endpoint.
Para reiniciar el motor PHP o realizar cualquier operación de la herramienta del sitio, necesitas el ID del entorno, que ya se pasa a la página Tools como parámetro de ruta. El siguiente paso sería recuperar este parámetro, almacenarlo en una variable y, a continuación, enviar una solicitud a la API de Kinsta.
const { envId } = useParams();Guarda las cabeceras de la solicitud y la URL de la API como variables constantes, ya que no cambian. Las cabeceras de una solicitud POST son diferentes de las de una solicitud GET, ya que tienen el valor 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}`
}
}, [])Cuando se pulse el botón Restart, se llamará a la función restartEngine. En esta función, vamos a enviar una solicitud POST a la API Kinsta, que toma el ID del entorno como carga útil:
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}`);
}Cada vez que se ejecute el código anterior, se activará automáticamente un reinicio del motor PHP en tu sitio. Si compruebas inmediatamente el panel MyKinsta de tu sitio, verás esta notificación en la parte superior de tu página:
Puedes comprobarlo mediante programación utilizando el endpoint /operations de la API de Kinsta. En el código anterior, una vez que esta solicitud tiene éxito, se te redirige automáticamente a la página Operations junto con el ID de la operación como parámetro de ruta, donde puedes comprobar el estado de la operación. Asegúrate de comprobar la página operations para ver cómo se gestiona esto.
Cómo Programar una Tarea con la API de Kinsta en React
Programar una tarea con JavaScript significa que tienes que calcular el tiempo estimado para que se produzca la tarea en milisegundos y luego utilizar la función setTimeout.
En la página Tools, cuando se pulsa el botón Schedule, aparece un modal con dos campos de formulario. Estos campos te permiten seleccionar la fecha y hora deseadas para que tenga lugar la operación. Los datos introducidos se utilizan para calcular el tiempo total, en milisegundos, desde el momento actual hasta cuando se espera que comience la operación.
Para ello, extrae el día, el mes y el año del campo de fecha pasando la fecha a un objeto new Date, y luego almacena cada uno de ellos en variables separadas.
let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();A continuación, extraigamos la hora y los minutos del campo hora:
let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);Con estos valores obtenidos, puedes calcular el tiempo previsto en milisegundos:
const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;En este punto, tienes el tiempo esperado en milisegundos. Ahora puedes crear una función setTimeout que se active en la fecha y hora especificadas:
setTimeout(function () {
restartEngine();
}, eta_ms);En el código anterior, se llama a la función restartEngine() cuando se alcanza la hora especificada para reiniciar el motor PHP.
Este es el aspecto que tendrá el código 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}`);
}Cuando programes una tarea, se te redirigirá a la página Schedule, donde podrás ver los detalles de la programación. Cuando se alcance la hora programada, se llamará a la función setTimeout, que navegará automáticamente a la página Operations para seguir el estado de la operación.
En este punto, has implementado con éxito la funcionalidad de programación y activado la API de Kinsta para reiniciar el motor PHP de tu sitio. Puedes hacer lo mismo para borrar la caché de tu sitio.
Cómo Desplegar tu Aplicación React con Kinsta
Para desplegar tu proyecto React en el alojamiento de aplicaciones de Kinsta, tienes que enviar el proyecto a tu proveedor Git preferido. Cuando tu proyecto esté alojado en GitHub, GitLab o Bitbucket, puedes proceder a desplegarlo en Kinsta.
Para desplegar tu repositorio en Kinsta, sigue estos pasos:
- Inicia sesión o crea tu cuenta Kinsta en el panel MyKinsta.
- En la barra lateral izquierda, haz clic en «Aplicaciones» y luego en «Añadir servicio».
- Selecciona «Aplicación» en el menú desplegable para desplegar una aplicación React en Kinsta.
- En el modal que aparece, elige el repositorio que quieres desplegar. Si tienes varias ramas, puedes seleccionar la rama deseada y dar un nombre a tu aplicación.
- Selecciona una de las ubicaciones de centros de datos disponibles en la lista de 25 opciones. Kinsta detecta automáticamente el comando de inicio de tu aplicación.
Por último, no es seguro enviar claves API a alojamientos públicos como tu proveedor de Git. Cuando alojes, puedes añadirlas como variables de entorno utilizando el mismo nombre de variable y valor especificados en el archivo .env.
Una vez que inicias el despliegue de tu aplicación, comienza el proceso y normalmente se completa en unos minutos. Un despliegue con éxito genera un enlace a tu aplicación, como http://site-tools-scheduler-6u1a5.kinsta.app/.
Resumen
Con la API de Kinsta puedes ocuparte de las tareas recurrentes de tus sitios WordPress de forma aún más eficiente. Y en un futuro próximo, podrás hacer aún más.
En este artículo, has aprendido a aprovechar la API de Kinsta construyendo una aplicación React desde cero — alojada también en Kinsta — que te permite programar el reinicio de PHP y borrar la caché del sitio a través de un atractivo panel de control que también puedes clonar y personalizar para tu propio caso de uso.
¿Cómo utilizas la API de Kinsta? ¿Qué funciones te gustaría que se añadieran/expusieran próximamente?
Deja una respuesta