Cómo desplegar proyectos en un VPS paso a paso

Como desarrolladores, nos encanta crear y más ahora con la inteligencia artificial, pero a veces nos frena el despliegue o el coste de mantenerlo. Hoy vamos a romper esa barrera. Te voy a enseñar cómo darles vida a esos proyectos que tienes medio abandonados en github y son increíbles, simplemente usando un VPS de Hostinger, donde por el precio de dos cafés al mes puedes tener no una, sino todas tus aplicaciones funcionando 24/7.

NOTA: Cóigo de descuento del 10% con el cupon NETMENTOR.

1 - ¿Por qué necesitas un VPS?

Un VPS no deja de ser una máquina en un servidor que es tuya, completamente, instalas lo que quieras, lo configuras como quieras y lo bueno que tiene es que pagas muy poco en comparación con cualquier otra plataforma de las que lo gestionan todo por ti. 

Pese a ser un poco más de trabajo al inicio sobre todo, pero luego merece absolutamente la pena a largo plazo ya que es muchísimo más barato y podemos escalar a máquinas con mayores recursos cuando el sistema lo necesite.

2 - Elegir un proveedor de VPS. Por que hostinger? 

No voy a mentir, es una colaboración, pero hay un motivo por el que acepté trabajar con ellos y no con otros proveedores.

2.1 - Geolocalización

Hostinger tiene servidores en Brasil, lo cual es clave si vosotros o vuestros clientes están ubicados en latinoamérica, la latencia es muy importante y tener un servidor en sao paulo marca una diferencia brutal a tenerlo en Estados Unidos o en Europa.

Por supuesto si tu público es Europeo, también tienes servidos en Europa. Pero para mi, que tuvieran servidores en sudamérica me importaba y mucho. 

2.2 - Relación calidad precio

Por supuesto no serviría de nada realizar una colaboración si pensara que el producto no merece la pena. 

Hostinger tiene varias ofertas, al ser nosotros desarrolladores, incluso para proyectos de hobby le vamos a dar caña. Así que recomiendo instalar el KVM 2, que son 2vCPUs (virtual CPU), 8 GB de Ram y 100 GB de disco. Recomiendo este eso puedes correr un Stack de Monitoreo (Grafana/Prometheus), un Nginx, tres Node.js apps y una Base de Datos sin que el servidor sude., con eso tenéis de sobra. 

Y ya cuando crezcas a un un producto con cientos usuarios recurrentes simultáneos podéis escalar a una máquina más grande.

Aquí es donde entra la colaboración, si utilizas el código NETMENTOR tendréis un descuento extra. No solo ayudáis al canal sino que os lleváis una máquina potente por un precio muy bajo para vuestros side projects. 

2.3 - Tipos de VPS 

Como he mencionado antes, un VPS no es más que una máquina que pasa a ser tuya, donde podemos hacer prácticamente lo que queramos. 

La configuración de Hostinger con el VPS tiene algo que me gusta mucho, y es que nos permite elegir “modos” dependiendo de nuestro nivel de habilidad.

• Plain OS: Como indica el nombre, un sistema operativo completamente limpio, podemos elegir entre los Linux más populares.
• Os With Panel: suele ser un sistema operativo con una configuración por defecto y cierto software ya instalado, principalmente la interfaz.
• Applications: Esta opción es literalmente instalar aplicaciones con un click. Ahora mismo n8n está muy de moda para automatizar workflows de la IA, pues con un click puedes montarte tu propio n8n.

En nuestro caso vamos a ir con el Plais OS, instalando el sistema operativo Ubuntu desde zero. He elegido ubuntu porque es de lejos la distro más popular y más documentada sobre todo para general purpose, pero cualquiera nos sirve

Y en este post veremos un caso de uso básico. 

2.4 - Elegir un dominio

Tener un VPS está genial, pero no le vas a pasar a un cliente una dirección IP para que acceda, necesitas un nombre. Hostinger te regala el primer año de dominio, y lo mejor es que la integración es nativa. Solo tienes que ir a la gestión de DNS del dominio y crear un Registro A que apunte a la IP de tu VPS. Es un proceso de dos clics y en unos minutos tu código ya tiene nombre y apellidos

3 - Conectarse al VPS

Una vez tenemos todo instalado nos podemos conectar al mismo. De primeras iremos por la terminal web pero lo más recomendado es conectarse desde el propio ordenador utilizando el comando ssh root@serverIP and the password that you set while setting up the VPS. 

Para ello hay varias cosas que debemos hacer. Crear un usuario NO Root, esto quiere decir que no va a tener privilegios de administrador y usaremos sudo solo cuando sea estrictamente necesario. 

Podríamos argumentar si para este escenario deberíamos instalar tailscale con un tunel entre tu maquina y tu VPS para hacer ssh, pero por ahora, no es necesario. 

adduser netmentor

usermod -aG sudo netmentor

ssh netmentor@serverIP

A partir de aquí utilizaremos sudo únicamente cuando sea necesario para instalar o configurar servicios

Y por supuesto, que no se os olvide activar los backups diarios desde el panel de hostinger, para ya bien sea volver la configuración normal cuando la lies pardisima, que en algún momento nos pasa a todos, o especialmente si tenéis usuarios recurrentes.

4 - Tu Landing Page Online: Servidor y Dominio

Ahora que tenemos el acceso seguro, es el momento de convertir el servidor vacío en algo útil.

Primero te recomiendo una serie de comandos que son para actualizar el sistema, instalar 

sudo apt update && sudo apt upgrade -y

sudo apt install -y curl git ufw

sudo ufw allow OpenSSH
sudo ufw allow 80
sudo ufw allow 443
sudo ufw enable

Para este ejemplo, simplemente vamos a mostrar una landing page, porque es para ver el funcionamiento, aún así, para hacerlo como sería con una aplicación más completa, vamos a instalar NGNIX.

4.1 - Instalar NGNIX 

Para que nuestra landing page sea accesible desde cualquier navegador, necesitamos un servidor web. En este caso, utilizaremos Nginx. Simplemente porque es una de las tecnologías más populares de la industria actualmente. Además, en el futuro, nos servirá como proxy inverso para gestionar múltiples aplicaciones.

sudo apt install nginx -y
sudo systemctl status nginx
sudo ufw allow 'Nginx Full'

Y cambiamos el registro A del DNS para que apunte a nuestra web en vez de al de por defecto:

4.2 - Desplegar nuestra landing

Para este caso en concreto es un fichero plano de html, por lo que podemos simplemente copiarlo, o incluso escribirlo a mano con vi …

Eso sí, este fichero tiene que estar en la ruta var/www/html y simplemente haciendo sudo vi index.html nginx lo piya automáticamente.

Ahora simplemente tenemos que acceder en nuestro navegador al dominio que hostinger nos ha regalado por un año al contratar el VPS si usas mi código NETMENTOR. 

Y ya esta! Aquí lo podemos ver: 

5 - Desplegar una app real de .NET en Linux

No me iba a quedar ahí, y para este ejemplo os voy a enseñar cómo desplegar una app en .NET con Blazor en un servidor Linux. 

Obviamente este ejemplo es con .NET porque este canal/blog es de .NET, pero cualquier lenguaje de programación sirve. Es más, podríamos instalar docker y hacer que todo corra en docker. O incluso dockploy en las settings de hostinger y directamente tener nuestro VPS con dockploy instalado. 

Y también mencionar que vamos a ejecutar esta aplicación blazor en un subdominio, no en el dominio principal. 

5.1 - Configurar un subdominio en Hostinger

Para ello, tenemos que volver al panel de hostinger y crear otro A record con el subdominio personalizado apuntando a la misma IP que de nuestro VPS.

Si te das cuenta, esto significa que también podemos tener tantos dominios como queramos apuntando a un solo VPS.

5.2 - Instalar .NET en el servidor 

Vuelta al VPS para desplegar el sistema.

Para nuestro caso tenemos que instalar git y .NET, la última versión que es la versión 10.

wget https://packages.microsoft.com/config/ubuntu/22.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb
sudo apt update
sudo apt install -y dotnet-sdk-10.0

5.3 - Clonar el repositorio desde GitHub

Una vez instalado, lo que hacemos es clonar el repositorio

mkdir /home/netmentor/testapp/test-vps
cd /home/netmentor/testapp/test-vps
sudo git clone https://github.com/ElectNewt/test-vps

NOTA: Si tu repositorio es privado, necesitarás autenticarte. Puedes usar un Personal Access Token o configurar SSH keys.

5.4  -  Compilar la aplicación

Ahora compilamos la aplicación, en este post vamos tanto a correr la aplicación, como a hacer el build de la misma, esto no es una buena práctica en el mundo real, ya que deberías usar una CI CD pipeline, pero para un ejemplo rápido, nos sirve. Y si tu estas trasteando también te sirve, cuando las cosas se ponen serias ya no, pero bueno al lio: 

cd /home/netmentor/testapp/test-vps
mkdir /var/www/test-vps


sudo dotnet publish -c Release -o /var/www/test-vps

Y este proceso nos generará todos los archivos compilados dentro de la carpeta:

Llegados a este punto tenemos los binarios, pero nuestro VPS no sabe que hacer con ellos. 

5.5 - Crear el servicio que mantendrá nuestra app corriendo

Ahora vamos a crear un servicio para que la app se ejecute automáticamente y se mantenga corriendo.

cd /etc/systemd/system
sudo vi test-vps.service

y ahora en el contenido del fichero debemos crear el sevice comot al:

[Unit]
Description=test-vps .NET app
After=network.target

[Service]
WorkingDirectory=/var/www/test-vps/
ExecStart=/usr/bin/dotnet /var/www/test-vps/BlazorApp1.dll 
Restart=always
RestartSec=10
KillSignal=SIGINT
SyslogIdentifier=test-vps
User=ubuntu
Environment=ASPNETCORE_URLS=http://127.0.0.1:5000
Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false

[Install]
WantedBy=multi-user.target

Para despues hacer los siguientes comandos donde reiinciaremos el servicio y lo habilitaresmos

sudo systemctl daemon-reload
sudo systemctl enable --now test-vps

5.6 - Configurar Nginx como reverse proxy

Ahora tenemos que configurar el servidor web que hemos instalado anteriormente como un reverse proxy, lo que significa que las peticiones web que nos llegan al servidor las va a redirigir a un punto en concreto.

En este caso creamos un fichero donde indicamos que vamos a escuchar por el puerto 80 en nuestro subdominio y donde vamos a redirigir. 

este es el fichero que tendras que crear en /etc/nginx/sites-available

server {
    listen 80;
    listen [::]:80;

    server_name test.netmentor.tech;

    # If you need larger uploads:
    # client_max_body_size 50m;

    location / {
        proxy_pass         http://127.0.0.1:5000;
        proxy_http_version 1.1;

        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;

        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection "upgrade";
    }
}

Ahora simplemente creamos el link entre los sitios disponibles y los activos de nginx y a fucnionar.

sudo ln -s /etc/nginx/sites-available/test.netmentor.tech /etc/nginx/sites-enabled/test.netmentor.tech
sudo systemctl restart nginx

Donde podemos ver el resultado:

5.7 - HTTPS

Finalmente solo nos qued hacer que nuestro sitio tenga HTTPS y eso lo podemos hacer con certbot de una manera muy sencilla, con los siguientes 3 comandos intalaremos cerbot y añadiremos http a nuestro subdominio de forma automática y gratuita:

sudo apt update
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d test.netmentor.tech

NOTA: recuerda que tienes un código de descuento del 10% con el cupon NETMENTOR.