Cómo desplegar una app MongoDB en Heroku

Crear una aplicacion MERN, en el que uses MongoDB para la bases de Datos y Apollo para GraphQL con los años se ha vuelto mucho más fácil. Todo por la cantidad de guías, tutoriales y videos que existen en internet. Pero desplegar MongoDB en Heroku puede ser un poco complicado.

Pero algunos de dichos tutoriales que decides seguir, hoy en el 2021 a la hora de subir tu app desde local a un servidor en la nube. Se te puede convertir en todo un dolor de huevos… y es hora de aprender a vivir con la consola y StackOverFlow.

Para hoy. Tratare de explicar como hacer Deploy de una App que use MongoDB en Heroku

Vamos a empezar por partes, desde crear una base de datos en MongoDB en la nube, hasta subir tu app a heroku desde consola.

Desplegar app MongoDB en Heroku

Donde subir una base de datos de MongoDB gratis?

Aqui es donde comienza lo «complicado» aunque después se hace mucho más fácil de lo que parece.

Muchos de los tutoriales usaban mLab para conectar MongoDB con Heroku y este último usaba tambien sus add-ons para conectarse a dicha plataforma, pero en años posteriores, esta empresa fue adquirida por mongo y dejo de funcionar dejándonos solo (por ahora) MongoDB Atlas para subir nuestra base de datos.

Creo que esta demás explicar como crear un cuenta y cómo crear nuestra base de datos en MongoDB (para eso la documentación, y el enlace para crearse una cuenta), pero voy a explicar algo.

Configurar IP para usar MongoDB en Heroku

Después de haber configurado y creado tu primera base de datos, debemos escoger que direcciones IP puedan acceder a ella. O para hacerlo más fácil, que cualquiera pueda acceder desde cualquier usarla.

Bueno, hasta aqui, lo menos complicado. Crear la base de datos.

Deploy en Heroku

De aquí en adelante voy a suponer que ya tienes tu app desarrollada y es una hermosura en local. Pero de aqui en adelante, es posible que todo falle. Si, todo!

Comenzamos instalando Heroku de manera global en nuestra computadora.

npm install -g heroku

En la raíz de la carpeta de tu proyecto. En la consola nos logueamos directamente a heroku con este comando

heroku login

Le pasamos nuestras credenciales y listo. (obviamente, debemos estar registrados antes) Nuestro siguiente paso es crear una en Heroku.

heroku create <tuApp>

Esto lo que hara es crear un repositorio en que podemos usar Git para subir nuestra app a traves del mismo. Sin necesidad de sincronizar Github con Heroku.

Conectando MongoDB Atlas con Heroku

Volvemos por un instante a MongoDB Atlas y hacemos click en el botón «Conect» y hacemos click en «Connect your application» y copiamos algo similar a esto.

"mongodb+srv://yourUsername:yourPassword@yourClusterName.n9z04.mongodb.net/sample_mflix?retryWrites=true&w=majority"

Configuramos MONGODB_URI

Es hora de configurar y guardar nuestro enlace de como una variable en Heroku, a la que llamaremos MONGODB_URI

heroku config:set MONGODB_URI="mongodb+srv://yourUsername:yourPassword@yourClusterName.n9z04.mongodb.net/sample_mflix?retryWrites=true&w=majority"

Todo es una sola línea. Pero aquí también debemos asegurarnos que Express este escuchando correctamente. O bien el puerto en el local o el que nos brinde heroku

const port = process.env.PORT || 4000;
app.listen(port);

Acceder a los valores de configuración de Heroku desde tu aplicación

En nuestra aplicación de nuestro localhost, normalmente tenemos «hardcodeado» nuestra conexión a Atlas. Debemos refactorizar nuestro código para usar la variable que acabamos de configurar en el paso anterior.

Como nuestra App esta creada en Node, podemos acceder a nuestro clúster de Mongo Atlas a través de la propiedad process.env, disponible para nosotros en Node.js. En el archivo server.js, cambie la constante uri a esto:

const uri = process.env.MONGODB_URI;

Como ya hemos agregado la conexión a Heroku, con esto ya debería conectar nuestra app al cluster de la base de datos. Guardamos y hacemos un commit y push a heroku.

git commit -am "fix: connection string to Heroku config var"
git push heroku master

Esperamos unos segundo y nuestra app ya esta desplegada en Heroku. Verificamos que todo este bien este codigo.

heroku ps:scale web=1

Si ves este mensaje «Scaling dynos… done, now running web at 1:Free» sabremos que esta funcionando.

heroku open

Para ver nuestra app.. desplegada, pero es posible que falle algo.

Posible error visualizando datos y Playground de GraphQL

Algo que me paso, es que mi App estaba bien configurada, pero no podía acceder desde el navegador y la consola no me mostraba ningún error. Solo en el navegador mostraba el siguiente mensaje: GET query missing:

Esto sucede que Playground en produccion esta deshabilitado. Pero podriamos conectar a nuestra app sin problemas. Pero si queremos acceder a Playground necesitamos agregar estos cambios a nuestra configuración de Apollo Server.

const server = new ApolloServer({ 
typeDefs, 
resolvers, 
introspection: true, 
playground: true,});

Conclusión

Uy! espero que haya sido claro y de ayuda. La verdad que me costo mucho desplegar mi servidor de Node y MongoDB en Heroku. Todo por los diferentes cambios que hubieron es los últimos años y que no hay mucho material en español.

Imagen por defecto
Appatico
Artículos: 17

2 comentarios

  1. […] cuenta el lado del backend. Ya la anterior semana publique como desplegar un servidor que usa MongoDB en heroku. Ahora toca conectar MySQL con Node js para crear nuestra propia […]

  2. […] verdad que a veces se me hace difícil llevarle el ritmo a algunas tecnologías. Peleé mucho con desplegar MongoDB en Heroku, pero me costó un poco más el tema de autenticación con GraphQL y […]

Deja un comentario