El despliegue continuo es una parte esencial del desarrollo web moderno. Permite a los desarrolladores desplegar automáticamente los cambios desde un sistema de control de versiones a un entorno activo. Este enfoque reduce los errores manuales y acelera el proceso de desarrollo, garantizando que tu sitio web esté siempre actualizado con los últimos cambios de código.

Como usuario de Kinsta, puedes utilizar SSH para enviar los cambios directamente a tu servidor. Con GitHub Actions, puedes automatizar todo el proceso de despliegue, desplegando sin problemas las actualizaciones a tu sitio en producción.

Este artículo te guía a través de la configuración del despliegue continuo para tu sitio de WordPress alojado en Kinsta utilizando GitHub Actions. Lo explicamos todo, desde la configuración de tu entorno local hasta el envío de cambios a GitHub y su despliegue automático en tu sitio en producción.

Requisitos previos

Antes de que puedas configurar el despliegue continuo de tu sitio de WordPress en Kinsta, necesitas algunas cosas:

  1. Tu sitio de WordPress ya debe estar alojado en Kinsta.
  2. Necesitas hacer una copia de tu sitio localmente. Puedes utilizar DevKinsta o descargar una copia de seguridad.
  3. Un repositorio GitHub para almacenar y enviar el código de tu sitio.
  4. Conocimientos básicos de Git, como enviar código y utilizar un archivo .gitignore.

Enviar tu sitio localmente y configurar GitHub

Como usuario de Kinsta, la forma más sencilla de acceder a los archivos locales de tu sitio de WordPress es utilizando DevKinsta. Con unos pocos clics, puedes hacer una copia de tu sitio desde el servidor Kinsta a DevKinsta, permitiéndote trabajar en tu sitio localmente.

Para ello

  1. Abre DevKinsta y haz clic en Añadir sitio.
  2. Selecciona la opción Importar desde Kinsta. Esto descargará todo lo relativo a tu sitio para que puedas acceder a él localmente para su desarrollo.

Una vez que tu sitio esté disponible localmente, abre la carpeta del sitio en tu editor de código preferido. Antes de subir los archivos a GitHub, añade un archivo .gitignore en el directorio root de tu proyecto para evitar subir archivos del core de WordPress innecesarios, uploads o información sensible. Puedes utilizar una plantilla .gitignore estándar para WordPress. Copia el contenido de la plantilla y guárdalo.

A continuación, crea un repositorio GitHub y envía los archivos de tu sitio a GitHub.

Configurar los secretos de GitHub para Kinsta

Para automatizar el despliegue desde GitHub a Kinsta, necesitarás algunos datos SSH importantes, como tu nombre de usuario, contraseña, puerto y dirección IP. Como son sensibles, guárdalos como secretos de GitHub.

Para añadir secretos en GitHub:

  1. Ve a tu repositorio en GitHub.
  2. Haz clic en Settings > Secrets and Variables > Actions > New repository secret.
  3. Añade los siguientes secretos:
    • KINSTA_SERVER_IP
    • KINSTA_USERNAME
    • PASSWORD
    • PORT

Puedes encontrar estos detalles en la página de Información de tu sitio en tu panel de MyKinsta.

Detalles de información SFTP/SSH en MyKinsta.
Detalles de información SFTP/SSH en MyKinsta.

Una vez completada esta configuración, ya puedes configurar el despliegue automático para tu sitio de WordPress.

Configurar tu servidor Kinsta

Antes de automatizar el proceso de despliegue con GitHub Actions, debes configurar tu servidor Kinsta para recibir y desplegar código desde tu repositorio de GitHub.

Esto implica dos pasos: crear un repositorio Git vacío en tu servidor Kinsta y configurar un hook post-receive para desplegar automáticamente los últimos cambios en tu sitio en producción.

1. Crear un repositorio Git vacío en Kinsta

Un repositorio Git vacío es un destino remoto al que GitHub enviará tu código. Este repositorio no tiene un directorio de trabajo — es un repositorio central diseñado para recibir y almacenar tu código.

Para ello, primero accede mediante SSH a tu servidor Kinsta utilizando el comando de terminal SSH disponible en tu panel MyKinsta:

Comando terminal SSH MyKinsta.
Comando terminal SSH MyKinsta.

A continuación, navega a la carpeta private de tu servidor (o créala si aún no existe):

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

Aquí, sustituye your-site por el nombre real de la carpeta de tu sitio, que puedes encontrar en la ruta de tu panel de control.

Ruta del sitio Kinsta en producción
Ruta del sitio Kinsta en producción

Por último, crea el repositorio Git vacío:

git init --bare your-repo.git

Para your-repo, puedes utilizar el nombre de tu repositorio GitHub por coherencia, pero puedes ponerle el nombre que quieras.

Este repositorio vacío recibirá el código enviado desde GitHub.

2. Configura el hook post-receive

Una vez que tu repositorio Git vacío esté listo, lo siguiente es configurar el hook  post-receive. Este script desplegará automáticamente el código en tu sitio en producción cada vez que se envíen nuevos cambios a la rama main de GitHub.

Para ello, ve al directorio hooks de tu repositorio Git vacío:

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

Crea y edita el hook post-receive:

nano post-receive

A continuación, añade el siguiente script al archivo post-receive. Este script comprobará el código más reciente en el directorio public de tu sitio activo:

#!/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

El script anterior sólo despliega código de la rama main. La variable TARGET apunta al directorio donde se encuentran los archivos de tu sitio en producción (/www/your-site/public). La variable GIT_DIR apunta al repositorio Git vacío.

Guarda y sal del archivo pulsando Ctrl + X, luego Y y Enter.

Por último, haz que el script sea ejecutable para que pueda ejecutarse automáticamente después de cada envío:

chmod +x post-receive

En este punto, el hook post-receive está listo para desplegar código automáticamente cada vez que se envíen cambios a la rama main de tu repositorio de GitHub.

3. Genera y añade un token de acceso personal (PAT) de GitHub

Dado que GitHub ya no admite la autenticación basada en contraseña, debes utilizar un PAT para autenticarte cuando envíes código a GitHub a través de SSH. Este token permitirá a GitHub aceptar tus envíos de forma segura.

Para generar el token:

  1. Ve a tu cuenta de GitHub y haz clic en tu foto de perfil, luego selecciona Settings.
  2. En la barra lateral izquierda, haz clic en Developer settings.
  3. Haz clic en Personal access tokens > Tokens (classic).
  4. Haz clic en Generate new token y dale un nombre (por ejemplo, «Token de Despliegue Kinsta»).
  5. En Select scopes, selecciona repo (para un control total de los repositorios privados).
  6. Haz clic en Generate token y copia el token. (No podrás volver a verlo)

A continuación, ejecuta el siguiente comando para añadir tu repositorio de GitHub como remoto, sustituyendo los marcadores de posición por tus datos reales:

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

Reemplazar:

  • your-username con tu nombre de usuario de GitHub.
  • YOUR_PERSONAL_ACCESS_TOKEN con el token que acabas de generar.
  • your-repo con el nombre de tu repositorio GitHub.

Crear el flujo de trabajo de GitHub Actions para el despliegue automático

Ahora que tu sitio de WordPress está en tu máquina local, enviando a GitHub, y has configurado los Secretos de GitHub necesarios, es el momento de crear un flujo de trabajo de GitHub Actions. Este flujo de trabajo despliega los cambios automáticamente en Kinsta cada vez que los envías a la rama main.

Para automatizar el despliegue, crearás un archivo YAML que defina cómo se realizará el despliegue. A continuación te explicamos cómo configurarlo:

  1. Crea un nuevo directorio llamado .github/workflows en tu repositorio de GitHub.
  2. Dentro de este directorio, crea un nuevo archivo llamado deploy.yml.
  3. Añade el siguiente contenido al archivo 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

Un vistazo más de cerca a este flujo de trabajo

Aquí tienes un desglose del flujo de trabajo:

  • Trigger: El flujo de trabajo se activa cada vez que se envía código a la rama main de tu repositorio de GitHub.
  • Job: El flujo de trabajo contiene un job llamado deploy, que se ejecuta en una máquina virtual Ubuntu (ubuntu-latest).
  • Checkout code: Este paso utiliza la acción actions/checkout@v2 para extraer el código más reciente de tu repositorio de GitHub.
  • Deploy via SSH: La acción appleboy/ssh-action se utiliza para conectar de forma segura a tu servidor Kinsta a través de SSH utilizando los secretos que configuraste (IP del servidor, nombre de usuario, contraseña y puerto). El script de este paso ejecuta los siguientes comandos:
    • cd /www/your-site/private/your-repo.git: Navega al repositorio Git vacío en tu servidor Kinsta.
    • git fetch origin main: Obtiene los últimos cambios de la rama main en tu repositorio GitHub.
    • git reset --hard origin/main: Aplica esos cambios actualizando el sitio en producción en el directorio public donde está alojado WordPress.

Probar el flujo de trabajo

Una vez que hayas configurado el flujo de trabajo, puedes probarlo introduciendo un pequeño cambio en la rama main de tu repositorio de GitHub. Cada vez que envíes un cambio, GitHub Actions activará automáticamente el despliegue, extrayendo la última versión de tu código y desplegándolo en tu sitio en producción en Kinsta.

Puedes controlar el estado de tu despliegue accediendo a la pestaña Actions de tu repositorio de GitHub. Si el flujo de trabajo encuentra errores, verás registros detallados que te ayudarán a solucionarlos.

Resumen

Al configurar el despliegue continuo de tu sitio de WordPress mediante GitHub Actions, automatizas tu flujo de trabajo de desarrollo, asegurándote de que cada cambio enviado a GitHub se despliega automáticamente en tu sitio en producción en Kinsta.

También te permite integrar flujos de trabajo adicionales en el pipeline, como pruebas y formateo mediante el paquete @wordpress/scripts.

¿Qué opinas de este proceso? ¿Hay algo más que te gustaría que explicáramos, o has experimentado algún error al seguir esta guía? Por favor, ¡comparte tus preguntas u opiniones en la sección de comentarios más abajo!

Joel Olawanle Kinsta

Joel es un desarrollador Frontend que trabaja en Kinsta como Editor Técnico. Es un formador apasionado enamorado del código abierto y ha escrito más de 200 artículos técnicos, principalmente sobre JavaScript y sus frameworks.