Heroku con Haikus

Heroku a cloud platform,
upload your project no regrets
make it live on net.

Some rocks doing awesome balance

Heroku, viene de dos palabras (Hero + Haiku), es un servicio de cloud platform que permite que subas tus proyectos en unos dynos de sus plataformas.

Dyno

Un dyno para Heroku, son pequeños y poco pesados containers linux. Los permisos y capacidades de cada dyno están dados por las variables que tenga configuradas y por el pricing que hayas pagado a Heroku por sus servicios. Para nuestro caso vamos a usar un dyno gratuito.

Puedes ver el cuadro de precios y capacidades en este link

Por el momento, no te preocupes, usaremos el gratuito.

Al contrario de otro servicio que conoces: Github, donde has publicados archivos estáticos que se interpretan en navegador (HTML, CSS, JavaScript, Markdown), lo dynos son pequeños servidores linux que Heroku enciende y apaga a voluntad. Para ello usa una tecnología llamada containerización.

Container

Containerización es una tecnología de virtualización que permite aislar múltiples contenedores de sistemas operativos que corren compartiendo recursos. En el proceso, un contenedor no puede.

¿Qué es la virtualización?

La virtualización es el proceso de crear una representación basada en software (o virtual), en lugar de una física. La virtualización se puede aplicar a servidores, aplicaciones, almacenamiento y redes, y es la manera más eficaz de reducir los costos de TI y aumentar la eficiencia y la agilidad de los negocios de cualquier tamaño. VMWare.

En nuestro caso, todos estos conceptos, nos ayudan a entender un poco de lo que hace Heroku para nuestros proyectos. Puedes desplegar tu proyecto directamente (usando 1 dyno). Puedes usar también Heroku para apoyar tu flujo de review y pruebas de cambios a través del uso de Pipelines.


Manos a la obra

Por ahora vamos a hacer una cosa a la vez, primero voy a subir un proyecto directamente. Para ello, voy a usar un proyecto que ya existe en mi repositorio de Github y del que tengo un clon en mi computador.

Crea una cuenta en https://www.heroku.com. Dale click a Sign Up, llena los datos y sigue los pasos.

Un vez que tengas tu cuenta y hayas ingresado con ella a la plataforma, podrás crear un nuevo proyecto:

Pantalla donde seleccionas que vas a crear una nueva aplicación

Luego de eso indicas el nombre de tu app y desde donde quieres correrla. En realidad, para nuestro caso (Sudamerica) lo más cercano es Estados Unidos.

Pantalla donde pones el nombre de tu app y el Runtime

Una vez hecho esto, te enviara al app virtual creada, a la zona de Deploy. Va a indicarte que puedes crear un pipeline, por el momento no lo vamos a hacer. Vamos a Desplegar el App usando el Heroku CLI.

Para ello, descarga e instala en Heroku CLI. Si tienes Windows, o Linux o si prefieres usar un instalador en MAC puedes seguir este link para descargar e instalarlo en tu computador. En mi caso, tengo una Macbook, así con brew, por lo que sólo hacer:

brew install heroku

Luego de instalar, debemos loguearnos para poder conectarnos a los servicios de Heroku. Para ello ejecutamos:

heroku login

En mi caso, como mi repositorio ya existe, lo que voy a hacer es agregar Heroku a mis remotos, para eso escribo en el terminal :

heroku git:remote -a test-app-laboratoria

Debemos hacer un paso más, que es agregar el tipo de build que tendrá que hacer Heroku, lo que llaman buildpacks. Para nuestro caso será :

heroku buildpacks:set heroku/nodejs

Deben tener en cuenta que por defecto va a tratar de ejecutar el comando npm start. Por ello en tu package.json debes configurar que tareas correrá dicho script.

Voy a subir un proyecto de ejemplo. Este proyecto tiene archivos estáticos (HTML, CSS y JavaScript) de frontend, no tiene ningún backend relacionado. Puedes en lizzie136/flashbitacora.

Cuando quiero desplegar los cambios que hice, para que se puedan ver en heroku, debo ejecutar el siguiente comando:

git push heroku master

Te mostrará las partes del proceso que sigue, que incluye recrear el ambiente, instalar los binarios que necesita, restaurar cache, construir las dependecias y hacer un cache, una vez culminado, se comprime y despliega en una dirección. Para mi caso, muestra lo siguiente :

remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=true
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 6.10.2
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Downloading and installing node 6.10.2...
remote: Detected package-lock.json: defaulting npm to version 5.x.x
remote: Resolving npm version 5.x.x via semver.io...
remote: Downloading and installing npm 5.0.3 (replacing version 3.10.10)...
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote: up to date in 0.429s
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
remote:
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote: Done: 16.5M
remote: -----> Launching...
remote: Released v17
remote: https://test-app-laboratoria.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/test-app-laboratoria.git

Entonces, si entras a esta dirección verás el app en live https://test-app-laboratoria.herokuapp.com/

Un tema importante que tuve que hacer para que se vea en Heroku, fue que tuve que inicializar un server con Express. Por ello, encontrarás entre mis archivos un index.js que es el que corre la tarea npm start. En mi caso index.js tiene el siguiente código:

var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/'));
app.set('', __dirname + '/');
app.set('view engine', 'ejs');
app.get('/', function(request, response) {
response.render('index');
});
app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
});

Para correrlo en mi local, sería:

npm install
npm start

Supongamos que hice algunas modificaciones y quiero actualizar en Heroku para que se puedan ver los cambios:

Para ello, luego de subir a nuestro Github los cambios que completan el feature y luego de los respectivos commit y/o merge, hacemos:

git push origin master

Actualizaremos en Heroku con :

git push heroku master

Si hacemos un poco de memoria, líneas más arriba agregamos Heroku a nuestros repositorios remotos, por lo que podemos correr ese comando y con ello verás, si todo sale bien, nuevamente los detalles del proceso y un build success que te dirá que puedes intentar probar tu link.

Si por A o B, tu link aún no te muestra data, puedes ir a tu Dashboard en Heroku y en el botón de la derecha que dice More Options o Más Opciones, seleccionar View logs o Ver Logs. También se puede ver en línea de comandos en tu terminal los últimos logs de tu dyno de Heroku:

heroku logs

Con ello podrás ver si se ha levantado algún error o algo.

En tu dashboard de Heroku también puedes ver si se pudo hacer el build de proyecto o el log de errores. Por ejemplo en mi cuenta se ve algo así:

Para verlo los logs en Heroku, en tu dashboard, arriba a la derecha, selecciona el botón More, y selecciona View Logs: