A implementação contínua é uma parte essencial do desenvolvimento web moderno. Ela permite que desenvolvedores implementem automaticamente as alterações de um sistema de controle de versão para um ambiente ativo. Essa abordagem reduz os erros manuais e acelera o processo de desenvolvimento, garantindo que o seu site esteja sempre atualizado com as últimas alterações de código.

Como usuário da Kinsta, você pode usar o SSH para enviar alterações diretamente para o seu servidor. Com o GitHub Actions, você pode automatizar todo o processo ao implementar perfeitamente as atualizações no seu site ativo.

Este artigo o orienta na configuração da implementação contínua do seu site WordPress hospedado na Kinsta usando o GitHub Actions. Cobrimos tudo, desde a configuração do seu ambiente local até o envio de alterações para o GitHub e a implementação automática delas em seu site ativo.

Pré-requisitos

Antes de poder configurar a implementação contínua do seu site WordPress na Kinsta, você precisa de algumas coisas:

  1. Seu site WordPress já deve estar hospedado na Kinsta.
  2. Você precisa extrair seu site localmente. Você pode usar o DevKinsta ou baixar um backup.
  3. Um repositório GitHub para armazenar e enviar o código do seu site.
  4. Você deve ter conhecimento básico do Git, por exemplo, para enviar código e usar um arquivo .gitignore.

Extraindo seu site localmente e configurando o GitHub

Como um usuário da Kinsta, a maneira mais fácil de acessar os arquivos locais do seu site WordPress é usando o DevKinsta. Com apenas alguns cliques, você pode baixar seu site do servidor Kinsta para o DevKinsta, permitindo-lhe trabalhar no seu site localmente.

Para isso, você pode fazer o seguinte:

  1. Abra o DevKinsta e clique em Adicionar site.
  2. Selecione a opção Importar da Kinsta. Isso fará o download de tudo a respeito do seu site para que você possa acessá-lo localmente para desenvolvimento.

Quando o seu site estiver disponível localmente, abra a pasta do site em seu editor de código preferido. Antes de enviar os arquivos para o GitHub, adicione um arquivo .gitignore ao diretório raiz do seu projeto para evitar ter de carregar desnecessariamente arquivos essenciais do WordPress, uploads ou informações confidenciais. Você pode usar um template padrão .gitignore para WordPress. Copie o conteúdo do template e salve-o.

Em seguida, crie um repositório GitHub e envie os arquivos do seu site para o GitHub.

Configurando segredos do GitHub para a Kinsta

Para automatizar a implementação do GitHub para a Kinsta, você precisará de alguns dados importantes de SSH, incluindo seu nome de usuário, senha, porta e endereço IP. Como são confidenciais, você deve armazená-los como segredos do GitHub.

Para adicionar segredos no GitHub:

  1. Vá ao seu repositório no GitHub.
  2. Clique em Settings > Secrets and variables > Actions > New repository secret.
  3. Adicione os seguintes segredos:
    • KINSTA_SERVER_IP
    • KINSTA_USERNAME
    • PASSWORD
    • PORT

Você pode encontrar esses detalhes na página Informações do seu site no painel MyKinsta.

Detalhes das informações de SFTP/SSH no MyKinsta.
Detalhes das informações de SFTP/SSH no MyKinsta.

Com essa configuração concluída, você agora pode configurar a implementação automática para o seu site WordPress.

Configurando o seu servidor Kinsta

Antes de automatizar o processo de implementação com o GitHub Actions, você deve configurar seu servidor Kinsta para receber e implementar o código a partir do seu repositório GitHub.

Isso envolve duas etapas: criar um repositório Git vazio no seu servidor Kinsta e configurar um hook post-receive para implementar as alterações mais recentes em seu site ativo automaticamente.

1. Crie um repositório Git vazio na Kinsta

Um repositório Git vazio é um destino remoto para onde o GitHub enviará seu código. Esse repositório não tem um diretório de trabalho — é um repositório central projetado para receber e armazenar seu código.

Para fazer isso, primeiro você deve acessar o servidor Kinsta via SSH usando o Comando de terminal SSH disponível no painel MyKinsta:

Comando do terminal SSH MyKinsta.
Comando do terminal SSH MyKinsta.

Em seguida, navegue até a pasta privada em seu servidor (ou crie-a se ela ainda não existir):

mkdir -p /www/your-site/private
cd /www/your-site/private

Aqui, substitua your-site pelo nome real da pasta do seu site, que você pode encontrar no caminho em seu painel.

Caminho do site ao vivo da Kinsta.
Caminho do site ao vivo da Kinsta.

Por fim, crie o repositório Git vazio:

git init --bare your-repo.git

Para your-repo, você pode usar o nome do seu repositório GitHub para fins de consistência, mas também pode nomeá-lo como quiser.

Esse repositório vazio receberá o código enviado pelo GitHub.

2. Configure o hook post-receive

Quando o seu repositório Git estiver pronto, você deverá configurar um hook post-receive. Esse script implementará automaticamente o código no seu site ativo sempre que novas alterações forem enviadas para o branch main no GitHub.

Para fazer isso, navegue até o diretório de hooks no seu repositório Git vazio:

cd /www/your-site/private/your-repo.git/hooks

Crie e edite o hook post-receive:

nano post-receive

Em seguida, adicione o seguinte script ao arquivo post-receive. Esse script verificará o código mais recente no diretório public do seu site ativo:

#!/bin/bash
TARGET="/www/your-site/public"
GIT_DIR="/www/your-site/private/your-repo.git"

while read oldrev newrev ref
do
    BRANCH=$(git rev-parse --symbolic --abbrev-ref $ref)

    if [[ $BRANCH == "main" ]];
    then
        echo "Ref $ref received. Deploying ${BRANCH} branch to production..."
        git --work-tree=$TARGET --git-dir=$GIT_DIR checkout -f
    else
        echo "Ref $ref received. Doing nothing: only the main branch may be deployed on this server."
    fi
done

O script acima implementa código apenas do branch main. A variável TARGET aponta para o diretório em que os arquivos do seu site ativo estão localizados (/www/your-site/public). A variável GIT_DIR aponta para o repositório Git vazio.

Salve e saia do arquivo pressionando Ctrl + X, depois Y e Enter.

Por fim, torne o script executável, para que possa ser executado automaticamente após cada envio:

chmod +x post-receive

Nesse ponto, o hook post-receive está pronto para implementar o código automaticamente sempre que as alterações forem enviadas para o branch main no seu repositório do GitHub.

3. Gere e adicione um token de acesso pessoal (PAT) do GitHub

Como o GitHub não oferece mais suporte à autenticação baseada em senha, você deve usar um PAT para se autenticar ao enviar código para o GitHub via SSH. Esse token permitirá que o GitHub aceite seus envios de forma segura.

Para gerar o token:

  1. Vá à sua conta do GitHub, clique na foto do seu perfil e selecione Settings.
  2. Na barra lateral esquerda, clique em Developer settings.
  3. Clique em Personal access tokens > Tokens (classic).
  4. Clique em Generate new token e dê um nome a ele (por exemplo, “Token de Implementação Kinsta”).
  5. Em Select scopes, marque repo (para controle total de repositórios privados).
  6. Clique em Generate token e copie o token. (Você não conseguirá vê-lo novamente).

Em seguida, execute o seguinte comando para adicionar seu repositório GitHub como remoto, substituindo os espaços reservados pelos detalhes reais:

git remote add origin https://your-username:[email protected]/your-username/your-repo.git

Substitua:

  • your-username pelo seu nome de usuário do GitHub.
  • YOUR_PERSONAL_ACCESS_TOKEN pelo token que você acabou de gerar.
  • your-repo pelo nome do seu repositório GitHub.

Criando o fluxo de trabalho do GitHub Actions para implementação automática

Agora que o seu site WordPress está em sua máquina local, foi enviado para o GitHub e você configurou os GitHub Secrets necessários, é hora de criar um fluxo de trabalho do GitHub Actions. Esse fluxo de trabalho implementa as alterações na Kinsta automaticamente sempre que você faz push para o branch main.

Para automatizar a implementação, você criará um arquivo YAML que define como a implementação ocorrerá. Veja aqui como você pode configurá-lo:

  1. Crie um novo diretório chamado .github/workflows no seu repositório GitHub.
  2. Dentro desse diretório, crie um novo arquivo chamado deploy.yml.
  3. Adicione o seguinte conteúdo ao arquivo deploy.yml:
name: Deploy to Kinsta

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Deploy to Kinsta via SSH
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.KINSTA_SERVER_IP }}
          username: ${{ secrets.KINSTA_USERNAME }}
          password: ${{ secrets.PASSWORD }}
          port: ${{ secrets.PORT }}
          script: |
            cd /www/your-site/private/your-repo.git  # Navigate to the bare Git repository on Kinsta
            git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git fetch origin main  # Fetch the latest changes from GitHub
            git --work-tree=/www/your-site/public --git-dir=/www/your-site/private/your-repo.git reset --hard origin/main  # Deploy changes to the live site

Uma olhada mais de perto nesse fluxo de trabalho

Aqui está um detalhamento do fluxo de trabalho:

  • Acionamento: O fluxo de trabalho é acionado sempre que o código é enviado para a branch main do seu repositório no GitHub.
  • Jobs: O fluxo de trabalho contém um job chamado deploy, que é executado em uma máquina virtual do Ubuntu (ubuntu-latest).
  • Código de checkout: Esta etapa usa a ação actions/checkout@v2 para extrair o código mais recente do seu repositório GitHub.
  • Implemente via SSH: o appleboy/ssh-action é usado para se conectar com segurança ao seu servidor Kinsta via SSH usando os segredos que você configurou (IP do servidor, nome de usuário, senha e porta). O script nessa etapa executa os seguintes comandos:
    • cd /www/your-site/private/your-repo.git: Navega até o repositório Git vazio no seu servidor Kinsta.
    • git fetch origin main: Obtém as alterações mais recentes no branch main em seu repositório GitHub.
    • git reset --hard origin/main: Aplica essas alterações atualizando o site ativo no diretório public onde o WordPress está hospedado.

Testando o fluxo de trabalho

Depois de configurar o fluxo de trabalho, você pode testá-lo fazendo push de uma pequena alteração no branch main em seu repositório GitHub. Cada vez que você envia uma alteração, o GitHub Actions aciona automaticamente a implementação, extraindo a versão mais recente do seu código e implementando-a no seu site ativo na Kinsta.

Você pode monitorar o status da sua implementação acessando a aba Actions no seu repositório GitHub. Se o fluxo de trabalho encontrar erros, você verá registros detalhados para ajudá-lo a identificar e corrigir os problemas.

Resumo

Ao configurar a implantação contínua para o seu site WordPress usando o GitHub Actions, você automatiza o seu fluxo de trabalho de desenvolvimento, garantindo que cada alteração enviada ao GitHub seja implementada automaticamente no seu site ativo na Kinsta.

Ele também permite que você integre fluxos de trabalho adicionais ao pipeline, como testes e formatação, usando o pacote @wordpress/scripts.

O que você pensa sobre esse processo? Há algo mais que gostaria que explicássemos, ou viu algum erro ao seguir este guia? Compartilhe suas dúvidas ou forneça-nos um feedback na seção de comentários abaixo!

Joel Olawanle Kinsta

Joel é um desenvolvedor Frontend que trabalha na Kinsta como Editor Técnico. Ele é um professor apaixonado com amor pelo código aberto e já escreveu mais de 200 artigos técnicos, principalmente sobre JavaScript e seus frameworks.