Desplegar Platzi Video en Heroku

22/23

Lectura

Unas de las fases importantes dentro de la construcci贸n de tus aplicaciones es desplegarlas a producci贸n, en este recurso aprender谩s a desplegar tu aplicaci贸n en Heroku una plataforma como servicio (PaaS) que soporta una gran cantidad de lenguajes de programaci贸n.

01-heroku.png

Crear una cuenta en Heroku.
Para crear una cuenta en Heroku es muy f谩cil, solo debes de ingresar al sitio https://heroku.com y en la esquina superior izquierda crear una cuenta. (Para desbloquear todas las caracter铆sticas que implementa Heroku es necesario ingresar una cuenta bancaria).

Una vez creada la cuenta vamos a crear un proyecto donde vivir谩 tu aplicaci贸n de Platzi Video.

En el dashboard eliges la opci贸n de 鈥New鈥 asignas un nombre a tu aplicaci贸n, en mi caso utilizare 鈥platzivideo-app鈥.

02-new-app.png

Elegir la regi贸n es donde se encuentra f铆sicamente el servidor, te recomiendo dejar la opci贸n por defecto que es 鈥United States鈥.

Y por 煤ltimo le damos en 鈥Create App鈥.

Conectar proyecto
Ahora ha llegado el momento de conectar nuestra aplicaci贸n con Heroku, tienes dos opciones, conectar con el servicio de git privado que te ofrece Heroku o conectar tu repositorio con GitHub.

La opci贸n que voy a elegir es 鈥淗eroku Git鈥 para poder controlar mucho mejor el flujo de la aplicaci贸n (al elegir esta opci贸n es necesario instalar 鈥Heroku CLI鈥 para poder trabajar mucho mejor desde la terminal.

Una vez que has instalado 鈥淗eroku CLI鈥 debemos de iniciar sesi贸n y conectar nuestra aplicaci贸n con el repositorio privado que nos ofrece Heroku.

Iniciar sesi贸n:

heroku login

Este comando abre una nueva ventana de tu navegador donde te permite iniciar sesi贸n.

03-heroku-login.png

Ahora que estamos autenticados desde la terminal con Heroku, procedemos a conectar tu proyecto con el repositorio remoto.

Si no has inicializado el proyecto es buen momento.
git init

Conectar remotamente
heroku git:remote -a NOMBRE-PROYECTO

Agregar todos los cambios
git add .

Creamos un commit
git commit -m "Deploy Platzi Video"

Enviamos los cambios al proyecto en Heroku

git push heroku master

Este comando desencadena el primer despliegue de tu aplicaci贸n, lo m谩s probable es que falle, ya que nos hace falta configurar algunas las variables de entorno. No te preocupes e iniciemos la configuraci贸n necesaria.

Preparar proyecto

Especificar versi贸n de Node, para esto vamos a editar nuestro archivo 鈥減ackage.json鈥 y a帽adir el siguiente c贸digo:

  "engines": {
    "node": "12.16.x"
  }

Agregar las variables de entorno a Heroku.

Para agregar las variables de entorno es necesario ingresar al panel administrativo de tu proyecto y visitar la secci贸n de 鈥淪ettings鈥, donde encontrar谩s la informaci贸n de tu aplicaci贸n y luego la secci贸n de 鈥淐onfig Vars鈥.

Deber谩s a帽adir cada una de las variables de entorno a la configuraci贸n de Heroku, quedando de la siguiente forma:

04-cofig-vars.png

Ahora tienes todos los elementos listos debes de enviar el cambio del engine de node para que se compile tu proyecto, guarda cambios y s煤belos a heroku.

Espera por el despliegue autom谩tico.

05-deploy.png

Desplegar proyecto

06-deploy-finish.png

Cada que necesites desplegar tus proyectos, debes de trabajar con el flujo de git, guardando cambios y enviando a la rama principal, esto desencadena un despliegue.

Si quieres ver el output del despliegue puedes ejecutar el siguiente comando

heroku logs --tail --app NOMBRE-APP

En Producci贸n

07-production.png

Como puedes comprobar, ahora tienes tu proyecto listo para vivir en internet, desplegado por medio de Heroku.

Conclusi贸n
Antes de terminar me gustar铆a enumerar las principales ventajas de utilizar Heroku como la plataforma para desplegar tu aplicaci贸n a producci贸n.:

  1. Opci贸n gratuita
  2. Seguridad
  3. Estable
  4. Escalable
  5. Orientado a desarrolladores
  6. Despliegues 谩giles
  7. Repositorio Git privado

Ahora que has desplegado tu proyecto de Platzi Video, comp谩rtelo con todos en la secci贸n de comentarios.

Aportes 23

Preguntas 1

Ordenar por:

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

Me pasaron varias cosas:

Uno el main del package.json debe estar apuntando a src/server/index.js.

Dos tenia @babel/core, @babel/polyfill, @babel/preset-env como dependencias de desarrollo y las necesitaba para prod el comando heroku logs --tail me ayudo con esto ultimo.

y listo platziVideo en heroku.

PlatziVideo

https://platzivideo-criniguez.herokuapp.com/
Si tienen algunos problemas de que no se pueden encontrar ciertos m贸dulos recuerden que Heroku instala todas las dependencias, ejecuta npm run build, y luego elimina las dependencias de desarrollo, y luego ejecuta npm start (o creo que es asi por lo que investigue). Solamente tiene que mover las dependencias que el servidor usa de devDependencies a dependencies en el package.json, como @babel/core, @babel/preset-env, @babel/preset-react.

En mi caso no se est谩n cargando los assets, me sale el siguiente error: Refused to apply style from 鈥https://platzi-video-app-1234.herokuapp.com/assets/app.css鈥 because its MIME type (鈥榯ext/html鈥) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Creo haberlo intentado todo, por favor si alguien me puede ayudar

Bueno el despliegue aunque en proceso es sencillo me result贸 un poco tricky en el sentido de que al generar el proceso actualiza dependencias me rompi贸 algunas cosas, en todo caso supongo es lo normal al manejar esto.
.
Pero hay un detalle precisamente con dependencias que se pas贸 por alto. Y esto es que el proceso de despliegue en Heroku obvia las de desarrollo.
.
Leyendo los comentarios y haciendo pruebas existe esa soluci贸n de cambiar las dependencias de desarrollo a producci贸n. Pero esto no me pareci贸 lo mejor ya que por algo utilizamos esta divisi贸n. Por ello decid铆 investigar el porque pasa esto; y ca铆 en Stackoverflow y luego en la documentaci贸n de Heroku.
.
Les dejo el post y la p谩gina de la documentaci贸n en donde resuelve esto. Digo igual supongo que debe haber otra manera de hacer el despliegue porque por algo no cuenta de inicio a las devDependencies, pero por lo pronto hizo el truco para que funcionara.
.
Install devDependencies on Heroku
Heroku docs

Si tienen un problema con el despliegue, quiz谩 sea porque falta el script de start.

"start": "node src/server/index.js"

Puede alguien ayudarme con el package.json, no he podido desplegar debido a un error en el build.

Alguien tendra algun ejemplo en como podr铆a contenerlo en un docker

Primero hagan un build local y verifiquen que funciona bien

npm run build

tambi茅n pueden actualizar las dependencias.

estoy con el error de assets alguien que me pueda dar una mano

Si tienen algunos problemas de que no se pueden ejecutar su app en Heroku realiza los siguientes pasos

Crea nuevamente el proyecto en Heroku

Conectar remotamente

heroku git:remote -a NOMBRE-PROYECTO

En el archivo local .env cambia a
ENV=production

En el archivo local package.json agrega

"start": "node src/server/index",

Agregar todos los cambios

git add .

Creamos un commit

git commit -m "Deploy Platzi Video"

Enviamos los cambios al proyecto en Heroku

git push heroku master

Por ultimo Deber谩s a帽adir cada una de las variables de entorno a la configuraci贸n de Heroku,

Yeiih!! C:
https://video-nona.herokuapp.com/

Me sirvi贸 un mont贸n el aporte de varios compa帽eros, yo tambi茅n tuve problemas con 鈥Refused to apply style from鈥 because its MIME type (鈥榯ext/html鈥) is not a supported stylesheet MIME type, and strict MIME checking is enabled鈥 en mi caso era una mala configuraci贸n en el webpack que lo resolv铆 regresando a este video:

configurando webpack para producci贸n

Revis茅 varias veces:

npm i --save asset-require-hook
npm i compression-webpack-plugin --save-dev
npm i webpack-manifest-plugin
npm i -D clean-webpack-plugin

Les comparte mi repo por si les sirve:

https://github.com/Nonita16/SSR

bueno intentare hasta que lo pueda hacer gracias por la info igual lei varios comentarios espero no tener errores.

Muy buena lectura, paso a paso, gracias!!

Al realizar el despliegue a Heroku, en Pc me funciona perfecto pero al probarlo en mobile IOS(Safari) o Android No me funciona el Login, que puedo hacer en este caso? Que podria estar fallando?

Cree una app utilizando Material UI como base del proyecto. fue mi primera vez utilizando Heroku al comienzo fue un poco confuso el manejo de algunas cosas, pero despu茅s de un rato comprend铆 como funcionaba, lamentablemente los 鈥淒ynos鈥 ofrecidos por Heroku en su pack free quedan cortos para una aplicaci贸n mas robusta, pero para deploys peque帽os esta de 10.

En el package.json solo se coloca el engine?
Y la version de node es con la que yo estoy trabajando, imagino.

鈥渆ngine鈥: {
鈥渘ode鈥: 鈥渪.x.x鈥
}

En el siguiente video se explica de forma sencilla como hacer deploy en Heroku. Aunque utiliza php quizas puede ser de ayuda. https://youtu.be/2qkdAt9PuqQ

Como podemos desplegar nuestro proyecto en Cpanel, alguien me puede ayudar

Deployado jaja 馃槃
https://pv-hhsm.herokuapp.com/

Aqu铆 el enlace a mi proyecto 馃槃
https://app-platzi-video.herokuapp.com/login

yo tenia el siguiente error

 TypeError: Cannot read property 'tapPromise' of undefined
remote:     at /tmp/build_b18d0228/node_modules/compression-webpack-plugin/dist/index.js:283:39

se debia a que la version de 鈥渃ompression-webpack-plugin鈥 en package.json que tenia era la 7.x.x, la cambie a 鈥渃ompression-webpack-plugin鈥: 鈥淾3.1.0鈥, y ya me funcion贸.

remote:  !     git push heroku <branchname>:main
remote:  !
remote:  ! This article goes into details on the behavior:
remote:  !   https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: !       Push rejected to platzivideo-app-bff.
remote:
To https://git.heroku.com/platzivideo-app-bff.git
 ! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/platzivideo-app-bff.git'
PS C:\Users\David\Desktop\curso-backend-for-frontend>

Tengo este problema y no se como subirlo a Heroku:c, ya hice todos los pasos y sigue haciendo lo mismo, una ayuda?

<h3>Actualizaci贸n.</h3>

Despu茅s de pelear con algunas cosillas sobre todo de Helmet con el contentSecurityPolicy por fin jal贸 mi aplicaci贸n en Heroku.
.
Nmr.Inc. Video