المدة الزمنية 21:11

Aprende a dockerizar tu aplicación de Frontend (React, Angular) y ahorra tiempo y recursos

بواسطة Leifer Mendez
19 609 مشاهدة
0
960
تم نشره في 2022/12/21

✌🏼 ¿Quieres aprender a usar Docker para facilitar el desarrollo y despliegue de tus aplicaciones? ¡Mira mi nuevo video! Aprenderás qué es Docker y cómo funciona, cómo instalarlo y configurarlo, y cómo empezar a usar contenedores para mejorar tu flujo de trabajo. Además, verás algunos ejemplos prácticos de cómo utilizar Docker en diferentes escenarios. ¡No te lo pierdas! Es importante que sepas que esté video está enfocado aprender cómo utilizar Docker para facilitar el desarrollo y despliegue de tu aplicación de React, por lo tanto verás cómo utilizar Docker Compose para orquestar tu aplicación de React junto con otros servicios que pueda necesitar. ¡No te lo pierdas! Si estás empezando a programar, o si quieres fortalecer tus conocimientos te doy la bienvenida a este canal. Aquí hablamos de angular desde cero, y node desde cero, también complementamos con cursos gratis mongo, de frontend de backend, problemas reales de un programador y soluciones que se aplican en el día a día. Aquí vas a encontrar tutoriales de programación específicamente de angular, tutoriales de node, juntos llevaremos a la práctica ejercicios reales de programación, así que venga y le cuento. Si aún no estás suscrito y este contenido gusta 👉 /channel/UCgrIGp5QAnC0J8LfNJxDRDw 👋 𝐂𝐔𝐑𝐒𝐎𝐒 𝐆𝐑𝐀𝐓𝐈𝐒 ├ 0️⃣ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊𝙎 ⮕ https://leifermendez.github.io/#/ ├ 1️⃣ 𝘼𝙉𝙂𝙐𝙇𝘼𝙍 desde cero ⮕ https://bit.ly/367tJ32 ├ 2️⃣ 𝙉𝙊𝘿𝙀 Express desde cero ⮕ https://bit.ly/3od1Bl6 ├ 3️⃣ 𝙈𝙊𝙉𝙂𝙊𝘿𝘽 desde cero ⮕ https://bit.ly/3qh35wK ├ 4️⃣ 𝙎𝙊𝘾𝙆𝙀𝙏.𝙄𝙊 desde cero ⮕ https://bit.ly/3pg1Q02 └ 5️⃣ 𝙉𝙂𝙍𝙓 𝙙𝙚𝙨𝙙𝙚 𝘾𝙀𝙍𝙊 ⮕ https://bit.ly/ngrx-desde-cero 🤑 𝐂𝐔𝐑𝐒𝐎𝐒 𝐏𝐀𝐆𝐎𝐒 ├𝘼𝙉𝙂𝙐𝙇𝘼𝙍 principiantes ⮕ https://link.codigoencasa.com/PROMO-INICIAL ├𝙉𝙊𝘿𝙀 ⮕ https://link.codigoencasa.com/NODE ├𝙉𝙀𝙎𝙏𝙅𝙎⮕ https://link.codigoencasa.com/NESTJS └ 𝘼𝙒𝙎 desde cero ⮕ https://link.codigoencasa.com/AWS ‍🚀 𝐂𝐎𝐌𝐔𝐍𝐈𝐃𝐀𝐃 𝐘 𝐆𝐑𝐔𝐏𝐎𝐒 𝐃𝐄 𝐄𝐒𝐓𝐔𝐃𝐈𝐎 ├ 𝙎𝙐𝙎𝘾𝙍𝙄𝘽𝙀𝙏𝙀 ⮕ /channel/UCgrIGp5QAnC0J8LfNJxDRDw ├ 𝙈𝙄𝙀𝙈𝘽𝙍𝙊𝙎 ⮕ /channel/UCgrIGp5QAnC0J8LfNJxDRDw/join ├ 𝘿𝙄𝙎𝘾𝙊𝙍𝘿 ⮕ https://link.codigoencasa.com/DISCORD └ 𝙏𝙀𝙇𝙀𝙂𝙍𝘼𝙈 ⮕ https://t.me/leifermendez ‍🏆 𝐌Á𝐒 𝐂𝐎𝐍𝐓𝐄𝐍𝐈𝐃𝐎 ├ 𝙎𝙋𝙊𝙏𝙄𝙁𝙔 ⮕ https://spoti.fi/3vnrvqg ├ 𝙔𝙊𝙐𝙏𝙐𝘽𝙀 ⮕ /leifermendez ├ 𝙄𝙉𝙎𝙏𝘼𝙂𝙍𝘼𝙈 ⮕ https://www.instagram.com/leifermendez ├ 𝘽𝙇𝙊𝙂 ⮕ https://www.codigoencasa.com └ 𝙁𝘼𝘾𝙀𝘽𝙊𝙊𝙆 ⮕ https://www.facebook.com/leifermendez.dev ‍💰 𝐏𝐑𝐎𝐌𝐎𝐂𝐈𝐎𝐍𝐄𝐒 𝐘 𝐃𝐄𝐒𝐂𝐔𝐄𝐍𝐓𝐎𝐒 ├ 𝙃𝙊𝙎𝙏𝙄𝙉𝙂 Aprovéchate del descuento) ⮕ https://bit.ly/hosting-descuento-leifermendez ├ 𝙑𝙋𝙉 (3 meses gratis de servicio) ⮕ https://bit.ly/vpn-leifermendez └ 𝙑𝙀𝙍 𝙏𝙊𝘿𝙊 ⮕ https://link.codigoencasa.com/MAS-COSAS 🧠 𝐑𝐄𝐏𝐎𝐒𝐈𝐓𝐎𝐑𝐈𝐎 𝐘 𝐂𝐎𝐃𝐈𝐆𝐎𝐒 └ 𝙂𝙄𝙏𝙃𝙐𝘽 ⮕ https://github.com/leifermendez ✉️ 𝐂𝐎𝐍𝐓𝐀𝐂𝐓𝐎 └ 𝙈𝘼𝙄𝙇 ⮕ leifer.contacto@gmail.com 0:00 Docker React Frontend env 2:20 Vite Frontend env 4:15 Casos de Uso 5:03 Docker DockerFile muti stage 8:20 Contruir Imagen Docker 9:41 Levantar imagen de docker en contendero 11:36 Inyectando ENV en React Docker 14:51 Publicando Docker Image de React 16:20 Emulando Ubuntu 19:52 Resumen docker react env Si el contenido de está video te parece relevante recuerda suscribirte al canal, activar la campanita para que youtube te avise cada vez que subo un nuevo video y dejar una manito arriba. #leifermendez

الفئة

عرض المزيد

تعليقات - 76
  • @
    @LeiferMendezمنذ 2 سنوات
    ├ principiantes ⮕
    ├ principiantes ⮕
    └ desde cero ⮕
    . 2
  • @
    @theproclamerمنذ 2 سنوات Gran video de verdad! esto a los juniors y no tan juniors es una casi master class de como empaquetar aplicaciones y hacer su distribución de forma profesional, gran trabajo! ....وسعت 9
  • @
    @danikleanمنذ 2 سنوات Justamente estaba haciendo unas cositas con Docker y wow. Es una pasada la verdad 6
  • @
    @hitorikenshinالعام الماضي uff todo super claro, Exelente video
    y Exelente tema!!
    1
  • @
    @dalthonmamanihualpa44منذ 2 سنوات Hola gran información, por consulta este ejemplo es para generar la imagen de despliegue vrd, para hacer live reload como se haría o en development? 1
  • @
    @hermanmoralesara7766منذ 2 سنوات Que gran explicación!!! Muchas gracias. 1
  • @
    @mochemiguel1233منذ 2 سنوات Recuerdo alguna vez en un live que te hice una pregunta acerca de dockerizar fronts, recuerdo que me decìas que habìas escuchado algo asì pero no probado, ahora sale esta joya, sos un crack Leifer <3 1
  • @
    @andresfcuellarcمنذ 2 سنوات Genial! muy bien explicado! Gracias al tu del pasado! 1
  • @
    @phonevelarde5692منذ 2 سنوات Excelente video, gracias por compartir esta valiosa información. 1
  • @
    @carlozlopez7563منذ 2 سنوات eh vueltooooooo jejeej, se acabaron los finales ,desde ya gracia por el videotutorial , gracias por compartir amigo ,un abrazo la distancia, tambien sera para mi yo del futuro ya q aun soy basico 1
  • @
    @bloodbahamutالعام الماضي Tengo una semana jugando con esto de Docker con vainas del front y me cae como anillo al dedo, Gracias Leifer :) 1
  • @
    @aflorotv.1136منذ 2 سنوات Hace poco termine mi primer proyecto y me encontré con ese problema, y de partir de ahí entendí más docker . 1
  • @
    @felixfigueroaمنذ 2 سنوات Sin duda es mucho más rápido así.gracias por compartirlo! 1
  • @
    @agu160579منذ 2 سنوات Un nuevo subscriptor por aquí. Vengo de parte de Bazael (Dominicode) que me cuenta maravillas de ti ;) 1
  • @
    @jscode_esمنذ 2 سنوات Esto es un mensaje para mi yo del futuro, recuerda que este vídeo de té encantó. 1
  • @
    @danikleanمنذ 2 سنوات Brutal la implementación. Aún la estoy procesando 1
  • @
    @MiguelAngel-bf8etقبل 3 أشهر Buenas Leifer compañero ya hace tiempo que no hablamos desde que saliste de excelia. Una pregunta, estoy siguiendo el tuto pero solo me sale la pagina del nginx, le he dado mil vueltas pero no consigo ver cual es mi problema. Por lo demás genial, sigue así. ....وسعت
  • @
    @bryamparra5616قبل 10 أشهر Una consulta, estoy empleando docker para una aplicación con backend y frontend, el frontend es angular y los dos contenedores funcionan bien por separado, pero en el angular tengo un problema que no se puede comuncar y con la API del backend, en el angular instancie que la url es http://nombre de mi contenedor:5000/api/
    y no reconoce. Que podría estar configurando mal tanto en archivos para docker como del nginx.
    Si conocen un tutorial les agradecería. Gracias
    .
    ...وسعت
  • @
    @gabo868منذ 2 سنوات Genial! Uno con ejemplo de angular pls! 1
  • @
    @alexissilva6663منذ 2 سنوات Hola, que tanta diferencia habria si en lugar de un volumen fuera una variable de entorno que se le pasa la imagen?
    Saludos excelente contenido
    1
  • @
    @renends7615منذ 2 سنوات Este video es excelente.
    Docker sigue siendo un misterio tal que la mayoría de las veces no sé qué está pasando . ¡Les pido que continúen el video en este formato, ayuda mucho!
    ¡Gracias!
    ¡Feliz navidad!
    .
    ...وسعت
    1
  • @
    @RichardAllccaLlanoالعام الماضي hola Leifer, preguntas
    Que es vite.config o que otro tipo de cosas puede hacer?
    en el minuto 4 cuando al hacer el build cambia el comentario id="hidden10" class="buttons"> por la etiqueta con el script, usas un vite.config.ts pero en caso sea angular por ejemplo como lo harias si agular no usa vite ?
    ....وسعت 1
  • @
    @EzequielRegaldoمنذ 2 سنوات Hay una mejor práctica para esas cosas, te sugiero usar variables de entorno como corresponde en el docker-compose.yml y no así porque es raro . para eso es mejor un json como archivo de config u otra cosa que realmente use con esa finalidad sino podes confundir al team D: ....وسعت 8
  • @
    @AS-ui4obالعام الماضي En caso de tener más de una aplicación de react y más de un servidor, tendría que usar un nginx por cada aplicación de React? 1
  • @
    @munozhoracioمنذ 2 سنوات Te recomiendo usar imagenes de Docker con version especifica, no es una buena practica usar Imagenes que puedan cambiar con el tiempo. muchas veces pasa id="hidden12" class="buttons"> que si te actualiza la version de node por ejemplo tu version de aplicacion deja de funcionar ....وسعت 1
  • @
    @ismaelvallemartinez3120منذ 2 سنوات Que fuente utilizas para VS?? Gracias. 1
  • @
    @wisthongdavidmartinezcastr5924العام الماضي Cuando haces un ejemplo con un proyecto con angular?
  • @
    @diegoperez-mu1dmقبل 8 أشهر Se puede hacer lo mismo con docker-compose? 1
  • @
    @orlandog1979منذ 2 سنوات Poco a Poco Todo lo que SE ESTA haciendo en El back SE ESTA haciendo en El front 1
  • @
    @JonathanOrtiz-nc8ylقبل 7 أشهر al principio no entendi, al final tampoco
  • @
    @gustavovelazquez9495العام الماضي estimado, te enredas mucho. no me gustó el video. 2
  • @
    @LeiferMendezمنذ 2 سنوات
    ├ principiantes ⮕
    ├ principiantes ⮕
    └ desde cero ⮕
    . 2
  • @
    @theproclamerمنذ 2 سنوات Gran video de verdad! esto a los juniors y no tan juniors es una casi master class de como empaquetar aplicaciones y hacer su distribución de forma profesional, gran trabajo! ....وسعت 9
  • @
    @MiguelAngel-bf8etقبل 3 أشهر Buenas Leifer compañero ya hace tiempo que no hablamos desde que saliste de excelia. Una pregunta, estoy siguiendo el tuto pero solo me sale la pagina del nginx, le he dado mil vueltas pero no consigo ver cual es mi problema. Por lo demás genial, sigue así. ....وسعت
  • @
    @bryamparra5616قبل 10 أشهر Una consulta, estoy empleando docker para una aplicación con backend y frontend, el frontend es angular y los dos contenedores funcionan bien por separado, pero en el angular tengo un problema que no se puede comuncar y con la API del backend, en el angular instancie que la url es http://nombre de mi contenedor:5000/api/
    y no reconoce. Que podría estar configurando mal tanto en archivos para docker como del nginx.
    Si conocen un tutorial les agradecería. Gracias
    .
    ...وسعت
  • @
    @renends7615منذ 2 سنوات Este video es excelente.
    Docker sigue siendo un misterio tal que la mayoría de las veces no sé qué está pasando . ¡Les pido que continúen el video en este formato, ayuda mucho!
    ¡Gracias!
    ¡Feliz navidad!
    .
    ...وسعت
    1
  • @
    @RichardAllccaLlanoالعام الماضي hola Leifer, preguntas
    Que es vite.config o que otro tipo de cosas puede hacer?
    en el minuto 4 cuando al hacer el build cambia el comentario id="hidden21" class="buttons"> por la etiqueta con el script, usas un vite.config.ts pero en caso sea angular por ejemplo como lo harias si agular no usa vite ?
    ....وسعت 1
  • @
    @EzequielRegaldoمنذ 2 سنوات Hay una mejor práctica para esas cosas, te sugiero usar variables de entorno como corresponde en el docker-compose.yml y no así porque es raro . para eso es mejor un json como archivo de config u otra cosa que realmente use con esa finalidad sino podes confundir al team D: ....وسعت 8
  • @
    @munozhoracioمنذ 2 سنوات Te recomiendo usar imagenes de Docker con version especifica, no es una buena practica usar Imagenes que puedan cambiar con el tiempo. muchas veces pasa id="hidden23" class="buttons"> que si te actualiza la version de node por ejemplo tu version de aplicacion deja de funcionar ....وسعت 1