Ao longo dos anos, a Kinsta fez um progresso significativo na simplificação do gerenciamento de sites por meio do painel MyKinsta. Esse poderoso painel permite que os usuários gerenciem seus sites e realizem várias ações de manutenção, incluindo a reinicialização do mecanismo PHP e a limpeza do cache do site.
No entanto, a introdução da API da Kinsta leva o gerenciamento de sites a um nível totalmente novo. Os desenvolvedores agora podem aproveitar o poder da API da Kinsta para aprimorar o processo de gerenciamento, criar interfaces personalizadas e até mesmo criar aplicativos de agendamento para automatizar tarefas essenciais.
Este tutorial se aprofunda no mundo da API Kinsta e explica como criar um aplicativo React para agendar tarefas essenciais de manutenção, como reinicializações do mecanismo PHP e limpeza do cache com a API da Kinsta.
Aqui está uma demonstração em tempo real do aplicativo de agendamento de ferramentas do site.
Entendendo a API da Kinsta
A API da Kinsta é uma ferramenta poderosa que permite que você interaja com a plataforma de hospedagem gerenciada de WordPress da Kinsta de forma programática. Ela pode ajudar você a automatizar várias tarefas relacionadas aos serviços fornecidos pela Kinsta, incluindo a criação de sites, a recuperação de informações do site, a obtenção do status de um site e muito mais.
Para usar a API da Kinsta, você deve ter uma conta com pelo menos um site, aplicativo ou banco de dados do WordPress no MyKinsta. Você também precisa gerar uma chave de API para autenticar e acessar sua conta através da API.
Para gerar uma chave de API:
- Vá para o painel MyKinsta.
- Navegue até a página Chaves API (Seu nome > Configurações da empresa > Chaves API).
- Clique em Criar chave de API.
- Escolha uma expiração ou defina uma data de início personalizada e o número de horas para a chave expirar.
- Dê à chave um nome exclusivo.
- Clique em Gerar.
Após criar uma chave API, copie e armazene em algum lugar seguro (você pode usar um gerenciador de senhas), pois esta é a única vez em que ela é revelada no MyKinsta. Você pode gerar várias chaves API – elas são listadas na página “Chaves API“. Se precisar revogar uma chave de API, clique em “Revogar” ao lado daquela que deseja revogar.
Como usar as ferramentas de site da Kinsta com a API da Kinsta
A ferramenta do site Kinsta é um conjunto de ferramentas disponíveis para os usuários da Kinsta para ajudá-los a gerenciar e manter seus sites WordPress. Essas ferramentas estão disponíveis através do MyKinsta (Sites WordPress > nome do site > Ferramentas), mas nem todas são suportadas pela API da Kinsta no momento. Nossa equipe está constantemente trabalhando para adicionar novos recursos, acompanhando de perto e ouvindo o feedback, como compartilha Kristof Siket, Líder da Equipe de Desenvolvimento da API Kinsta.
O feedback dos usuários orienta a priorização da exposição dos recursos. O plano atual não cobre totalmente a página Ferramentas; em vez disso, os recursos são baseados nas solicitações dos usuários e no feedback obtido.Se você acredita que uma ferramenta ou endpoint específico deve ser incluído na API da Kinsta, fique à vontade para enviar seu feedback.
Para que você possa utilizar as ferramentas do site fornecidas pela Kinsta, é necessário obter o ID do ambiente do seu site. Cada site no MyKinsta tem pelo menos um ambiente, cada um com um ID exclusivo. Para recuperar o ID do ambiente, você pode aproveitar a API da Kinsta obtendo primeiro o ID do site e, em seguida, utilizando como um parâmetro para acessar os dados do ambiente correspondente.
Para recuperar o ID do site, você pode usar o endpoint /sites que retorna uma lista de seus sites. Após obter o ID do site, você pode recuperar o ID do ambiente fazendo uma solicitação GET para o endpoint /sites, especificando o ID e anexando o endpoint /environments ao endpoint.
Aqui está um exemplo de trecho de código que demonstra como você pode fazer isso usando a 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);No código acima, você define a variável siteId com o ID do seu site. Em seguida, você faz uma solicitação de busca ao endpoint da API da Kinsta para recuperar os ambientes do site especificado. Certifique-se de que você inclua a chave da API no cabeçalho de autorização.
Após receber a resposta, os dados são registrados no console, que contém os detalhes do(s) seu(s) ambiente(s), incluindo o 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": {}
}
]
}
}Agora que você sabe como acessar o ID do seu ambiente, vamos usar as ferramentas do site da Kinsta de forma programática.
Como limpar o cache do site com a API da Kinsta
Para limpar o cache do seu site com a API da Kinsta, você enviará uma solicitação POST para o endpoint /sites/tools/clear-cache. Isso requer que você passe o ID do ambiente como corpo da solicitação.
O código abaixo demonstra como você pode fazer isso usando JavaScript e a 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);
};No código acima, é definida uma função clearSiteCache que recebe dois parâmetros: a URL do endpoint da API e um objeto que contém a configuração para a solicitação de busca. A configuração inclui method, headers e body.
O campo body é onde você passa a carga útil da solicitação, que é o ID do ambiente. Você usa JSON.stringify para converter o objeto em uma cadeia de caracteres JSON. Substitua o valor environment_id pelo ID real do ambiente que você deseja reiniciar. Depois que a solicitação é enviada, os dados de resposta são registrados no console.
Criando um aplicativo React para agendar tarefas de manutenção com a API da Kinsta
Com a introdução da API da Kinsta, agora você pode criar interfaces personalizadas que proporcionam uma flexibilidade sem igual. Um exemplo disso é um aplicativo que permite que você agende as tarefas de manutenção do seu site. Imagine programar a limpeza do cache do seu site ou a reinicialização do mecanismo PHP para ocorrer automaticamente à meia-noite em um local específico. Isso pode ajudar você a garantir o desempenho ideal sem dificuldade.
Primeiros passos
Para acompanhar este tutorial, é aconselhável que você tenha um conhecimento básico de HTML, CSS e JavaScript e alguma familiaridade com o React. O foco principal deste projeto é demonstrar a utilização da API da Kinsta, portanto, este artigo não se aprofunda nos detalhes da criação ou estilo da interface do usuário e em outras lógicas.
Para simplificar o processo de configuração do projeto, um projeto inicial foi preparado para você. Siga estas etapas para que você possa começar:
1. Crie um repositório Git usando este template no GitHub. Selecione Usar este template > Criar um novo repositório para copiar o código inicial em um novo repositório na sua conta do GitHub e verifique se você marcou a caixa para incluir todas as branches.
2. Faça o pull do repositório para o seu computador local e mude para o branch starter-files usando o comando abaixo:
git checkout starter-files3. Instale as dependências necessárias executando o comando npm install. Quando a instalação estiver concluída, você poderá iniciar o projeto no computador local com npm run start. Isso abre o projeto em http://localhost:3000/.
Entendendo os arquivos do projeto
Dentro da pasta “src” deste projeto, existem duas principais subpastas: “components” e “pages“. A pasta “components” contém componentes reutilizáveis, como o cabeçalho (Header) e rodapé (Footer), que são utilizados em todas as páginas (Página inicial, Operações, Ferramentas, Programação).
Neste projeto, você deve se concentrar principalmente na implementação da lógica na Página inicial e Ferramentas, pois o estilo, o roteamento e outras lógicas já estão prontos.
A Página inicial tem um formulário que lista todos os sites em sua conta MyKinsta. Sempre que essa página é renderizada, o hook useEffect recupera imediatamente uma lista de todos os seus sites e os preenche em um campo de formulário de seleção. O ID de cada site é usado como o valor para a opção correspondente.
<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 um site é selecionado e o botão “Prosseguir” é clicado, a função handleSubmission é acionada. Nessa função, a API da Kinsta é usada para recuperar o ID do ambiente do site. Em seguida, você passa esse ID como um parâmetro de rota para a página Ferramentas.
A página Ferramentas é onde você pode executar e programar tarefas de manutenção para o site selecionado, como limpar o cache do site ou reiniciar o mecanismo PHP. Para executar qualquer uma dessas ações na página Ferramentas, você precisa do ID do ambiente. Por isso, ele é passado como um parâmetro de rota para essa página.
Quando você inicia ações como limpar o cache do site ou reiniciar o mecanismo PHP, você é automaticamente direcionado para a página Operações. Aqui, você pode acompanhar o progresso da sua operação usando o ID atribuído.
Ao agendar uma tarefa, você é direcionado para a página Agendar, que exibe informações detalhadas sobre a tarefa agendada.
Quando o horário programado é atingido, a operação específica começa e redireciona você automaticamente para a página Operações, onde você pode monitorar o progresso da operação.
Interagindo com a API da Kinsta no React
Com a interface do usuário (UI) pronta, sua próxima etapa é lidar com o envio do formulário na Página iniciale recuperar o ID do ambiente do site selecionado por meio da API da Kinsta antes de levar o usuário à página Ferramentas com o ID como parâmetro de rota.
Para interagir com a API da Kinsta, você precisa do ID da sua empresa e da chave API. Ao fazer chamadas de API em um projeto que será hospedado na nuvem, suas credenciais, como a chave de API, precisam ser armazenadas com segurança para evitar qualquer forma de comprometimento.
Você pode armazená-las com segurança como variáveis de ambiente em seu aplicativo React, criando um arquivo .env na pasta raiz do seu projeto. Nesse arquivo, adicione as seguintes linhas:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Para acessar essas variáveis de ambiente em seu projeto, você pode usar a sintaxe process.env.THE_VARIABLE. Por exemplo, para acessar REACT_APP_KINSTA_COMPANY_ID, você usaria process.env.REACT_APP_KINSTA_COMPANY_ID.
Obter o ID do ambiente com a API Kinsta no React
Na página inicial, quando um site é selecionado e o botão de envio é clicado, a função handleSubmission é acionada. Essa função usa a API Fetch (ou o método de solicitação HTTP de sua preferência) para fazer uma solicitação GET para a API Kinsta.
Para evitar a repetição dos cabeçalhos e da URL da API da Kinsta em cada chamada, iremos armazenar os headers e a KinstaAPIUrl como constantes.
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = useMemo(() => {
return {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}, [])A variável KinstaAPIUrl armazena a URL básica da API da Kinsta. A constante headers é criada usando o hook useMemo para garantir que o objeto de cabeçalhos seja criado apenas uma vez e não, seja alterado entre as renderizações. Ela inclui o cabeçalho Authorization, que contém a chave API da Kinsta obtida das variáveis de 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);
}No código acima, é criada uma função assíncrona (fetchEnvironmentId), que pega o siteId obtido do site selecionado e o passa para o endpoint da API para recuperar os detalhes do ambiente.
Assim que a resposta for recebida, extraia o ID do ambiente dos dados (você pode ter mais de um ambiente: de teste ou de produção – portanto, todos eles são armazenados em uma array; vamos usar o ambiente de produção para esta demonstração) e use a função navigate (já importada e instanciada para você) para redirecionar o usuário para a página Ferramentas com o ID do ambiente como parâmetro de rota.
Observação: todas essas rotas já estão configuradas no arquivo App.js.
Execute tarefas de manutenção com a API da Kinsta no React
Na página Ferramentas, há duas ferramentas que podem ser usadas para manter seu site, cada uma com dois botões para executar a operação imediatamente ou agendar a operação (as funções foram criadas e os eventos onClick foram anexados a todos os botões para você). Este tutorial explicará apenas como reiniciar o mecanismo PHP do seu site porque é muito semelhante a como limpar o cache do site – a única diferença é o endpoint.
Para reiniciar o mecanismo PHP ou executar qualquer operação de ferramenta do site, você precisa do ID do ambiente, que já é passado para a página Ferramentas como um parâmetro de rota. A próxima etapa seria recuperar esse parâmetro, armazená-lo em uma variável e, em seguida, enviar uma solicitação à API da Kinsta.
const { envId } = useParams();Armazene os cabeçalhos da solicitação e a URL da API como variáveis constantes, pois elas não mudam. Os cabeçalhos de uma solicitação POST diferem de uma solicitação GET, pois têm o 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}`
}
}, [])Quando o botão Reiniciar for clicado, a função restartEngine será chamada. Nessa função, vamos enviar uma solicitação POST para a API da Kinsta, que recebe o ID do ambiente 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}`);
}Sempre que o código acima for executado, ele acionará automaticamente uma reinicialização do mecanismo PHP em seu site. Se você verificar o painel MyKinsta do seu site imediatamente, notará essa notificação na parte superior da sua página:
Você pode verificar isso programaticamente usando o endpoint /operations da API da Kinsta. No código acima, assim que essa solicitação for bem-sucedida, você será automaticamente direcionado para a página Operações, juntamente com o ID da operação como um parâmetro de rota, onde poderá verificar o status da operação. Certifique-se de que você verifique a página de operações para ver como isso é tratado.
Como agendar uma tarefa com a API da Kinsta no React
Agendar uma tarefa com JavaScript significa que você precisa calcular o tempo estimado para que a tarefa ocorra em milissegundos e, em seguida, usar a função setTimeout.
Na página Ferramentas, quando você clica no botão de agendamento, é exibido um modal com dois campos de formulário. Esses campos permitem que você selecione a data e a hora desejadas para a realização da operação. Os dados inseridos são usados para calcular o tempo total, em milissegundos, desde o momento atual até o início da operação.
Para fazer isso, extraia o dia, o mês e o ano do campo de data passando a data para um objeto new Date e, em seguida, armazene cada um deles em variáveis separadas.
let year = new Date(scheduleDate).getFullYear();
let month = new Date(scheduleDate).getMonth();
let day = new Date(scheduleDate).getDate();Em seguida, vamos extrair a hora e o minuto do campo de tempo:
let timeArray = scheduleTime.split(":");
let hour = parseInt(timeArray[0]);
let minute = parseInt(timeArray[1]);Com esses valores obtidos, você pode calcular o tempo esperado em milissegundos:
const now = new Date();
let eta_ms = new Date(year, month, day, hour, minute, 0, 0).getTime() - now;Nesse ponto, você tem o tempo esperado em milissegundos. Agora você pode criar uma função setTimeout que é acionada na data e hora especificadas:
setTimeout(function () {
restartEngine();
}, eta_ms);No código acima, a função restartEngine() é chamada quando você atinge o tempo especificado para reiniciar o mecanismo do PHP.
Aqui está a aparência do 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}`);
}Ao agendar uma tarefa, você será direcionado para a página de agendamento, onde poderá visualizar detalhes sobre o agendamento. Quando o horário programado for atingido, a função setTimeout será chamada, e você navegará automaticamente para a página de operações para acompanhar o status da operação.
Nesse ponto, você implementou com êxito a funcionalidade de agendamento e acionou a API da Kinsta para reiniciar o mecanismo PHP do seu site. Você pode fazer o mesmo para limpar o cache do seu site.
Como implantar seu aplicativo React na Kinsta
Para implantar seu projeto React na hospedagem de aplicativos da Kinsta, você precisa enviar o projeto para o seu provedor Git preferido. Quando seu projeto estiver hospedado no GitHub, no GitLab ou no Bitbucket, você poderá fazer a implantação na Kinsta.
Para implantar seu repositório na Kinsta, siga estas etapas:
- Faça login ou crie sua conta Kinsta no painel MyKinsta.
- Na barra lateral esquerda, clique em “Aplicativos” e depois em “Adicionar serviço”.
- Selecione “Aplicativo” no menu suspenso para implantar um aplicativo React na Kinsta.
- No modal que aparece, escolha o repositório que você deseja implantar. Se você tiver várias branches, poderá selecionar a branch desejada e dar um nome ao seu aplicativo.
- Selecione um dos 25 centros de dados disponíveis na lista de opções. Quando você fizer a escolha, a Kinsta automaticamente identificará e executará o comando start necessário para o seu aplicativo.
Por fim, não é seguro enviar chaves API para hosts públicos, como seu provedor Git. Ao hospedar, você pode adicioná-las como variáveis de ambiente usando o mesmo nome e valor de variável especificados no arquivo .env.
Quando você inicia a implantação do seu aplicativo, o processo começa e é normalmente concluído em alguns minutos. Uma implantação bem-sucedida gera um link para o seu aplicativo, como http://site-tools-scheduler-6u1a5.kinsta.app/.
Resumo
Com a API da Kinsta, você pode cuidar de tarefas recorrentes para seus sites WordPress de forma ainda mais eficiente. E, em um futuro próximo, você poderá fazer ainda mais.
Neste artigo, você aprendeu como tirar proveito da API da Kinsta criando um aplicativo React do zero – também hospedado na Kinsta – que permite agendar a reinicialização do PHP e limpar o cache do site por meio de um bom painel que você também pode clonar e personalizar para o seu próprio caso de uso.
Como você está usando a API da Kinsta? Quais recursos você gostaria de ver adicionados/expostos em seguida?
Deixe um comentário