Desplegando a Heroku

35/36

Lectura

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 鈥榠nitial 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 鈥榓void 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.

Aportes 4

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Todo ok鈥 mi app esta sirviendo en https://activities-platzi.herokuapp.com/activities

Dejo el link de mi despliegue en Heroku:
https://organizador-platzi-rails.herokuapp.com/

Arreglar que las imagenes no se ven en las clases de lectura, en pasadas tambien se pierde identacion asi que si fuera posible hacer link o referencia a un codigo pegado en un archivo externo o img externa, ejm github