Cómo configurar el despliegue continuo de un sitio web en un VPS usando GitHub Actions

Prerrequisitos

Estos son los prerrequisitos necesarios para este tutorial:

• Una cuenta de GitHub
• Cualquier Servidor Privado Virtual (VPS), aunque prefiero DigitalOcean porque es muy fácil comenzar. Si te registras en DigitalOcean con mi Enlace de referencia, obtienes $100 de crédito que puedes gastar en 60 días.

Algunas de las cosas que cubriremos en este tutorial

• Generar una clave ssh en tu VPS remoto
• Agregar tu clave pública generada a las claves autorizadas
• Crear claves secretas en GitHub
• Configurar las GitHub Actions para desplegar automáticamente tu repositorio privado/público

Paso 1 - Abre tu terminal y accede por ssh a tu VPS

$ ssh usuario@hostname
$ cd ~/.ssh

Paso 2 - Genera una clave ssh

$ ssh-keygen -t rsa -b 4096 -C "test@example.com"

• El correo electrónico es el que usas en tu cuenta de GitHub

Paso 3: Presiona Enter repetidamente para establecer el nombre predeterminado (no configures una contraseña)

• Si haces "ls" en tu terminal, verás estos dos archivos (id_rsa e id_rsa.pub)

Paso 4 - Agrega una clave pública a las claves autorizadas

$ cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys

• Nota: Estamos usando >> para que el contenido de id_rsa.pub se anexe al final del contenido en el archivo authorized_keys, en lugar de sobrescribir el contenido en authorized_keys.

Paso 5 - Crea claves secretas en GitHub

• En tu terminal, ejecuta el comando anterior, selecciona el contenido de salida y cópialo al portapapeles.

Ve a tu repositorio de GitHub que deseas configurar, haz clic en la pestaña de configuración y luego en el menú de opciones, haz clic y agrega los siguientes secretos:

• HOST: establece la clave con tu nombre de host o dirección IP.
• USERNAME: establece la clave con el nombre de usuario que usas para acceder por SSH a tu VPS.
• SSHKEY: establece la clave con el contenido que copiaste del comando anterior.
• PORT: establece la clave con 22

¡Si aún estás aquí, felicidades! ¡Casi hemos terminado!

Con los pasos anteriores completados, solo nos queda un paso más, nuestro archivo .github/workflows/deploy.yml.

Paso 6 - Configura las GitHub Actions para desplegar automáticamente tu repositorio privado/público

Suponiendo que tienes el repositorio clonado localmente en tu máquina, ve y crea la carpeta .github/workflows y dentro de ella crea un archivo deploy.yml

• Agrega el siguiente contenido al archivo deploy.yml

name: Deploy

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1

      - name: Copy repository contents via scp
        uses: appleboy/scp-action@master
        env:
          HOST: ${{ secrets.HOST }}
          USERNAME: ${{ secrets.USERNAME }}
          PORT: ${{ secrets.PORT }}
          KEY: ${{ secrets.SSHKEY }}
        with:
          source: '.'
          target: '/var/www/mywebsite'

      - name: Executing remote command
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          USERNAME: ${{ secrets.USERNAME }}
          PORT: ${{ secrets.PORT }}
          KEY: ${{ secrets.SSHKEY }}
          script: ls

Observa que mi comando remoto es solo "ls". Si estás intentando desplegar automáticamente una aplicación React o Vue, podrías establecer tu comando de script al comando de compilación.

¡El momento de la verdad!

Confirma los cambios en deploy.yml y envía los cambios a tu repositorio.

Debería construirse y enviarse al VPS sin errores.

$ git add .
$ git commit -m "deploy"
$ git push origin master

Si vas a tu repositorio de GitHub y haces clic en el menú de acciones, verás esto:

¡Yay! Eso es todo, tu repositorio está oficialmente configurado, ahora cada vez que realices cambios y los envíes a GitHub, esa acción se ejecutará y desplegará automáticamente tu sitio web.

¡Gracias por leer!