‫Instructor: Entonces, después de todo
‫este tiempo y todo este trabajo en la construcción de este
‫enorme proyecto completo, finalmente es el momento de
‫implementarlo realmente en un servidor web y compartirlo con el mundo.
‫Entonces, en este video,
‫aprenderá cómo implementar un proyecto en Heroku.
‫Y lo primero que debemos
‫hacer es instalar Heroku en nuestra computadora.
‫Entonces, busquemos Heroku NodeJS.
‫Y entonces, aquí, básicamente tenemos una
‫guía de introducción para NodeJS con Heroku
‫porque puede alojar todo tipo de aplicaciones
‫en Heroku como PHP o Ruby on Rails.
‫Entonces, no solo funciona para NodeJS.
‫Y veremos más de cerca a Heroku en
‫un segundo, pero por ahora, comencemos por instalar
‫este programa aquí.
‫Entonces, estoy en la parte de configuración de esta guía aquí.
‫Entonces, ahora, continúe e instale el
‫instalador para su plataforma, ya sea
‫macOS, Windows o Linux.
‫O, en este caso aquí, supongo que solo funciona para Ubuntu.
‫No, en realidad aquí dice que también
‫está disponible para otros Linux.
‫De todos modos, continúe e instale
‫la versión que necesita
‫para su computadora y luego, mientras tanto, mientras
‫se instala, continúe y cree una nueva cuenta.
‫Entonces, haga clic aquí en Registrarse
‫y luego abra su cuenta gratuita de Heroku.
‫Entonces, otra cuenta más que necesita crear.
‫Entonces, realmente hay muchas cuentas diferentes
‫que necesitas crear para completar este proyecto, pero
‫supongo que así es como funciona el desarrollo web moderno.
‫De todos modos, después de que haya
‫creado su cuenta, echemos un vistazo rápido aquí en el sitio
‫web de Heroku solo para obtener una descripción general de lo que es esta plataforma.
‫Entonces, Heroku es esta
‫plataforma que hace que sea realmente muy fácil y
‫sin complicaciones implementar sus aplicaciones web.
‫Y, nuevamente, pueden usar cualquier idioma que
‫puedas imaginar.
‫Como ves, NodeJS, Ruby on Rails,
‫este supongo que es Go, o en
‫realidad es Java, o PHP, Python, este es Go, ¿verdad?
‫Y así, todo tipo de aplicaciones realmente se ejecutan en Heroku.
‫Entonces, veamos qué dicen aquí.
‫Y esto es principalmente una charla de marketing, supongo.
‫Entonces, nada demasiado interesante aquí.
‫Pero, por supuesto, puede echar un vistazo aquí
‫a todos estos diferentes manuales.
‫Y, en realidad, es gratis comenzar con Heroku
‫en una aplicación realmente básica.
‫Pero, por supuesto, una vez que empieces a subir de
‫nivel, tendrás que empezar a pagar.
‫Pero, aquí, la versión gratuita, como
‫puede ver, viene con todas las funciones principales de la plataforma.
‫Incluso puede agregar dominios personalizados.
‫Pero, el único problema con esto
‫es que la aplicación básicamente dormirá, así que, básicamente,
‫después de 30 minutos
‫sin que nadie acceda a la aplicación.
‫Pero, de todos modos, puedes echar
‫un vistazo a todo esto por tu cuenta.
‫Entonces, volvamos ahora a nuestro proyecto aquí.
‫Y, para comenzar con el proceso de
‫implementación, comencemos iniciando sesión en Heroku en nuestra línea de comando.
‫Y eso va a funcionar debido a la instalación que
‫acabamos de hacer.
‫Muy bien, démosle más espacio aquí.
‫Limpia eso y ahora escribe heroku login.
‫Entonces, si su instalación de Heroku fue exitosa,
‫al escribir heroku login, debería ver este mensaje aquí, presione
‫cualquier tecla para abrir el navegador.
‫Entonces, simplemente presione realmente cualquier tecla, como dice, excepto
‫Q porque eso saldrá de la aplicación.
‫Y entonces, eso abrirá una ventana para que
‫pueda iniciar sesión.
‫Y, después de eso, como por arte
‫de magia, iniciará sesión en Heroku en su línea de comando.
‫Por lo tanto, probablemente debería tomar un poco
‫y, a veces, ni siquiera funciona en el primer intento.
‫Entonces, en realidad eso me pasó antes.
‫Y entonces, simplemente presione el control C.
‫Y así, en una Mac, eso es realmente el control C, no el comando C.
‫Y. Intentémoslo de nuevo.
‫Presione cualquier tecla, regrese al navegador, inicie sesión nuevamente.
‫Vuelve de nuevo, y entonces ya está.
‫Entonces, ya ve, ahora estoy conectado con mi dirección de correo electrónico.
‫Entonces, nuevamente, esta no fue la primera
‫vez que no funcionó para mí la primera vez.
‫Entonces, si eso
‫te sucedió, hazlo exactamente como lo hice yo aquí.
‫De todos modos, ahora, con esto,
‫hemos iniciado sesión en Heroku aquí en nuestra
‫consola y, por lo tanto, ahora deberíamos poder crear un nuevo proyecto.
‫Ahora, antes de hacer eso, necesitamos cambiar
‫algo en nuestro paquete NPM. json archivo.
‫Entonces, este.
‫Y eso es porque Heroku
‫realmente usa nuestro comando de inicio aquí para iniciar nuestra aplicación.
‫Ahora, en producción, no queremos usar nodemon aquí.
‫Simplemente queremos ejecutar nuestra
‫aplicación usando el comando node y no nodemon
‫porque ese es realmente solo para desarrollo.
‫Entonces, cambiemos eso y duplicaré esta línea y luego
‫llamaremos a esta dev.
‫Y luego, el de inicio solo será nodo.
‫Entonces, nuevamente, en su paquete. json, siempre debería
‫tener este script de inicio como este.
‫Entonces, el comando de nodo y luego su punto de entrada.
‫Ahora, también es importante para
‫Heroku que especifique estos motores aquí.
‫Y así, lo hicimos antes, creo,
‫porque algún paquete, o
‫en realidad porque ESLint lo requería para funcionar correctamente.
‫Pero, si no lo hubiéramos configurado
‫en ese momento, bueno, entonces realmente tendríamos que configurarlo en este punto.
‫Ahora, dado que cambiamos
‫este archivo, ahora, necesitamos confirmar estos cambios en nuestro
‫repositorio, así que agreguemos el paquete. json aquí.
‫Y luego, git commit.
‫Y luego, con un útil mensaje de confirmación.
‫Ahora, otra cosa que es realmente importante
‫cuando implementas una aplicación en Heroku es que escuchas el
‫puerto en el proceso. env. PUERTO.
‫Entonces, aquí mismo en el servidor, lo hacemos aquí.
‫Entonces, especificamos la variable del puerto como proceso. env. PUERTO.
‫Y entonces, nuevamente, en Heroku, eso es absolutamente obligatorio porque
‫de lo contrario, no funcionará en absoluto.
‫Entonces, si aquí, por ejemplo,
‫solo especificamos algún puerto aleatorio, como 3000 aquí,
‫entonces eso realmente
‫no funcionaría y eso es
‫porque detrás de escena, Heroku realmente asignará un puerto aleatorio
‫a esta variable de entorno.
‫Pero, un poco más sobre eso en
‫un segundo porque ahora, estamos
‫realmente listos para hacer la implementación real.
‫Y, para hacer eso, creamos un nuevo proyecto de Heroku en
‫nuestra carpeta de proyectos.
‫Por lo tanto, asegúrese de estar realmente en su
‫carpeta raíz y luego,
‫una vez que esté seguro de que está allí y
‫haya iniciado sesión en Heroku, lo que hicimos antes, puede escribir heroku create.
‫Y esto creará una nueva aplicación básicamente con un
‫nombre completamente aleatorio.
‫Entonces, en mi caso, son resortes radiantes y
‫luego este número, pero su
‫aplicación, por supuesto, tendrá un nombre completamente diferente.
‫Ahora, lo que
‫hizo fue crear una nueva rama remota
‫en nuestro repositorio de Git.
‫Y esta rama se llama heroku.
‫Entonces, recuerde cómo antes, en una de las conferencias anteriores,
‫agregamos una rama remota que apunta a GitHub y
‫esa rama se llamaba origen.
‫Y entonces, empujamos nuestro código a
‫esa rama remota usando git push origin master, así.
‫¿Recuérdalo?
‫Y ahora, como
‫mencioné, tenemos una nueva rama remota aquí, que se llama heroku.
‫Entonces, realmente, el proceso de implementación de nuestra aplicación
‫es tan simple como enviar nuestro código a esa rama remota.
‫Entonces, git push heroku master.
‫Y realmente necesita ser la rama maestra.
‫Es la única rama para la que funciona esta implementación.
‫Pero, en nuestro caso, como
‫puede ver aquí, en realidad estamos en
‫nuestra rama maestra y también puede verlo aquí en la esquina de VS Code.
‫Entonces, eso no es un problema.
‫Entonces, ejecutemos este comando,
‫que luego debería tomar un par
‫de tiempo porque, por supuesto, cargará todos sus
‫archivos que están en el repositorio hasta Heroku.
‫Y ahora, ves todo este proceso aquí en marcha y lo que
‫está haciendo
‫es que en realidad está instalando todas nuestras dependencias
‫aquí en nuestra nueva aplicación.
‫Entonces, en nuestra aplicación que ahora está en Heroku.
‫Entonces, esperemos hasta que esto termine
‫y nos veremos cuando este proceso haya terminado.
‫Y así, eso está hecho.
‫Entonces, espero que hayas recibido el mensaje Verificando la implementación ... hecho.
‫Entonces, ya ve, lanzando, y realmente significa que nuestra
‫aplicación ahora está implementada en Heroku
‫en esta URL.
‫Entonces, ves que la construcción tiene éxito.
‫Y, de verdad, todos estos mensajes de
‫los que ya hablé antes.
‫Entonces, ahora, para abrir nuestra aplicación,
‫todo lo que necesitamos escribir es heroku open.
‫Ahora, no esperamos que esto funcione
‫todavía porque todas nuestras variables de
‫entorno en
‫realidad no están definidas porque excluimos este archivo de configuración aquí
‫de nuestro repositorio Git.
‫Pero, aún así, solo
‫por el gusto de hacerlo, intentemos abrir nuestra aplicación.
‫Y así, de hecho, eso abre nuestra URL, en
‫este caso, radiant-springs-85848. herokuapp. com.
‫Entonces, básicamente, es el subdominio de Heroku.
‫Y así, nuevamente, como
‫se esperaba, en realidad obtuvimos algún error aquí.
‫Y, una vez más, eso se debe a que nuestras variables
‫de entorno, en este punto, aún no están definidas.
‫Ahora, también podemos echar un vistazo a estos
‫errores en los registros de Heroku.
‫Entonces, déjame mostrarte eso también.
‫Entonces, heroku logs --tail.
‫Entonces, aquí, verá que el estado cambió de almacenamiento a bloqueado, así
‫que veamos lo que tenemos aquí.
‫En realidad, verá el mensaje de error
‫que creamos nosotros mismos aquí.
‫Entonces, EJECUCIÓN NO ATRAPADA con este emoji
‫y luego Apagando ...
‫Y, como puede ver
‫aquí, no se puede leer la propiedad 'reemplazar' de indefinido.
‫Y, de nuevo, eso se debe a que las variables de
‫entorno no están definidas en este momento.
‫Entonces, salgamos de estos registros aquí, nuevamente, con el control C.
‫Entonces, ahora, definamos
‫estas variables de entorno para
‫que nuestra aplicación funcione.
‫Y, la forma
‫en que lo hacemos es especificar cada variable de
‫entorno usando un comando especial de Heroku.
‫Entonces, Heroku y otras plataformas de alojamiento,
‫no usan un. env como lo hicimos
‫aquí en desarrollo para todas nuestras variables de configuración.
‫Entonces, nuevamente, aquí en desarrollo, usamos esta configuración. env para poner nuestras
‫variables de entorno.
‫Pero, aquí en Heroku, los definiremos
‫de otra manera.
‫Pero, en nuestro código, todo
‫lo que tenemos funciona exactamente igual.
‫Entonces, comencemos con la variable
‫NODE_ENV que necesitamos establecer en producción.
‫Y entonces, lo hacemos diciendo heroku config: set y luego el
‫nombre de la variable, NODE_ENV = production.
‫Y, de hecho, esta variable NODE_ENV
‫está configurada por defecto en producción por Heroku.
‫Pero, aún así, asegurémonos al 100% de
‫que realmente se mantiene
‫así, incluso si Heroku cambia algo.
‫Entonces, realmente, para estar seguros, sigamos haciendo esto
‫porque, como sabemos, una gran parte de nuestro código realmente
‫depende de esta variable y también
‫puede hacer que las aplicaciones Node se ejecuten hasta tres veces más rápido.
‫Creo que hablamos de eso antes.
‫Entonces, la importancia de configurar NODE_ENV en producción.
‫Pero, de todos modos, es bueno hacerlo de verdad.
‫Entonces, simplemente presione regresar y luego
‫establecerá esta variable de entorno y
‫reiniciará la aplicación.
‫Entonces, ahora, todo lo que tenemos
‫que hacer es básicamente hacer
‫esto para todas las variables de entorno relevantes.
‫Entonces, hicimos NODE_ENV, ahora, el puerto, no lo configuraremos porque,
‫como mencioné antes,
‫Heroku en realidad, detrás de
‫escena, asignará un puerto aleatorio a nuestra aplicación.
‫Y entonces, a continuación, agreguemos la base de datos.
‫Y, de hecho, copiemos todo esto.
‫Y luego, pégalo aquí.
‫Y eso realmente no funcionó, así
‫que intentémoslo con algunas citas aquí tal vez.
‫Sí, se ve mucho mejor.
‫A continuación, la contraseña de la base de datos.
‫Vamos a aclararlo aquí.
‫A continuación, el secreto.
‫Así que, así.
‫Entonces, es un poco aburrido hacerlo para todos, pero bueno,
‫solo tenemos que hacerlo una
‫vez, así que no es gran cosa.
‫Ahora, también necesitamos este aquí porque
‫todo esto aquí es solo para mailtrap
‫y en realidad no lo necesitamos en producción
‫porque recuerde que cuando estamos en producción,
‫todos nuestros correos electrónicos se envían usando SENDGRID y
‫ya no usando mailtrap.
‫Y así, en nuestra aplicación
‫Heroku, no los necesitamos para las variables.
‫Pero necesitamos el correo electrónico de.
‫Entonces, ese es nuestro próximo.
‫Luego, necesitamos SENDGRID_USERNAME así
‫como la contraseña.
‫Y finalmente, nuestra clave de banda secreta.
‫Y, con esto,
‫creo que aquí tenemos todas nuestras variables relevantes.
‫Entonces, intentemos de nuevo, heroku abierto.
‫Y eso se ve perfecto, hermoso.
‫Entonces, realmente, nuestra aplicación ahora está implementada en
‫radiant-springs o lo que sea que tenga en su caso y todo
‫parece estar funcionando a la perfección.
‫Entonces, todas nuestras imágenes están aquí.
‫Echemos un vistazo a una sola página aquí también.
‫Y, de hecho, todo eso funciona de maravilla.
‫Entonces, nuestro mapa también aparece.
‫Y sí, parece funcionar bien.
‫Y el hecho de que todo esto funcione a la perfección
‫también muestra la
‫belleza de tener una base de datos alojada todo
‫el tiempo también durante el
‫desarrollo, porque no importa si estamos
‫en desarrollo o en producción, nuestra base de datos sigue funcionando.
‫Entonces, si hubiéramos utilizado una base de
‫datos local, ahora tendríamos que exportar todos los
‫datos de esa base de datos local, luego crear una base de datos
‫alojada y cargar todos los datos en esa base de datos alojada.
‫Y entonces, eso, por supuesto, crearía un paso adicional
‫y algo de trabajo adicional.
‫Y, de nuevo, con esto, simplemente funciona.
‫Entonces, esa es una experiencia de desarrollador muy agradable.
‫Entonces, veamos si también podemos iniciar sesión aquí, lo que,
‫por supuesto, debería ser posible con los ejemplos
‫2, 3, 4 de laura @.
‫Y así parece.
‫Tan hermoso.
‫Veamos si todos nuestros tours de libros todavía están
‫aquí, pero ¿por qué no?
‫Y, de hecho, bueno, en realidad es solo uno,
‫pero, de hecho, está aquí.
‫Entonces, genial, eso es absolutamente fantástico.
‫Y ahora, echemos un vistazo
‫rápido a nuestro panel de Heroku.
‫Entonces, aquí, abramos Heroku.
‫Cierra estos dos.
‫Y así, dado que iniciamos
‫sesión anteriormente aquí, esto debería llevarnos automáticamente al panel
‫de control y ese panel le mostrará, de forma
‫predeterminada, todas las aplicaciones que ha implementado actualmente.
‫Y entonces, el que acabamos de desplegar
‫es este manantial radiante aquí.
‫Entonces, abramos ese.
‫Luego, aquí, en el
‫lado derecho, puedes ver toda la actividad.
‫Por ejemplo, estableciendo todas estas variables de configuración
‫que acabamos de hacer.
‫Tienes tus recursos y muchos de estos solo son interesantes si tienes
‫un banco de pruebas pagado.
‫Y, un dinamómetro es realmente el término que
‫Heroku usa básicamente para un contenedor en el que
‫se ejecuta su aplicación.
‫Entonces, tenemos algunas métricas donde podemos ver
‫quién está accediendo a la aplicación, pero, una vez más, eso
‫solo funciona si tienes un
‫pasatiempo o un banco de pruebas profesional.
‫Pero, lo que realmente importa aquí es
‫la configuración y, por
‫lo tanto, quería mostrarles que podemos revelar las variables de configuración.
‫Entonces, en lugar de cambiarlos o agregarlos
‫en la línea de comando, también podríamos hacerlo aquí.
‫Entonces, estos son todos los que acabamos de agregar en
‫la línea de comando.
‫Luego, otra cosa muy importante está aquí en Más,
‫podemos ver nuestros registros.
‫Entonces, esperemos aquí.
‫Entonces, Heroku le brinda todos estos registros realmente para todo
‫lo que sucede en su aplicación.
‫Entonces, cuando abrimos la aplicación en el
‫navegador, solicitó todos estos archivos como puede
‫ver aquí, por ejemplo.
‫Entonces, realmente, todo lo que
‫está sucediendo estará aquí en estos registros.
‫Y así, si tu aplicación falla o si pasa algo y básicamente todo
‫para lo que usamos una consola. log terminará
‫mostrándose aquí en estos registros.
‫Entonces, estos fueron los registros de Heroku que
‫mencioné en una de las conferencias anteriores.
‫Ahora, una cosa que podemos
‫hacer es cambiar el nombre de nuestra aplicación.
‫Entonces, en lugar de llamarlo con este nombre aleatorio,
‫podemos darle un nombre más significativo.
‫Ahora, podríamos hacer eso aquí,
‫pero eso estropearía nuestra aplicación en la terminal de
‫nuestra computadora local.
‫Entonces, en cambio, lo que hacemos es
‫cambiar el nombre directamente aquí.
‫Entonces, digamos, aplicaciones heroku: cambie el nombre, así, y luego
‫el nuevo nombre para la aplicación.
‫Y lo llamaré
‫natours, pero usted, por supuesto,
‫no podrá llamarlo también natours porque ese
‫subdominio ya estará ocupado.
‫Entonces, puede llamarlo natours con su nombre o
‫con su nombre de usuario o realmente cualquier otra palabra
‫que desee.
‫Entonces, seguiré adelante y ahora, realmente lo llamaré natours.
‫Oh, pero veo que alguien ya me quitó ese nombre,
‫así que es desafortunado.
‫Pero, probablemente sea porque ya usé el nombre natours
‫en un proyecto en otro curso.
‫Y entonces, alguien debe haberlo tomado.
‫Entonces, llamémoslo natoursapp y, por supuesto, necesito
‫escribir todo lo demás.
‫Entonces, aplicaciones heroku: cambie el nombre
‫y luego natoursapp.
‫Entonces, con suerte, nadie tomó este.
‫Y parece que está haciendo
‫algo, pero alguien ya ha tomado eso también.
‫Bueno, eso es realmente extraño.
‫Entonces, supongo que tengo muchos estudiantes
‫que publican sus aplicaciones en Heroku, así que
‫seguiré el ejemplo que di antes y agregaré
‫mi nombre aquí.
‫Entonces, tercer intento con natours-jonas.
‫Entonces, sí, esperemos que la tercera vez funcione.
‫Entonces, esperemos aquí.
‫Y eso es.
‫Entonces, intentemos heroku open.
‫Está bien, y aquí vamos.
‫Y ahora, en este
‫punto, la versión anterior ya no funcionará.
‫Entonces, este se ha ido, cerrémoslo.
‫Volvamos al Personal aquí.
‫Y así, sí, aquí vamos.
‫Eso es natours-jonas.
‫Genial, nuestro sitio web ya está oficialmente en producción.
‫Ahora, otra cosa que quiero hacer
‫aquí es actualizar la variable de entorno Postman
‫para producción, ¿recuerdas eso?
‫Entonces, sigamos adelante y copiemos esto aquí.
‫Y tampoco la forma en
‫que estamos en https aquí en Heroku.
‫Entonces, Heroku hace toda la administración de certificados SSL
‫por nosotros detrás de escena para que nuestra página sea siempre
‫segura, siempre con https.
‫Entonces, esa es otra característica realmente agradable de Heroku.
‫Entonces, ahora, aquí en
‫Postman, sigamos adelante y cambiemos esta producción y la URL.
‫Por supuesto, este era solo un marcador de posición.
‫Y, en cambio, lo que queremos es ahora nuestra URL de producción real.
‫Y no estoy seguro de si es correcto
‫así, pero simplemente actualícelo y compárelo con el de desarrollo.
‫Pero, de hecho, lo es.
‫Por lo tanto, debe terminar con esta barra.
‫Y entonces, el que acabamos de hacer también lo hace.
‫Entonces, actualice, cierre, y ahora, todo
‫lo que tenemos que hacer aquí es cambiar
‫de desarrollo a este entorno de producción natural.
‫Entonces, ahora, si, por ejemplo, trato de obtener Get All
‫Tours, que en realidad es el
‫que teníamos abierto, veamos si funciona.
‫Apaguemos todo esto.
‫Y, de hecho, lo hace, genial.
‫Veamos si realmente podemos
‫ver la URL completa en algún lugar aquí.
‫Bueno, realmente no se nota.
‫Pero, de todos modos,
‫realmente no importa porque todavía sabemos que realmente funcionó.
‫Entonces, ahora realmente obtuvimos estos datos
‫aquí de nuestra API de producción y podemos demostrarlo fácilmente
‫porque la versión de desarrollo ni siquiera
‫se está ejecutando actualmente.
‫Entonces, si enviamos esto, obtenemos este error.
‫Entonces, una vez más, en serio, felicitaciones
‫por casi ahora terminar el proyecto en este punto.
‫Ya está en el servidor en
‫vivo y, en este punto, puede compartir su
‫proyecto con el mundo y mostrar a todos lo que ha logrado
‫después de todo este trabajo en la construcción de este proyecto.
‫Solo una pequeña cosa más que quería hacer
‫aquí, como dije en la última conferencia, es probar esa compresión.
‫Entonces, busquemos la compresión gzip de prueba aquí.
‫Y luego, ese debería ser el primer resultado aquí,
‫Gift of Speed.
‫Y entonces, si ingresamos nuestra URL aquí y luego verificamos, veamos.
‫Y vemos que GZIP está habilitado.
‫Y eso se debe a ese paquete de compresión
‫que usamos en la última conferencia.
‫Entonces, originalmente, nuestra página tendría 14K, pero
‫luego comprimida, es 2K.
‫Y, por supuesto, eso no hace una gran
‫diferencia en este caso, pero para una página mucho más grande, por
‫supuesto, realmente puede marcar la diferencia para sus usuarios.
‫Perfecto, ahora, en el próximo par de videos, solo hay
‫un par de pequeñas cosas
‫que todavía tenemos que arreglar aquí.
‫Y así, haremos
‫eso en las próximas dos o tres conferencias.
‫Y así, después de eso
‫es cuando el proyecto está realmente terminado al 100%.