Despliegue automático desde GitHub a un servidor a través de SFTP (GitHub Actions)

Al subir a producción mi primera web con React, note que había que hacer este proceso repetitivo de construir la app (build), hacer su respetivo zip y desplegarla manualmente en el servidor, esto no resulta ser un inconveniente cuando la web no se está actualizando constantemente, pero en mi caso y como esta página web será utilizada para documentar un software, requiero actualizarla seguido.

¿Qué es el Despliegue automático?

El Despliegue automático o implementación continua es una estrategia en el desarrollo de software donde los cambios de código en una aplicación se liberan automáticamente en el entorno de producción. Esta automatización está impulsada por una serie de pruebas predefinidas. Una vez que las nuevas actualizaciones pasan esas pruebas, el sistema envía las actualizaciones directamente a los usuarios del software.

Requisitos

Acceso al servidor.
Conocimientos en servidores y consola.
Se asume que el dominio a utilizar está apuntando al servidor que se va a usar.

Tutorial

1. Crear la llave SSH

Para hacer esta tarea usamos un comando de sistema: ssh-keygen -t rsa. Este comando se encarga del proceso de creación de los archivos de la llave.

ssh-keygen -t rsa

Presionar enter hasta finalizar el comando.

Una vez iniciado este comando nos va a solicitar dos cosas:

La localización donde almacenar la clave y el nombre del archivo.
La clave para poder usar esta llave ssh.

Recomiendo usar la ubicación por defecto que por lo general en ubuntu suele ser /home/ubuntu/.ssh.

Para nuestro ejemplo no agregaremos una clave a nuestro par de llaves ssh.

Nos dirigimos a la ruta /home/ubuntu/.ssh o la ruta en la cual esta nuestra carpeta .ssh, si no encontramos un archivo llamado authorized_keys, lo creamos, lo abrimos y pegamos el contenido de nuestra llave pública en dicho archivo.

La llave pública (id_rsa.pub si se dejó el nombre por defecto) contiene algo como:

ssh-rsa AAAAB3NzaC1yc2EAAAADAQQABAAABBAQC3I543JuHbJLlRScV0K/tLRca8qwSplPt9JrUICb8NeOa4o0zknY13KtrHeGWptvBTQHPPoKz3o7sW+8Ar9YHWhPTh8GYmfqXGs/+HGXKplJtqq8NWErA+BiROpod2ZjtWZu/ZkRXZp8QomgkjVsc/NcmoHu4OM9pbkLydvKSvyqzq2WRR+G8S8LgkwXsPk4fdEEv3NXsZcDF7e0J5VHPyJCB1KV5XY5Uhbaa96MBgrQqsY3qBG5oraGxIkTBUaibmkKdfu0Yc44Xxo/pTrelJKWWIIxk4k/8DsurNoxja8i/3YU7mbqmfGeF3/AO9LreJao/yPacHk/QeeC2jl0VUuO/2x periodicov2

Si el archivo authorized_keys ya existe y contiene una llave pública, basta con agregar una nueva línea y pegar el contenido de nuestra llave pública previamente creada.

2. Crear repositorio

Te dejo la documentación oficial de Github aquí en caso de que necesites una guía.

El repositorio puede ser tanto público como privado.

3. Configurar Actions secrets

Con nuestro par de llaves creadas y nuestro repositorio seleccionado, iremos a los Setting al apartado de Secrets -> Actions, estando ahí, agregaremos un nuevo Secret para el repositorio.

Este nuevo secret tendrá por nombre SSH_PRIVATE_KEY y su valor será el contenido de la llave privada previamente creada (id_rsa, el archivo sin la extensión .pub) y su contenido es algo parecido a este:

Agregamos nuestra secret.

4. Configurar Actions

Nos iremos al apartado de Actions en Github.

Luego hacemos clic en ***set up a workflow yourself.***

Esto creará un archivo llamado ./.github/workflows/main.yml en tu repositorio, el nombre de main.yml puedes modificarlo pero tienes que mantener la extensión .yml.

Este archivo tiene una configuración básica de un workflow que en este caso vamos a ignorar y a reemplazar por:

name: CI-SFTP
 
# Controla cuándo se ejecutará la acción.
on:
  # Activa el workflow en eventos push o pull request pero sólo para la rama que elijas.
  push:
    branches: [ main ]
 # pull_request:
   # branches: [ main ]
 
  # workflow_dispatch: Le permite ejecutar este workflow manualmente desde la pestaña Acciones.
  workflow_dispatch:
 
# Un workflow se compone de uno o varios jobs que pueden ejecutarse de forma secuencial o en paralelo.
jobs:
  # Este workflow contiene un solo job llamado "SFTP".
  deploy-via-sftp:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      
      - name: SFTP Deploy
        uses: wlixcc/[email protected]
        with:
          # username: Nombre de usuario con el cual nos conectaremos al servidor.
          username: ubuntu
          # server: Nombre del servidor o IP.
          server: 0.0.0.0
          port: 22 
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}

          # local_path: Ruta dentro del repositorio la cual quieres copiar en el servidor,por defecto es ./*
          local_path: ./*
          
          # remote_path: Ruta remota donde se copiaran los archivos del repositorio.
          remote_path: /var/www/deploy.flikimax.com/htdocs/
          
          # SFTP args
          args: '-o ConnectTimeout=5'

Es necesario que agregues los valores de server y remote_path, para que el action sepa a qué servidor dirigirse y en qué lugar hará deploy.

Guardamos dando clic en Start commit.

5. Probar que funcione

Vamos a nuestro repositorio, creamos un nuevo archivo llamado index.html e insertamos algún contenido y lo guardamos.

Ahora nos dirigimos a los actions de nuestro repositorio y podremos ver algo como:

Si hacemos clic en update index.html, podemos ver en detalle lo que está sucediendo y en caso de que algo falle, ver exactamente que causo que fallara.

Podemos ver que el deploy se hizo correctamente y que el servidor recibió correctamente los archivos del repositorio.

6. Notas finales y Workflow para una React App

Hay varias cosas que se tienen que tener en cuenta para que esta guía funcione.

El nombre SSH_PRIVATE_KEY de nuestro secret debe coincidir con el valor del key ssh_private_key del workflow de esta forma ${{ secrets.SSH_PRIVATE_KEY }}, si se modifica el nombre SSH_PRIVATE_KEY por ejemplo a ALOHAMUNDO, el valor de ssh_private_key del workflow deberá ser: ${{ secrets.ALOHAMUNDO}}.
La ruta del servidor donde se subirá el código del repositorio tiene que tener los permisos necesarios para realizar esta acción.

Como plus te comparto el .yml que use para hacer deploy con una React App.

name: CI-SFTP
 
# Controla cuándo se ejecutará la acción.
on:
  # Activa el workflow en eventos push o pull request pero sólo para la rama que elijas.
  push:
    branches: [ main ]
#  pull_request:
#    branches: [ main ]
 
  # workflow_dispatch: Le permite ejecutar este workflow manualmente desde la pestaña Acciones.
  workflow_dispatch:
 
# Un workflow se compone de uno o varios jobs que pueden ejecutarse de forma secuencial o en paralelo.
jobs:
  # Este workflow contiene un solo job llamado "SFTP".
  deploy-via-sftp:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [16.x]
    steps:
      - uses: actions/checkout@v2
      
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install Packages
        run: npm install
      - name: Build page
        run: npm run build
      
      - name: SFTP Deploy
        uses: wlixcc/[email protected]
        with:
          # username: Nombre de usuario con el cual nos conectaremos al servidor.
          username: ubuntu
          # server: Nombre del servidor o IP.
          server: 0.0.0.0
          port: 22 
          ssh_private_key: ${{ secrets.SSH_PRIVATE_KEY }}

          # local_path: Ruta dentro del repositorio la cual quieres copiar en el servidor,por defecto es ./*
          local_path: ./build/*
          
          # remote_path: Ruta remota donde se copiaran los archivos del repositorio.
          remote_path: /var/www/deploy.flikimax.com/htdocs/
          
          # SFTP args
          args: '-o ConnectTimeout=5'

Recuerda modificar el server y la remote_path.

Fuentes:

¿Qué es el Despliegue automático?

Requisitos

Tutorial

1. Crear la llave SSH

2. Crear repositorio

3. Configurar Actions secrets

4. Configurar Actions

5. Probar que funcione

6. Notas finales y Workflow para una React App

Compártelo

Comparte esto:

Puede que también te guste

Crea un dominio local para tu aplicación – (Windows)

Cómo instalar proyectos existentes de Laravel

Cómo configurar un virtualhost para un proyecto Laravel en Xampp