¿Cómo desplegar tus apps de Python con Hostinger y GitHub Actions?

Hola mundo, y bienvenidos a este artículo, en este vamos a describir la secuencia de pasos que tendrás que realizar para poder hacer despliegue de tus aplicaciones en un VPS o servidor, esto desde el inicio hasta que logremos automatizar varias partes del proceso.

El despliegue o deployment es el proceso por el cual vamos a llevar nuestras aplicaciones web de nuestro entorno local a Internet, donde podrá ser utilizada por los usuarios.

En esta ocasión vamos a hacer uso de un par de herramientas, entre las cuales están:

  • Terminal de comandos,
  • Git y GitHub,
  • GitHub Actions,
  • Namecheap, para la compra de nuestro dominio, y
  • Hostinger, como servidor o VPS, que contendrá nuestra aplicación en la nube, y que gracias al cupón HOLAMUNDO podrás obtener un descuento en la forma de pago anual, haciéndolo aún más barato tener tus aplicaciones disponibles en Internet.

La aplicación que vamos a subir es una de Django que fue construida en el curso Ultimate Python, disponible en la Academia Hola Mundo, así que si quieres aprender a construir el mismo proyecto, dale una mirada al curso.

Aplicación construida en Django a la que haremos despliegue en Hostinger
Aplicación construida en Django a la que haremos despliegue en Hostinger

¿Qué y para que se usa un VPS?

Un VPS o servidor nos va a permitir contener nuestra aplicación funcionando en Internet, de forma que los usuarios van a poder usar nuestra aplicación, a diferencia de los PaaS (Platform as a Service), los cuales incluyen servicios integrados, que posiblemente no utilicemos en un principio, lo que hace que los VPS sean más baratos y que además podamos subir no una sola aplicación, sino múltiples, por el mismo precio, por lo que si tienes o vas a tener varios proyectos, esto nos viene súper bien.

Como te mencionamos anteriormente, en este tutorial vamos a utilizar a hostinguer para hacer nuestro despliegue de nuestra aplicación construida con Django.

Ahora sí, vamos a comenzar con todos los pasos que tenemos que seguir

Adquirir un dominio web

Un dominio o DNS es el nombre que vamos a utilizar para que nuestros usuarios accedan a nuestra aplicación, ya que cuando buscamos un sitio como por ejemplo este blog, buscamos en el navegador la dirección como «holamundo.io», y no como lo que es una dirección IP, por ejemplo «192.23.4.2» , todos los sitios tienen una dirección IP que es a donde nos conectamos para ver nuestra aplicación web, por lo que es importante contar con un dominio, estos los puedes encontrar desde los 0.99 dólares anuales, esto va a depender de qué tan buscado sea el término y de su terminación que puede ser .com, .net. .io, .org, todo esto hará que varíe el precio.

Hay muchas opciones para adquirir tu dominio, nosotros usaremos la plataforma namecheap en la cual deberás crear una cuenta para adquirir tu dominio.

Página principal de namecheap
Página principal de namecheap

En el buscador señalado, comenzaremos a buscar los dominios y veremos la siguiente pantalla, en esta vas a ver los dominios con su respectivo precio anual en dólares:

Busqueda de dominios con Namecheap
Busqueda de dominios con Namecheap

Cuando adquieras un dominio, tendremos que ir al dashboard de nuestra cuenta y daremos clic en el botón «Manage«.

Dashboard de namecheap con un dominio adquirido
Dashboard de namecheap con un dominio adquirido

Ahora, lo que deberemos asegurarnos es de tener seleccionada la opción Namecheap BasicDNS.

Configurando DNS
Configurando DNS

Vamos a dejar en espera esta página porque ahora necesitaremos tener nuestro servidor o VPS.

Adquirir servidor virtual en hostinger

Logo de Hostinger
Logo de Hostinger

Para adquirir nuestro servidor o VPS, puedes ingresar a la página de hostinger que nos llevará a donde podremos escoger un plan, en este caso hemos escogido el VPS 2.

Escogiendo plan en Hostinger
Escogiendo plan en Hostinger

Ahora lo que necesitaremos es seleccionar la periodicidad, en este caso hemos seleccionado 12 meses.

Eligiendo periodicidad del plan
Eligiendo periodicidad del plan

Que como te darás cuenta además de que anualmente el servicio es mucho más barato el servicio, pero, si agregas además el código HOLAMUNDO adquiriendo un plan de 12 meses, el servicio será aún más barato, y lo agregaremos de esta manera como está en la siguiente imagen:

Aplicando cupón HOLAMUNDO a nuestro carrito de compras
Aplicando cupón HOLAMUNDO a nuestro carrito de compras

Así se verá la pantalla con el código aplicado.

Código aplicado en el carrito de compra
Código aplicado en el carrito de compra

Configurar VPS de hostinger

Cuando hayas terminado el proceso de pago, estando en tu cuenta, iremos a la pestaña Home, ahora más abajo en setup vamos a dar clic en el botón del lado derecho que dice «Setup«

Home de Hostinger con nuestro servidor sin configurar
Home de Hostinger con nuestro VPS sin configurar

Y vamos a seguir el paso a paso de las pantallas que nos da hostinger:

Configurando el servidor
Configurando el VPS

Lo siguiente es elegir la región donde estará nuestro servidor, hemos seleccionado «United States of America«:

Seleccionando la región de nuestro VPS
Seleccionando la región de nuestro VPS

Lo siguiente será seleccionar el sistema operativo, del cual vamos a seleccionar «Application»:

Seleccionando sistema operativo
Seleccionando sistema operativo

En la siguiente pestaña vamos a seleccionar Ubuntu con Django que aparecerá si das clic en «mostrar más opciones«, entonces presionamos en el boton «Select» y después en «Continue«:

Seleccionando aplicación en Ubuntu con Django
Seleccionando aplicación en Ubuntu con Django

Ahora tendremos que asignarle un nombre, el cual solo es para identificarlo dentro de hostinger y una contraseña del usuario root, esta contraseña la utilizaremos más adelante, así que tenla a la mano, ya que tengamos esto, le vamos a dar clic en el botón «Save and Continue» que se encuentra más abajo.

Definiendo nombre y contraseña del VPS
Definiendo nombre y contraseña del VPS

Podremos verificar información, y con esto podremos dar clic en el botón «Finish setup» y tendremos que esperar unos minutos a que termine de instalar.

Terminando configuración del VPS
Terminando configuración del VPS

Y cuando termine, deberemos ver una pestaña como esta:

VPS listo para usarse
VPS listo para usarse

Ahora daremos clic en donde dice «Manage server» y veremos la siguiente pantalla:

Información de nuestro VPS
Información de nuestro VPS

Apuntar el dominio con la dirección IP

Lo que necesitaremos es dirección IP, la cual podemos ver en la imagen anterior, esta es la dirección IP de nuestro servidor.

IP de nuestro VPS
IP de nuestro VPS

Vamos a dejar la página de Hostinger un momento, y nos dirigiremos a la de namecheap, en la pantalla principal haremos clic en donde dice «Advanced DNS»

Accediendo a las opciones de DNS avanzadas
Accediendo a las opciones de DNS avanzadas

Y en la siguiente pantalla haremos clic en donde nos dice «ADD NEW RECORD«

Agregando Records para redireccionar a nuesta IP
Agregando Records para redireccionar a nuesta IP

Ahora, en Type seleccionaremos «A Record«, en Host colocaremos un @ y en Value vamos a colocar la dirección que nos proporcionó hostinguer anteriormente, o siguiente será guardar los cambios

Antes de salir de esta pantalla agregaremos un registro más, pero en Host le vamos a colocar «www» y el Value será la misma dirección IP

Agregamos nuestra IP al DNS para que se redirrecionea nuestro servidor
Agregamos nuestra IP al DNS para que se redirrecionea nuestro servidor

Lo que acabamos de hacer es que el dominio que compramos en namecheap va a redirigir al servidor de hostinger. Ten en cuenta que este proceso puede tardar hasta 48 horas, en mi experiencia ha tardado 15 minutos, pero ten en cuenta esto, pero cuando esté listo y entres a tu página, vamos a ver algo como lo siguiente:

Aplicación predeterminada de nuestro VPS
Aplicación predeterminada de nuestro VPS

Este «Hello, world!«, es una aplicación de Django predeterminada al momento de crear el servidor.

Añadir el certificado SSL para nuestra aplicación

Como viste en la imagen anterior, nuestro sitio web no tiene el icono de candado, que certifica que es un sitio seguro en el navegador, hasta este momento lo marca como un sitio inseguro.

En este ejemplo, usando el sistema operativo Windows, vamos a abrir una terminal de comandos PowerShell y vamos a ejecutar el siguiente

ssh root@
Accediendo a la terminal de nuestro servidor
Accediendo a la terminal de nuestro servidor

En este paso tendremos que escribir «yes«, esto para conectarnos al servidor, y lo siguiente será colocar nuestra contraseña de usuario root que definimos previamente en hostinger.

Ingresando contraseña de usuario root para ingresar a la terminal del servidor
Ingresando contraseña de usuario root para ingresar a la terminal del servidor

Si has colocado correctamente la contraseña, verás una pantalla como esta:

Login exitoso en nuestra terminal del VPS

Ahora en la última línea que vemos, tenemos que escribir el nombre de nuestro dominio (el que obtuvimos en namecheap) y posteriormente confirmar escribiendo y después presionando la tecla enter:

Ingresando la dirección de  nuestro dominio
Ingresando la dirección de nuestro dominio

Lo siguiente que nos preguntará es si queremos encriptar el certificado y escribiremos de nuevo y y después presionaremos la tecla enter

Agregando dominio a nuestro servidor
Agregando dominio a nuestro servidor

Lo siguiente es escribir nuestro correo electrónico, confirmarlo y verificar, escribiendo y y después presionar enter

Ingresando email
Ingresando email

Ahora recibiremos el certificado para nuestra aplicación, enseguida nos preguntará si queremos que todas las peticiones sean redirigidas a este dominio con el certificado y obviamente le colocaremos y seguido de presionar enter, y lo último que nos preguntará es si queremos actualizar el servidor web y por última vez escribiremos y seguido de presionar enter

Agregando el certificado en todos los redireccionamientos y reiniciando el sistema
Agregando el certificado en todos los redireccionamientos y reiniciando el sistema

Terminado este proceso, deberás notar en el navegador ingresando al dominio que asignaste que tu página ya tiene certificado SSL

Certificado SSL funcionando correctamente
Certificado SSL funcionando correctamente

Creando el repositorio de nuestro proyecto con git y GitHub

Lo siguiente será que tengas instalado a Git, para este te podemos recomendar nuestro curso gratuito de Git en el que aprenderás a utilizarlo, ya que aquí solo veremos la secuencia de comandos para poder lograr nuestro objetivo, en el que conocerás sobre la instalación y uso de esta herramienta e igualmente del uso de GitHub, en la que deberás crearte una cuenta.

Lo que haremos a continuación es crear un nuevo repositorio, haciendo clic en el botón que dice «New» como se ve en la siguiente imagen.

Página principal de GitHub
Página principal de GitHub

Enseguida vamos a crear el repositorio, forzosamente le deberemos colocar un nombre, las siguientes opciones, las dejaremos por defecto y podremos dar clic en el botón «Create repository«

Creando nuevo repositorio en GitHub
Creando nuevo repositorio en GitHub

Al finalizar el proceso, verás una pantalla parecida a esta:

Página de repositorio creado
Página de repositorio creado

Ahora regresaremos a la terminal de comandos y estando ubicados en la carpeta de nuestro proyecto.

Obtener listado de módulos

Vamos a utilizar el siguiente comando para obtener el listado de los módulos necesarios para que nuestra aplicación funcione. Si estás usando un ambiente virtual actívalo y enseguida, para terminales de MacOS o una que use los comandos de Linux, el comando será el siguiente:

pip3 freeze > requirements.txt

Pero si usas una que use los comandos Windows como la CMD o la PowerShell el comando será el siguiente:

pip freeze > requirements.txt

El resultado del archivo requirements.txt será algo como esto:

Lista de módulos en el archivo requirements.txt
Lista de módulos en el archivo requirements.txt

Y ahora hay que hacer un par de cambios a nuestro proyecto para no tener problemas cuando esté en desplegado en Internet. En el archivo productly/settings.py, vamos a cambiar un par de línea, vamos a dirigirnos a aproximadamente la línea 35, en la cual tenemos las variables DEBUG y ALLOWED_HOST, deberemos asegurarnos de que estén así:

DEBUG = False

ALLOWED_HOST = ['*']

Regresaremos a nuestra terminal y utilizaremos los siguientes comandos, el primero para inicializar nuestro repositorio en nuestro local:

git init

Ahora agregaremos nuestros archivos con el comando:

git add .

Después haremos commit de nuestros archivos, guardándolos en una nueva versión de nuestro proyecto

git commit -m "primer commit"

Crearemos la rama main con el comando:

git branch -M main

Ahora podremos copiar la siguiente línea de la página de GitHub, la cual incluirá el enlace del de tu repositorio de GitHub a nuestro local , para así poder subir los cambios.

Pasos para añadir el repositorio al entorno local
Pasos para añadir el repositorio al entorno local

El comando en cuestión es:

git remote add origin 

Configurar permisos de GitHub a nuestro local

Si intentamos subir los cambios al repositorio, si no has configurado el acceso con llaves SSH tendrás el problema que no te permitirá por falta de permisos en el repositorio, por lo que tenemos que configurar las llaves SSH.

Para hacer este proceso necesitaremos crear en nuestra computadora una llave pública y una llave privada, estas nos servirán para darle acceso en GitHub a que podamos hacer cambios en el repositorio.

En la terminal de comandos escribiremos el siguiente comando:

ssh-keygen -t rsa -b 4096 -C "tuCorreoElectronico"

Presionando enter, nos preguntará si queremos añadir una contraseña adicional a esta llave, si generas esta contraseña te la pedirá en cada movimiento que vayamos a hacer al repositorio de GitHub, esto dependerá de cada quien y terminando nos mostrará una pantalla como la siguiente:

Generando la llave pública y privada
Generando la llave pública y privada

Y tendrás que ingresar a la carpeta que te señala en la terminal para encontrar tus llaves, la cual lo más común es que se guarde en el disco C:\Users\/.ssh

Archivos de las llaves vistos en el explorador
Archivos de las llaves vistos en el explorador

De estos archivos:

  • el id_rsa es la llave privada, nunca deberías compartir esta con nadie,
  • y la id_rsa.pub es la llave pública la cual utilizaremos para vincular nuestra cuenta de GitHub

Tendremos que abrir la llave privada con el bloc de notas o un editor de código, esto para copiar su contenido:

Contenido de la llave pública
Contenido de la llave pública

En tu cuenta de GitHub vamos a donde está la foto de perfil y haciendo clic vamos a poder ver diferentes opciones, vamos a dar clic en donde dice «Settings«

Yendo a los settings del perfil de GitHub
Yendo a los settings del perfil de GitHub

Y después iremos a la parte «SSH and GPG keys«

Accediendo a la página para agregar llaves SSH en GitHub
Accediendo a la página para agregar llaves SSH en GitHub

Ahora vamos a ir a esta parte y daremos clic en el botón que dice «New SSH Key«

Llaves SSH actuales en el perfil de GitHub
Llaves SSH actuales en el perfil de GitHub

En esta pantalla vamos a añadir un título, este es normalmente como le llamemos a ese equipo, la key type la dejaremos con la opción «Authentication Key» y por último, pegaremos el contenido que previamente copiamos del archivo id_rsa.pub

Agregando llaves SSH
Agregando llaves SSH

Y ahora tendrás correctamente creada la llave para poder subir los cambios al repositorio desde esta computadora, puedes agregar más computadoras, pero asegúrate de crear llaves diferentes para cada una y agregarlas de la misma manera.

Llave pública SSh agregada al perfil de GitHub
Llave pública SSh agregada al perfil de GitHub

Ahora en nuestra terminal, estando en la carpeta de nuestro proyecto vamos ahora sí a subir nuestro proyecto al repositorio con el comando:

git push -u origin main

Ahora vas a ver que todos nuestros archivos se han cargado con éxito.

Proyecto en GitHub cargado con éxito
Proyecto en GitHub cargado con éxito

Creando llaves para el servidor

Como hemos hecho anteriormente, que necesitamos llave pública y privada en nuestra máquina local, también la vamos a necesitar en el servidor, vamos a volver a ingresar a nuestro servidor con el siguiente comando, y después ingresando la contraseña del usuario root:

ssh root@

Ya estando dentro de la terminal del servidor:

ssh-keygen -t rsa -b 4096 -C "tuCorreoElectronico"

Este proceso se verá similar a este, la ruta donde se guardará dicho archivo y las contraseñas las dejaremos como predeterminadas, solo presionando enter cuando nos pregunte esta información.

Llaves SSH creadas en la terminal del servidor
Llaves SSH creadas en la terminal del servidor

Con el siguiente comando vamos a agregar la key a los servidores.

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

Enseguida, vamos a usar el siguiente comando, lo que hará será mostrarnos el contenido de la llave pública en la terminal, vamos a copiar este contenido.

cat .ssh/id_rsa.pub
Viendo la llave pública
Viendo la llave pública

Ahora tendremos que agregar esta llave al repositorio de GitHub, hace un momento lo hicimos en el perfil, pero aquí tendremos que ir a la pestaña de «Settings» de nuestro repositorio.

Accediendo a los Settings del repositorio
Accediendo a los Settings del repositorio

Y ahora, en la barra derecha, vamos a ir a la opción «Deploy keys«

Accediendo a las llaves para hacer deploy del repositorio
Accediendo a las llaves para hacer deploy del repositorio

Y si das clic verás la siguiente pantalla, vamos a presionar en el botón «Add deploy Key» del lado derecho.

Llaves actuales en el repositorio
Llaves actuales en el repositorio

Ahora tendremos que colocarle un título y copiar la llave pública que hemos copiado anteriormente de la terminal y guardamos.

Agregando la llave pública del servidor en el repositorio
Agregando la llave pública del servidor en el repositorio

Ahora veremos la llave creada.

LLave guardada
LLave guardada

Gestionar versión de Python en el servidor

Ahora vamos a la siguiente tarea, podremos tener algunos problemas si es que nuestras versiones de Python son incompatibles , por ejemplo si nuestro proyecto está construido en la versión 3.11 y no tenemos esta versión en el servidor podríamos llegar a tener problemas, vamos a resolverlo:

Estando en la terminal de comandos y estando dentro de nuestro servidor, vamos a verificar la versión de Python con el comando

python3 --version

En nuestro ejemplo, vamos a ver que tenemos la versión 3.10.6 de Python.

Viendo la versión de Python
Viendo la versión de Python

Primero vamos a realizar una actualización:

apt update

Vamos a esperar a que el proceso de actualización termine:

apt list | grep python3.11

Este comando nos mostrará la lista de paquetes disponibles que incluyan el término python3.11, vamos a proceder a instalarlo.

apt install python3.11

Nos preguntará si queremos instalar los paquetes mencionados y tendremos que escribir y y después presionar enter

Instalando la versión de Python 3
Instalando la versión de Python 3

Una vez que termine, tendremos que verificar la versión, pero si usamos el comando

python3 --version

Veremos que nos sale la misma versión de Python 3.10, pero hay una forma de cambiar esta versión, esto se hace con el comando:

update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.11 2

Y también necesitaremos hacer:

update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.10 1
update-alternatives --config python3

Ahora veremos lo siguiente, en el cual podremos seleccionar un modo predeterminado para que se use una cierta versión de Python, en este caso seleccionaremos la 2.

Seleccionando la versión de Python a usar en el servidor
Seleccionando la versión de Python a usar en el servidor

Ejecutaremos de nuevo el siguiente comando para verificar la versión de Python que estamos utilizando

python3 --version
Versión de Python cambiada con éxito
Versión de Python cambiada con éxito

Clonando y configurando el repositorio en el servidor

Tenemos que ingresar a donde se encuentra el proyecto de prueba predeterminado de Django en nuestro servidor, para esto dentro de nuestra terminal, estando dentro del servidor, utilizaremos el comando:

cd /usr/local/lsws/Example/html

Vamos a ver todas las carpetas dentro de esta con el comando:

ls

Y vamos a ver algo similar a esto, en el que la carpeta demo, incluye ese proyecto de Django predeterminado:

Carpetas actuales dentro del servidor donde vemos la carpeta demo
Carpetas actuales dentro del servidor donde vemos la carpeta demo

Vamos a ir de nuevo a nuestro repositorio en GitHub y en el botón verde que dice Code, vamos a seleccionar la opción para clonar con SSH y vamos a copiar la dirección que está debajo.-

Eligiendo el método SSH para clonar el proyecto en el servidor
Eligiendo el método SSH para clonar el proyecto en el servidor

Ahora, de nuevo en la terminal, vamos a utilizar el siguiente comando:

git clone 

Tendremos que autorizar que se conecte a GitHub, presionaremos la tecla y seguido de enter y con esto comenzará a descargar el proyecto a nuestro servidor, tendríamos que ver una pantalla parecida a esta.

Clonando el repositorio en el servidor
Clonando el repositorio en el servidor

Ahora verificaremos que nuestra carpeta haya sido traída con éxito, de nuevo usaremos el comando:

ls

Y tendríamos que ver nuestra carpeta:

Carpeta del proyecto agregada con éxito
Carpeta del proyecto agregada con éxito

Ahora vamos a habilitar el puerto que usa nuestra aplicación de Django con el siguiente comando

ufw allow 7080

Lo siguiente será obtener nuestra contraseña de administrador, lo haremos con el comando:

cat /root/.litespped_password

Vamos a copiar la contraseña y abriremos una nueva pestaña en el navegador web

Viendo la contraseña de administrador
Viendo la contraseña de administrador

Vamos a buscar nuestra web, es decir, la dirección de nuestro dominio, y vamos a agregarle el puerto 7080, como ejemplo de nuestro ejercicio, hemos ingresado a la dirección nicolas-schurman.xyz:7080 y no te preocupes si ves la siguiente pantalla, es normal al tratar de ingresar de esta manera, pero tienes que presionar clic en ver avanzado y después clic en proceder a visitar el sitio.

Accediendo al panel de administración
Accediendo al panel de administración

Vas a ver la siguiente pantalla, vamos a ingresar el usuario que es «admin» y la contraseña que copiamos en el paso anterior

Accediendo con el usuario y contraseña
Accediendo con el usuario y contraseña

Ahora que hemos ingresado, vamos a la opción «Virtual Hosts«

Accediendo a Virtual Hosts
Accediendo a Virtual Hosts

Verás una pantalla como esta, y ahora vamos a hacer clic en «Example«,

Lista de Virtual Host
Lista de Virtual Host

Y luego vamos a hacer clic en la pestaña de «Context» y luego, en donde dice «AppServer«, vamos a presionar en el icono de editar dentro de la columna de «Actions«

Accediendo a la configuración del server de la App
Accediendo a la configuración del server de la App

Ahora en esta página vamos a bajar un poco para ver las opciones, y veremos que en Location, Startup File, y Environment, esta la referencia de la dirección a Demo, la aplicación predeterminada de Django, pero la cambiaremos por el nombre de nuestra app, para nuestro ejemplo es productly, quedando esta parte de la siguiente manera:

Cambiando del proyecto demo por nuestro proyecto, parte 1
Cambiando del proyecto demo por nuestro proyecto, parte 1
Cambiando del proyecto demo por nuestro proyecto, parte 2
Cambiando del proyecto demo por nuestro proyecto, parte 2

Vamos a regresar a nuestra terminal, donde nos quedamos y vamos a usar él, siguiente comando:

cd productly

Y ahora vamos a encender nuestro ambiente virtual.

source /usr/local/lsws/Example/html/bin/activate

Verás que en la terminal aparece un (HTML) antes de nuestra ruta, como la siguiente.

Ambiente virtual activado en la terminal del servidor
Ambiente virtual activado en la terminal del servidor

Ahora sí, procederemos a instalar los módulos que habíamos obtenido previamente en el archivo requirements.txt

pip install -r requirements.txt

Una vez que se terminen de instalar las dependencias, vamos a hacer un reinicio haciendo clic en el siguiente icono en la página de la pestaña «Context«

Recargando el servidor
Recargando el servidor

Si ingresas a tu dominio sin el puerto, deberías de ver el proyecto funcionando.

Proyecto cargado con éxito
Proyecto cargado con éxito

Pero si no funcionó tendremos que reiniciar el servidor en la página de hostinger, en nuestros servidores vamos a hacer clic en el botón «Manage»:

Vista de todos los proyectos
Vista de todos los proyectos

Y luego, en la pestaña de overview, vamos a bajar y encontraremos la opción «Reboot VPS«.

Reiniciando la VPS desde Hostinger
Reiniciando la VPS desde Hostinger

Actualizar cambios en el servidor

Vamos a hacer un cambio en nuestro proyecto para posteriormente los cambios se vean en nuestra aplicación, para eso, en nuestro proyecto vamos a ir al siguiente archivo: templates/inicio.html

Actualizar archivo HTML
Actualizar archivo HTML

Y dejaremos esto de la siguiente manera, estamos eliminando el texto «en llamas».

Modificaciones realizadas al proyecto
Modificaciones realizadas al proyecto

Pero tú puedes incluir cualquier otro tipo de texto, lo importante es que sea diferente al actual, vamos a guardar los cambios y ejecutaremos los siguientes comandos en nuestra terminal, en este caso abriremos otra terminal o saldremos de la terminal servidor para regresar a nuestra terminal local:

git add .\templates\inicio.html
git commit -m "cambios en la pagina de inicio"
git push 

Con esto realizado correctamente, vamos a tener los cambios en nuestro repositorio de GitHub.

Cambios subidos con éxito al repositorio en GitHub
Cambios subidos con éxito al repositorio en GitHub

Pero, esto no se reflejará en nuestro servidor, para eso tenemos que ir a la terminal de nuestro servidor, recuerda que accedemos con el comando:

ssh root@
cd /usr/local/lsws/Example/html
cd productly
git pull

Esto va a traer los cambios a nuestro repositorio en el servidor, pero si no se ven reflejados, tendremos que entrar al panel de administración como lo hicimos anteriormente para clonar y configurar el repositorio en el servidor, y hacer clic en el icono de recarga como se ve en la siguiente imagen.

Recargar el servidor desde el panel de administración

O ir directamente a la página de Hostinguer y reiniciarlo, como hicimos en el paso anterior.

Reinicio de la VPS desde Hostinger

Automatizar el despliegue

Para no hacer este proceso en cada cambio que hagamos, podemos automatizarlo gracias a la ayuda de «GitHub Actions«, para lo cual vamos a tener que dirigirnos a nuestro repositorio y vamos a ir a la pestaña llamada «Actions«

Pestaña de Actions en el repositorio GitHub
Pestaña de Actions en el repositorio GitHub

Y en esta pestaña vamos a hacer clic en «set up a workflow yourself«

Configurando un flujo de trabajo en GitHub Actions
Configurando un flujo de trabajo en GitHub Actions

Después de dar clic, vamos a asegurarnos de tener este archivo con extensión .yml, en esta ruta específica.

Generando el archivo main.yml en el repositorio de GitHub

Y vamos a escribir lo siguiente:

name: Despliegue en hostinger
on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: pull codigo en VPS
        uses: appleboy/ssh-action@master
        with: 
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          script: |
                    cd /usr/local/lsws/Example/html/productly
                    git fetch origin main
                    git reset --hard origin/main

Y una vez que tengamos listo el archivo, vamos a poder guardar los cambios desde GitHub haciendo el commit correspondiente haciendo clic sobre el botón «Commit changes…«

Guardando los cambios en el repositorio
Guardando los cambios en el repositorio

Despues podremos presionarlo veremos la siguiente pantalla y haremos clic en el boton «Commit changes»

Guardando cambios en un nuevo commit
Guardando cambios en un nuevo commit

Ahora, cuando hagamos un commit veremos en el repositorio el siguiente punto, que significa que hay un flujo de trabajo ejecutándose.

Flujo de trabajo ejecutándose
Flujo de trabajo ejecutándose

Si hacemos clic en la pestaña de «Actions» ahora vamos a ver la siguiente pestaña:

Lista de flujos de trabajo que se están ejecutando
Lista de flujos de trabajo que se están ejecutando

Ahora si hacemos clic en esta tarea vamos a ver el paso a paso de lo que se está ejecutando, en la siguiente imagen podemos ver que el proceso ha fallado, esto ha pasado porque no están definidos los secretos, que es lo siguiente que haremos.

Paso a paso de la ejecución
Paso a paso de la ejecución

Agregando secretos

En el repositorio de GitHub vamos a ir a Settings

Accediendo a los Settings del repositorio
Accediendo a los Settings del repositorio

Y en la barra izquierda vamos a ir a la parte de «Secrets and variables» y haciendo clic en esta veremos más opciones, en este caso iremos a «Actions«

Accediendo a secretos y variables para Actions de GitHub en el repositorio
Accediendo a secretos y variables para Actions de GitHub en el repositorio

Ahora, dentro de esto, cuando estemos en la pestaña «Secrets» vamos a hacer clic en «New repository secret«

Agregando un nuevo secreto
Agregando un nuevo secreto

De esta manera, vamos a poder agregar los 3 secretos que necesitamos:

Ingresando información de este secreto
Ingresando información de este secreto

Si recuerdas, los 3 secretos son:

  • SSH_HOST y su valor será la IP de nuestro servidor, para nuestro ejemplo es: 45.90.223.77,
  • SSH_USER y su valor es root, y
  • SSH_KEY

Para esta última, hay un detalle y es que necesitamos colocar una llave privada, que puedes crear una nueva, como lo hemos hecho en este artículo o puedes usar la misma que está en el servidor, por seguridad sería ideal que crearas una nueva, para practicidad del ejercicio utilizaremos la misma que tenemos guardada, entonces ingresaremos de nuevo al servidor con el comando

ssh root@

Y vamos a utilizar el comando:

cat .ssh/id_rsa

Yahora vamos a copiar todo el contenido, y este es el valor que pegaremos en él Secret que estamos creando SSH _KEY

Obteniendo la llave privada del servidor
Obteniendo la llave privada del servidor

Al final deberás tener estas tres variables:

Listos los 3 secretos necesarios para que el flujo de trabajo funcione correctamente
Listos los 3 secretos necesarios para que el flujo de trabajo funcione correctamente

Ahora regresaremos a nuestro editor, al archivo templates/inicio.html , y aquí haremos el siguiente cambio, agregaremos el texto «actualizado!», y guardaremos el archivo

Haciendo nuevos cambios en el proyecto
Haciendo nuevos cambios en el proyecto

Pero antes , tenemos que traer los cambios del repositorio, ya que el archivo main.yml no existe en nuestro local , así que usaremos el comando:

git pull

Ahora sí podremos crear un nuevo commit y enviarlo al repositorio, entonces haremos la siguiente secuenccia de comandos:

git add .
git commit -m "actualizado"
git push

Ahora, si todo ha salido bien en los Actions de nuestro repositorio, vamos a poder ver esto:

Flujo de trabajo completado con éxito
Flujo de trabajo completado con éxito

Ahora podremos entrar a nuestra aplicación, podremos ver que los cambios se han aplicado sin hacer los cambios manuales que anteriormente hacíamos

Cambios reflejados en nuestra aplicación
Cambios reflejados en nuestra aplicación

Este tutorial ha sido extenso, pero hemos visto muchos conceptos y cómo estos te ayudarán a hacer despliegue de tus aplicaciones para mostrarlas cuando solicites un nuevo empleo y quieras que tus apps sean usadas por el mundo.

Y de nuevo, si quieres adquirir un plan anual de Hostinger, no olvides utilizar el código HOLAMUNDO en tu suscripción al servicio de 12 meses para obtener aún más descuento, y ahora te preguntamos ¿qué aplicación o aplicaciones son la que subirás a tu servidor?

Te dejaremos el enlace a todos nuestros cursos de programación, los cuales los encontrarás disponibles en la academia Hola Mundo y puedes optar por adquirir los cursos de manera individual en el siguiente link: todos los cursos de Hola Mundo, si prefieres acceso a todo, también puedes elegir un plan de suscripción mensual o anual, o tambien puedes optar por cada curso de manera individual en Udemy.

Y esto ha sido todo de este post, si te ha encantado, ¡golpea al botón de me gusta!, dejanos un comentario, y para no perderte nada, no olvides suscribirte a este blog, seguirnos en todas las redes como Youtube, Twitter, Instagram y Tiktok, y por último, te invitamos a escuchar nuestra música «Hola Beats«, diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, la puedes encontrar en Spotify, Apple Music, Amazon Music, Youtube Music y Deezer.

¡Hasta la próxima!, y chao mundo

Gabriel Hernández

Soy desarrollador fullstack autodidacta y estudié administración en la universidad. Mi stack es principalmente con JavaScript, haciendo frontend con React y Next, y backend con Node y Express. Otras herramientas con las que he trabajado son Python para backend y Solidity para desarrollo de contratos inteligentes.

Comments (11)

Deja un comentario

Press ESC to close

Descubre más desde Hola Mundo

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo