Pollito Blog
February 3, 2025

VPS 5: Implementación de una aplicación full-stack

Posted on February 3, 2025  •  10 minutes  • 2033 words  • Other languages:  English

Esta es la quinta y última parte de mi VPS blog series .

Qué es “Roundest Pokémon”?

“Roundest Pokémon” es un ejercicio de programación común que consiste en un juego de votación interactivo para decidir qué Pokémon es el más redondo.

Vamos a añadirle una novedad: la posibilidad de elegir qué sistema de backend procesa la votación.

backend-selector

Esta característica nos ayudará a ilustrar cómo se pueden implementar diferentes sistemas y trabajar juntos sin problemas, todos implementados en el VPS bajo un proyecto Coolify.

vote-flow

¿Qué vamos a necesitar?

Todas las aplicaciones fueron escritas por mí. En el futuro, publicaré artículos sobre ellas.

Agregar recurso PostgreSQL

  1. Crea un nuevo proyecto:
    • Haz clic en Projects en el menú de la izquierda.
    • Haz clic en Add a new project.
    • Nómbralo “roundest_pokemon”.
    • Haz clic en Create. Deberías tener un proyecto “roundest_pokemon” creado. coolify-projects
  2. Agrega un nuevo recurso PostgreSQL:
    • Ve a tu proyecto “roundest_pokemon”.
    • Haz clic en + New.
    • En Databases, selecciona Postgres. projects-postgres.png
    • Selecciona la opción predeterminada, ya que aquí solo necesitamos una base de datos SQL simple. postgres-16
    • Deje todo como está predeterminado y haga clic en Start. postgres-start

¿Cómo podemos gestionar la base de datos?

Optemos por el segundo enfoque.

pgAdmin

Agregar el recurso Docker

  1. Ve al proyecto “roundest_pokemon”.

    • Es muy importante que esté dentro del mismo proyecto, de lo contrario, pgAdmin no podrá acceder a la base de datos ya creada.

  2. Haz clic en + New.

  3. En Docker Based, seleccione Docker Image.

  4. Se solicitará que indique un nombre de imagen. Escribe dpage/pgadmin4 y haga clic en Guardar.

  5. Asígnele un dominio (como https://pgadmin4.yourdomain.com) y haz clic en Guardar. docker-image-pgadmin4

  6. En Enviroment Variables, agregue las credenciales que se usarán para iniciar sesión en pgAdmin:

    • PGADMIN_DEFAULT_EMAIL
    • PGADMIN_DEFAULT_PASSWORD (caracteres alfanuméricos, no símbolos)

    pgadmin-credentials.png

Agregar un nuevo servidor

  1. Ve a pgadmin4.yourdomain.com e inicia sesión con las credenciales que ingresaste en las variables de entorno de dpage/pgadmin4.

  2. Una vez dentro, ve a Add new server.

    pgadmin4.png

  3. En General, puedes darle el nombre que quieras

  4. En Connection, debes completar:

    • Host name/address: el nombre del host de la URL interna de PostgreSQL (está entre @ y :5432).
    • Port: por defecto es 5432.
    • Username: el nombre de usuario de PostgreSQL.

    postgres-conf.png pgadmin-connection.png

  5. Al guardar, se te pedirá la contraseña.

Ahora puedes ejecutar consultas a la base de datos, manteniéndola segura dentro de la red interna.

Rellenar datos iniciales

  1. En la barra lateral izquierda, en Servers -> el servidor que acabas de agregar -> Databases -> Schemas, haz clic derecho y seleccione Query Tool. Se abrirá una consola de consulta.

    pgadmin-query-tool.png

  2. Pega y ejecuta este script sql que crea una tabla para los Pokémon + inserta Pokémon de primera generación, con 0 votos iniciales.

  3. Recupere los datos creados para comprobar que todo esté bien.

SELECT * FROM pokemons;

pgadmin-select-pokemon.png

Crear un usuario específico para su aplicación

Crear un usuario específico para su aplicación (en lugar de usar el superusuario de postgres predeterminado u otras cuentas de administrador) es una práctica recomendada de seguridad y operativa.

Creemos un usuario con acceso limitado al esquema público:

-- Create backend_app_user
CREATE USER backend_app_user WITH PASSWORD 'your_secure_password_here';

-- Grant Basic Connection Permissions
GRANT CONNECT ON DATABASE postgres TO backend_app_user;

-- Grant Schema Permissions
GRANT USAGE ON SCHEMA public TO backend_app_user;

-- Grant Table Permissions: For existing tables
GRANT SELECT, INSERT, UPDATE, DELETE ON ALL TABLES IN SCHEMA public TO backend_app_user;

-- Grant Table Permissions: For future tables (default privileges)
ALTER DEFAULT PRIVILEGES IN SCHEMA public
GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO backend_app_user;

-- Grant Sequence Permissions: For existing sequences
GRANT USAGE, SELECT ON ALL SEQUENCES IN SCHEMA public TO backend_app_user;

-- Grant Sequence Permissions: For future sequences
ALTER DEFAULT PRIVILEGES IN SCHEMA public
GRANT USAGE, SELECT ON SEQUENCES TO backend_app_user;

Crear una aplicación de GitHub en Coolify

¿Por qué?

¿Cómo?

  1. Accede a las fuentes en Coolify:
    • Navega hasta Sources en tu panel de Coolify.
    • Haz clic en Add para crear una nueva aplicación de GitHub.
  2. Configura la aplicación de GitHub:

    • Proporciona un nombre único para tu aplicación de GitHub (por ejemplo, coolify-pollito-tech). El nombre es único a nivel global en GitHub.

    • Establece el Webhook Endpoint a la HTTPS URL de tu instancia de Coolify (el HTTP puede causar problemas de entrega del webhook).

    • Haz clic en Register Now para continuar en GitHub.

      github-app-register.png

  3. Configurar el acceso al repositorio en GitHub:
    • Siga el principio de “privilegio mínimo”, otorgue acceso solo a los repositorios que planea implementar.
    • Haz clic en Install para finalizar la configuración de la aplicación de GitHub.
  4. Verificar los permisos en Coolify:

    • Regresa a Coolify y haz clic en Refetch para confirmar que la aplicación de GitHub tiene los permisos correctos.

    • Una configuración exitosa mostrará que la aplicación tiene acceso a los repositorios seleccionados.

      github-app-save.png

Para agregar nuevos repositorios más tarde, haz clic en Update Repositories. Esto lo redireccionará a GitHub, donde puede actualizar el acceso al repositorio.

Despliegue mediante GitHub App

Spring Boot

Implementemos una de las aplicaciones backend.

  1. Dirígete a tu proyecto “roundest_pokemon”.
    • Es muy importante que estés dentro del mismo proyecto, de lo contrario, la aplicación no podrá acceder a la base de datos ya creada.
  2. Haz clic en + New.
  3. En Git Based, selecciona Repositorio privado (con aplicación de GitHub). resource-github-app.png
  4. Elige el repositorio que contiene la aplicación.
    • Puedes dejar todo lo demás como predeterminado, ya que lo configuras en el siguiente paso.
  5. Configurar los ajustes de la aplicación:
    • Application Type: este repositorio cuenta con un Dockerfile que yo personalmente he probado un poco y hasta ahora parece funcionar bien. Así que selecciona Dockerfile.
    • Agrega tu custom domain (por ejemplo, app.your-domain.com) roundest-groovy-conf1.png
    • Si te desplazas un poco hacia abajo, encontrarás la sección Network. Para estas aplicaciones de backend, en Ports exposes, establece 8080. El puerto puede variar entre diferentes tipos de aplicaciones. roundest-groovy-conf2.png
    • En Environment Variables, agregue todas las que necesite la aplicación. En esta aplicación en particular, necesito el host de la base de datos, el puerto, la base de datos, el nombre de usuario y la contraseña. Recuerde utilizar el usuario y la contraseña de la base de datos específica que creamos anteriormente.
  6. Deploy: Coolify hará lo siguiente:
    • Clonará el repositorio.
    • Construirá la imagen de Docker usando el archivo Dockerfile.
    • Desplegará el contenedor con las variables de entorno y dominio configurado.

Visite “https://app.your-domain.com ” para confirmar que la aplicación esté activa.

roundest-groovy-live.png

Baile y repita para todas las aplicaciones Spring Boot similares.

Next.js

El proceso de implementación de las aplicaciones Next.js es casi idéntico al backend de Spring Boot, con un cambio de configuración clave:

  1. Vaya a su proyecto (por ejemplo, “roundest_pokemon”).
    • Se aplica requisito de estar en el mismo proyecto, esto garantiza que el frontend pueda comunicarse con los servicios del backend.
  2. Haga clic en + New -> Private Repository (with GitHub App).
  3. Seleccione su repositorio Next.js.
  4. Configurar los ajustes de la aplicación:
    • Application Type: seleccione Nixpacks . Detecta automáticamente Next.js y maneja las optimizaciones de compilación.
    • Agregue su dominio frontend (por ejemplo, vote.your-domain.com). roundest-nextjs-conf1.png
    • En la sección Network: Establezca el puerto expuesto en 3000 (puerto predeterminado de Next.js). roundest-nextjs-conf2.png
    • Agregue cualquier Environment Variable requerida.
  5. Deploy.

Puedes interactuar con mi resultado final aquí . No prometo mantenerlo disponible para siempre, ya que puedo usar este VPS para otros proyectos que puedan necesitar la totalidad del poder computacional.

Uso de recursos del VPS

Esta captura de pantalla captura el VPS ejecutándose inactivo y muestra varias métricas de recursos.

stats.png

Recordemos que este VPS está ejecutando:

Descripción general del sistema

Actividad de contenedores y procesos

Alertas críticas

El sistema ha registrado alertas de alto uso de CPU en el pasado debido a java, python3 y dockerd. Esto ocurrió durante la implementación de los servicios de backend.

Una conclusión sentimental para el blog de VPS

Esta se ha convertido en mi serie de blog favorita de todas las que he escrito.

Quiero tomarme un momento para reflexionar sobre lo lejos que hemos llegado juntos. Cuando preguntamos por primera vez: “¿Qué es un VPS?”

Esta serie trata sobre el placer de crear un espacio que es completamente tuyo, libre de los caprichos de los precios opacos de la nube y soluciones mágicas. Se trata de la confianza silenciosa: saber que, incluso si tu aplicación sigue siendo pequeña, se ejecutará sin problemas, de forma segura y en tus términos.

A medida que avanza, recuerde que todo experto fue alguna vez un principiante que utilizó SSH por primera vez. El servidor es un compañero, no un crítico. Experimenta, rompe cosas (¡y luego arréglelas!) y celebra los logros, ya sea que se trate de aplicar una regla de firewall o implementar esa primera aplicación.

Si has seguido este tutorial, ahora no solo tienes un VPS, sino también el conocimiento para adaptarlo a lo que tus proyectos requieran. Sigue experimentando, aprendiendo y, lo más importante, sigue creando cosas que te importen.

tequierobro.jpg

¡Te deseo un feliz hosting! ~Pollito <🐤/>

Hey, check me out!

You can find me here