Desplegando a heroku

Objetivo

Tomar nuestra aplicación construida hasta el momento y llevarla a producción usando la plataforma Heroku

Abriendo nuestra cuenta

Debes dirigirte a la página de Heroku y abrir una cuenta, en este caso la URL para registro es https://signup.heroku.com/ allí necesitaras colocar un correo y un par de datos que describan tu perfil.

Al finalizar el registro recibirás un correo de confirmación, y al acceder al enlace de confirmación deberás crear una nueva contraseña, ten en cuenta seguir las recomendaciones que Heroku hace respecto de los caracteres que debe tener tu contraseña.

Creando nuestra aplicación en Heroku

En el Dashboard de Heroku, vamos a dar click en create new app

Luego en el formulario de creación, debemos dar un nombre a nuestra aplicación, en mi caso usare organizador-platzi y seleccionaré la región de Estados Unidos

Para conectarnos con Heroku directamente desde nuestra consola debemos tener instalado la herramienta heroku-cli en nuestro sistema operativo, para hacerlo debemos ejecutar el comando de abajo en nuestra consol de comandos, podría ejecutarse en la raíz de nuestro proyecto (no es necesario, en realidad no), recuerda que estamos en Ubuntu 20.04, y estamos asumiendo que la herramienta snap está instalada. Para otros métodos de instalación o sistemas operativos debes revisar la página https://devcenter.heroku.com/articles/heroku-cli

➜ organizador ~ sudo snap install --classic heroku

Una vez la herramienta heroku-cli esté instalada y lista para usar, debemos iniciar sesión desde nuestra consola y con nuestro usuario y contraseña asignado a la cuenta de heroku, con el comando heroku login de la siguiente forma:

➜ organizador ~ heroku login

El comando te dirá que puedes oprimir cualquier tecla para activar el inicio de sesión desde un explorador web, al hacer esto tu explorador por defecto se activará y al iniciar sesión veremos la siguiente respuesta en la consola de comandos

heroku: Press any key to open up the browser to login or q to exit:

Opening browser to https://cli-auth.heroku.com/auth/cli/browser/dbaba718-ecb8-4e34-905a-611c29815a05

Logging in... done

Logged in as johan@platzi.com

Después de haber iniciado sesión, debemos hacer al menos un commit con todos los cambios de nuestra aplicación, por defecto Rails ya nos brinda un proyecto con GIT incluido, así que sólo necesitamos crear nuestro commit (al menos uno) con todos los cambios de nuestra aplicación hasta el momento, si no lo has hecho o si tu código aún tiene cambios en estado unstaged o untracked debes generar un commit con los siguientes comandos en tu consola en la raíz del proyecto

➜ organizador ~ ga . # alias del comando git add .

➜ organizador ~ gc -m ‘initial commit’ # alias del comando git commit -m ‘initial commit’

Después de garantizar que tu proyecto esté completamente actualizado en términos de control de versiones con GIT, vamos a enlazar nuestra aplicación creada previamente usando el siguiente comando

➜ organizador ~ heroku git:remote -a organizador-platzi

organizador-platzi es el nombre que le he dado a la aplicación, sin embargo tendrás que cambiar esta configuración al nombre que le hayas colocado a tu aplicación, por otro lado, con heroku-cli, incluso puedes crear una nueva aplicación desde consola usando el comando heroku create

Ahora, vamos a añadir una gema llamada rails_12factor que es necesaria para hacer el despliegue con Heroku, esta gema deberá ser añadida al grupo production dado que este es el ambiente que correremos en Heroku de nuestra aplicación, así que al final del archivo Gemfile debemos añadir las siguientes líneas

# Gemfile

group :production do

gem 'rails_12factor'

end

Posteriormente, debemos correr nuestro comando bundle install para actualizar la referencia a nuestra nueva gema.

➜ organizador ~ bi

Ahora, debemos hacer un git push heroku master al repositorio de Heroku enlazado en la creación de la aplicación con el siguiente comando (ten paciencia su ejecución es lenta)

➜ organizador ~ gp heroku master

Una vez la versión de nuestra aplicación esté en Heroku, debemos hacer la migración de nuestra base de datos en Heroku usando el siguiente comando

➜ organizador ~ heroku run rails db:migrate

Ahora debemos hacer seeding con la base de datos de producción, sin embargo, antes de hacerlo vamos a evitar que en este ambiente (en producción) se envíen correos electrónicos dado que no hemos configurado ningún servicio externo de correo electrónico en producción, por lo que sólo vamos a permitir el envío de correos en el ambiente de desarrollo, así que debajo de la línea 43 del modelo app/models/task.rb vamos a añadir la siguiente línea return unless Rails.env.development? en la que le diremos al sistema que se salga del método send_email a menos que el ambiente sea desarrollo o Development.

def send_email

return unless Rails.env.development?

(participants + [owner]).each do |user|

ParticipantMailer.with(user: user, task: self).new_task_email.deliver!

end

end

Una vez hecho este cambio, debemos hacer commit de los cambios, volveremos a hacer push al repositorio de heroku e inmediatamente después creamos nuestra informacion semilla del siguiente modo

➜ organizador ~ ga .

➜ organizador ~ gc -m ‘avoid task sending emails when production’

➜ organizador ~ gp heroku master

➜ organizador ~ heroku run rails db:seed

Una vez estos pasos estén ejecutados, ya podrás acceder desde cualquier parte del mundo a tu aplicación, en el caso de mi aplicación accederé desde la dirección http://organizador-platzi.herokuapp.com/

Pero al acceder e ingresar con los usuarios creados en la información semilla, podemos darnos cuenta que algo no va bien

Hay algo que en las hojas de estilo no está bien, especialmente en las asociadas a los estilos de bootstrap, esto es porque hace falta incluir a la consolidación de los assets en los layouts definidos en el proyecto el pack helper desde el webpacker, es decir, debemos añadir la línea stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' a nuestros Layouts

Así que tus archivos de Layouts deberán verse de la siguiente forma

Archivo app/views/layouts/application.html.haml

-# frozen_string_literal: true

-# app/views/layouts/application.html.haml

!!!

%html

%head

%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/

%title Organizador

= csrf_meta_tags

= csp_meta_tag

= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

%body

= render 'layouts/navbar'

.container.mt-4.pb-4

.main-flash-messages

= render 'layouts/messages'

= yield

Archivo app/views/layouts/devise.html.haml

-# frozen_string_literal: true

!!!

%html

%head

%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/

%title Tasker

= csrf_meta_tags

= csp_meta_tag

= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

%body

.container

.main-flash-messages

= render 'layouts/messages'

.fullscreen

.container

= yield

Una vez hecho este cambio, debemos hacer commit de los mismos, volveremos a hacer push al repositorio de heroku.

➜ organizador ~ ga .

➜ organizador ~ gc -m ‘add stylesheets pack helper to layouts’

➜ organizador ~ gp heroku master

Al terminar el despliegue en Heroku y entrar a la página de la aplicación deberás ver la siguiente página

¡Felicidades! Has desplegado la aplicación en producción y has terminado con toda la implementación de la aplicación Organizador de Platzi.