Node Para Principiantes - Subiendo nuestra app en Node.JS a Heroku

Este artículo contiene comandos de git y de Heroku Toolbelt que se supone que sabes, de lo contrario pregunta cualquier duda o revisa la documentación de ambos.

Para finalizar con la serie de Node Para Principiantes subiremos nuestra pequeña app a un servidor de producción.

Como recordarán, en el post anterior, del cual usaremos los archivos habíamos creado un servidor web en Express que al pedir la ruta / nos devolvía el contenido de un index.html. Usaremos estos archivos para no perdernos aunque a la carpeta donde los tengan le deben de añadir unos archivos para que todo este correcto que veremos en el Paso 1.

Como servidor de producción para nuestra app en Node elegí Heroku ya que es muy fácil para empezar, tiene integración con Git y GitHub y podemos publicar nuestras pequeñas apps en un 'dyno' que es como denominan a una instancia(una app puede tener varios dynos tanto vertical como horizontalmente) de manera totalmente gratuita, aunque con sus limitaciones.

Sin más vamos a subir nuestra aplicación a un repositorio de GitHub, crearemos la app de Heroku y le haremos algunos cambios mínimos para asegurarnos que funciona correctamente.

Paso 1: Creando el repositorio de Git y GitHub

Desde la consola, posicionados en la carpeta donde tenemos index.js e index.html respectivamente creamos el repositorio de Git

// Iniciamos el repositorio
$ git init

// Añadimos los archivos actuales
$ git add -A

// Trackeamos los cambios
$ git commit -m "Initial Commit"

Tras esto, iremos a GitHub y con nuestra sesión iniciada crearemos un repositorio para tener una copia de el que acabamos de crear localmente en sus servidores y centralizar el código allí.

Tras esto nos saldrá pasos para configurar nuestro repositorio de GitHub con Git, yo haré el método para cuando ya tenemos creado el de Git y lo conectaré al otro mediante SSH(ssh rocks :D):

// Añadimos un enlace remoto llamado 'origin' que es nuestro repositorio de GitHub mediante SSH

$ git remote add origin [email protected]:superuser/repo.git

Finalmente subiremos lo que tenemos actualmente en la carpeta a GitHub antes de modificar nada:

git push origin master  

Paso 2: Adaptando nuestra aplicación para producción

Quiero advertir que la creación de un package.json que veremos en este paso no es algo para producción debe crearse siempre y no lo hicimos antes porque no estábamos creando una aplicación, solo archivos sueltos C:

Para crear el package.json en la consola escribimos:

$ npm init

Y seguimos todo lo que nos pregunte.

Tras eso, abrimos el package.json y añadiremos la parte de dependencies entre "{}" escribiremos lo siguiente:

"dependencies": {
    "express": "4.13.4"
},

Y añadimos el cambio al repo de Git, y sincronizamos con GitHub:

$ git add -A

$ git commit -m "Updated package.json. Added Express"

$ git push origin master

Paso 3: Creando nuestra aplicación desde el dashboard de Heroku

Desde aquí podremos crear una nueva app en nuestra cuenta de Heroku. Como yo vivo en España la crearé en la región "Europe".

Tras eso, en el panel de la app eligiremos Github como "Deployment Method" e incluso si quieren pueden decirle que haga un deploy automático cada vez que hagamos commit yo no lo haré así esta vez.

Tras esto tenemos la app lista aunque si vamos a verla les saldrá "Aplication Error" esto es debido a una adaptación que tenemos que hacer en nuestro index.js y un archivo que tenemos que crear.

Paso 4: Actualizando el puerto en index.js y creando un Procfile*

Debemos modificar nuestro index.js de manera que en la línea 8 la variable port quedaría definida de esta manera:

const port = process.env.PORT || 3000  

Lo que acabamos de hacer es que si antes de establecer el puerto 3000 como donde debe funcionar la aplicación si mediante consola o una varible de entorno se le asigna algo a PORT= esto lo tomará como el puerto de la aplicación.

Ahora, para trabajar con Heroku necesitamos un archivo que haga funcionar nuestra aplicación con Node llamado Procfile, lo creamos y le añadimos el siguiente contenido:

web: node index.js  

Recuerda añadir esto a los repositorios de Git y GitHub respectivamente con los comandos que vimos al final del paso 2 :)

Como tenemos habilitado el deployment manual en Heroku hacemos click en "Deploy Branch" y nos traemos los cambios.

Paso 5: Habilitando los dynos en Heroku

Si volvemos a ver la aplicación, aunque ya esta todo listo para funcionar la URL nos seguirá devolviendo un "Aplication Error", esta vez es porque no tenemos ningún dyno despierto de manera de que cuando llega una petición no se ejecuta nada.

Para esto tenemos que tener instalado el Heroku Toolbelt y desde la consola, si ya tenemos estas herramientas configuradas ejecutamos:

heroku ps:scale web=1 --app nombredelaapp  

Tras esto si vamos a la URL, podremos ver la app funcionando perfectamente:

Recuerda que actualmente el estandar de JavaScript es ES5 y que los archivos están en ES6 así que tendrás que convertirlos manualmente o usando un compilador como babel. Ver aquí.

Enlaces Relacionados

A Beginner’s Git and GitHub Tutorial - Udacity Blog

Getting Started with Node.js on Heroku

Node para Principiantes - Introducción a Express

process.env - Node.JS Docs

Heroku Prices

NodeJS-HerokuPost en GitHub

Aplicacion de ejemplo en Heroku