En esta guía, vamos a seguir los pasos para desplegar una aplicación y una base de datos de ejemplo. Puedes utilizar la aplicación de ejemplo que aparece a continuación para probarla, pero no la utilices para ningún uso en producción. El propósito de la aplicación es probar el despliegue de Kinsta.

¿Prefieres ver la versión en vídeo?

Ejemplo de Aplicación

Hemos creado una pequeña aplicación para registrar el tiempo y mostrar los resultados en una página sencilla. Puedes encontrar la aplicación en GitHub.

Fork de la Aplicación de Ejemplo

Primero, visita la aplicación weatherlogger-js en GitHub y lee el archivo Léame incluido para conocer la aplicación. Una vez que te hayas familiarizado con ella, haz clic en el botón Fork de la parte superior derecha para bifurcarla a tu propia cuenta de GitHub.

Crea un fork de weatherlogger-js en GitHub.
Crea un fork de weatherlogger-js en GitHub.

Crea una Clave API

La aplicación requiere una clave API de OpenWeather. Una vez que te registres, puedes iniciar sesión y crear una clave API de forma gratuita que te permita realizar 1.000 llamadas de API diarias. Recomendamos hacer este paso primero, ya que la clave API tarda entre 10 y 20 minutos en activarse, tiempo que podemos dedicar a configurar nuestra aplicación.

Procesos

Al desplegar la aplicación en Kinsta, necesitamos ejecutar dos procesos:

  • Un servidor web donde podemos ver nuestros datos meteorológicos. Se puede iniciar con el comando npm start.
  • Un cronjob que recoja los datos meteorológicos cada pocos minutos. Se puede iniciar con el comando npm run weatherLogger

Empecemos a preparar las cosas para ejecutar esos procesos.

Desplegar una Base de Datos

En MyKinsta, asegúrate de que estás en la página de Aplicaciones, haz clic en Añadir servicio y selecciona Base de datos en el menú desplegable. Utilizamos los siguientes valores en el formulario para crear nuestra base de datos de ejemplo:

  • Nombre de la base de datos: weatherloggerdb
  • Nombre de la pantalla: Base de Datos del Registrador Meteorológico
  • Tipo de base de datos: MySQL
  • Versión: 8.0
  • Dejamos el nombre de usuario y la contraseña de la base de datos sin tocar
  • Ubicación del centro de datos: us-east4-a
  • Tamaño de la base de datos: 2 núcleos de CPU – 512 MB de RAM (Mini)

Haz clic en el botón Crear base de datos, y ya debería estar todo listo.

Creando una nueva base de datos para nuestra aplicación de ejemplo.
Creando una nueva base de datos para nuestra aplicación de ejemplo.

Desplegar una Aplicación

Asegúrate de que estás en la página de Aplicaciones, haz clic en Añadir servicio y selecciona Aplicación en el menú desplegable. Cuando hagas clic en el campo del repositorio de GitHub, tendrás que permitir que Kinsta interactúe con tu repositorio.

Para obtener una guía en vídeo, echa un vistazo a nuestros Videotutoriales. Para obtener más documentación paso a paso, consulta Añadir una Aplicación.

Hemos utilizado los siguientes valores en el formulario para crear nuestra aplicación de ejemplo:

  • Repositorio de GitHub: danielpataki/weatherlogger-js (en tu caso, será algo así como your-organization/weatherlogger-js)
  • Rama por defecto: main
  • Despliegue automático al confirmar: sin marcar
  • Entorno de ejecución: Deja que Kinsta establezca el entorno de ejecución
  • Nombre de la aplicación: Registrador meteorológico
  • Ubicación del centro de datos: us-east4-a

Haz clic en Añadir aplicación y se iniciará el proceso de despliegue.

Creando una nueva aplicación para nuestro ejemplo.
Creando una nueva aplicación para nuestro ejemplo.

Conectar la Aplicación y la Base de Datos

Una vez que la base de datos está preparada para las conexiones (se muestra una marca de verificación verde junto a ella), podemos conectarla a nuestra aplicación, aunque ésta aún se esté desplegando. Haz clic en la aplicación Registrador Meteorológico, luego en Configuración en la barra lateral y desplázate hacia abajo para encontrar la sección Conexiones internas.

Conexiones internas en nuestra aplicación de ejemplo.
Conexiones internas en nuestra aplicación de ejemplo.

Haz clic en Añadir conexión, y en la ventana modal/pop-up que aparece, selecciona la Base de Datos del Registrador Meteorológico. Selecciona la casilla Añadir variables de entorno para acceder a la base de datos, desplázate hasta la parte inferior de la ventana y haz clic en Añadir conexión.

Añade una conexión interna para nuestra aplicación de ejemplo.
Añade una conexión interna para nuestra aplicación de ejemplo.

Configuración de la Aplicación

Lo siguiente en nuestra lista es añadir toda la información que necesita nuestra aplicación en forma de variables de entorno. La mayor parte de la información se añadió automáticamente en el paso anterior al rellenar las variables de conexión a la base de datos.

La única informació que falta y que es necesaria para la aplicación es la clave de la API de OpenWeatherMap. En la Configuración, justo debajo de la sección Conexiones internas, verás la sección Variables de entorno. Haz clic en Añadir variable de entorno y utiliza OPENWEATHER_KEY como clave y tu clave de API como valor.

Añade tu clave de la API de OpenWeather a las variables de entorno.
Añade tu clave de la API de OpenWeather a las variables de entorno.

La aplicación admite algunas variables más para controlar la frecuencia de actualización, las unidades utilizadas, etc. Echa un vistazo a la documentación de la aplicación para obtener más información.

Configurar los Procesos

Hemos mencionado al principio que necesitaremos un servidor web y un cronjob. Dirígete a la sección Procesos de la aplicación, y verás que se crea automáticamente un proceso web que se ejecuta por defecto en npm start, que es exactamente lo que necesitamos.

Para configurar el cronjob, haz clic en el botón Crear proceso y rellena el formulario en el modal/pop-up que aparece. Hemos utilizado los siguientes valores para nuestro ejemplo:

Nombre: Worker
Tipo: Background job
Comando de inicio npm run weatherLogger
Tamaño del pod: nano
Instancias: 1

A continuación, haz clic en el botón Crear proceso.

Crea el proceso en segundo plano para nuestra aplicación de ejemplo.
Crea el proceso en segundo plano para nuestra aplicación de ejemplo.

Despliega la Aplicación

Por último, vuelve a la sección de Despliegue y haz clic en el botón Desplegar ahora. El despliegue suele tardar unos 90 segundos, pero es posible que tengas que esperar un poco más para que todos los procesos se pongan en marcha correctamente. Tu primera medición meteorológica debería registrarse unos minutos después. Para comprobar que todo funciona, echa un vistazo a la sección Registros.

Registros de ejecución de la aplicación de ejemplo.
Registros de ejecución de la aplicación de ejemplo.

Después de un par de minutos, deberías ver procesos exitosos en los registros de tiempo de ejecución. En el ejemplo de la imagen anterior, la línea 243 muestra que el registrador ha empezado a funcionar (Starting weather logging), y la línea 244 muestra que el servidor web está en funcionamiento (Weather server is up and running). La línea 245 en adelante muestra dos eventos de registro (Weather data retrieved).

Si vuelves a la sección de Despliegues, deberías ver la URL del último despliegue. Haz clic en esta URL para que te lleve a la página que está sirviendo el servicio web:

Página del registrador meteorológico que muestra las entradas meteorológicas.
Página del registrador meteorológico que muestra las entradas meteorológicas.