BysMax

Cómo hacer integracion continua de un sitio web en un VPS usando GitHub Actions

Authors
14 min read
·
Published on

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.

Captura de pantalla de la terminal

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

Captura de pantalla de la configuración de GitHub Secrets

¡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:

Captura de pantalla de las GitHub Actions

¡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.

GIF de celebración

¡Gracias por leer!