Convierte Apps de React en contenedores Docker

[@tecnolastipas]

Exelente explicación, muchas gracias, estoy iniciando con docker y la verdad era el empujón que necesitaba

[@lasfito]

Gracias, suerte en tu travesía ✌🏼

[@juanangelbibolini8891]

Pocas veces comento en videos... Hoy se me dio por comentar el tuyo porque sinceramente me fue de gran ayuda tu video. ¡Muchas gracias, lasfito! Nuevo suscriptor

[@lasfito]

Gracias, Juan Bienvenido ✌🏼

[@alexisguanique8464]

Mejor explicado imposible, suscrito y like! Excelente!

[@lasfito]

Gracias, Alexis Un saludo ✌🏼

[@FTomaP]

este tutorial me ayudo a dockerizar mi react proyect, muchas gracias

[@lasfito]

Gracias, Diego Me alegra que te haya servido 🤙🏼

[@WalterDiaz-od7jc]

Excelentemente explicado! Muchas gracias.

[@lasfito]

Gracias, Walter ✌🏼

[@abnermartinez3268]

Gracias por el video, muy bueno para las personas que comenzamos usar a docker, algo que me hubiera gustado ver es poder configurar el entorno, para que docker sepa que archivo .env debe leer para poder ejecutar la aplicacion

[@lasfito]

Usualmente se hace un contenedor por entorno, por lo que no es necesario el .env con valores múltiples.

[@racastillo]

Excelente contenido y bien explicado, gracias!

[@lasfito]

Gracias ✌🏼

[@SonGoku-pc7jl]

lo aprendí pero estuve tiempo sin utilizarlo y ha sido un repaso genial! Muchas gracias!

[@lasfito]

Gracias, Espero que te haya refrescado la memoria 🤙🏼

[@hortmanjoj]

gracias hermano, me ayudaste a dockerizar una aplicacion de mi trabajo, nuevo seguidor aca !! saludos.

[@lasfito]

Gracias, Jonathan Me alegra que te haya servido ✌🏼

[@davidgallego1216]

Excelente explicación.

[@lasfito]

Gracias, David Un saludo

[@yvysunu]

Mejor explicado imposible, muchas gracias! Estaría bueno (ya que estamos, jeje) uno explicando cómo configurar GitHub actions para generar las imágenes y desplegarlas en algún proveedor en la nube

[@lasfito]

La forma más sencilla para eso es usar GCP Cloud Run. En este video reviso los pasos: kzbin.info/www/bejne/foLXoaF5gLB_bsk Saludos 🤙🏼

[@yvysunu]

@@lasfito Muchas gracias! Lo reviso ahora

[@coordinadordepartamentalde3990]

Excelente tutorial conciso. Te deseo preguntar algo, en esta parte: docker run -d -p 3000:3000 miuser/miapp debe ser siempre 3000:3000, la duda es debido que tenga una aplicacion que corre por el puerto 2000, pero cuando puse docker run -d -p 2000:3000 miuser/miapp no me funciono, por lo que en el codigo debi cambiar el puerto al 3000 y alli funciono.

[@lasfito]

No es siempre 3000:3000. Varía en función del puerto de la app y los valores que configures en la imagen. El comando refleja esa relación (puerto contenedor, puerto app)

[@thekillercraft1000]

Hola, LastFito genial video. Una pregunta, y si tengo un monorepo con dos aplicaciones mobiles y una app web en next, debo hacer un solo container o uno por cada uno, tambien tengo la base de datos en postgresql

[@lasfito]

Al momento de crear la imagen debes indicar el path correcto para llegar al codigo de next. Esa sería la única diferencia

[@SanchayanPackiyanathan]

Gracias Amigo!!! super contenido !

[@lasfito]

Gracias, espero que te haya servido 🤙🏼

[@ANCEFCA]

Hola muy bueno el video, quiero subir mi proyecto de react a un servidor compartido y en back utikizo java spring boot que. Me recomiendas

[@lasfito]

Por qué un servidor compartido? Si no es muy compleja la app utiliza algún servicio gratuito como Vercel/Netlify

[@ANCEFCA]

Hola gracias por responder ya tengo una cuenta de hosting compartido. Estamos en producción el prpblema que se deploya desde github yno funciona. Debere entonces utilizar doker ? Tengo mas años en desarrrollo tradicional que en estas nuevas practicas de framework. El proyecto es un marketplace empezamos desde algo simple

[@lasfito]

@ANCEFCA no es necesario docker para aplicaciones de react. Si no se despliega correctamente es cuestión de revisar los registros para dar con el problema. Cual servicio de hosting es?

[@ANCEFCA]

Donweb una cuenta de un plan rressseller

[@ANCEFCA]

Es linux la platafprma del servidor

[@diegowagner9486]

Muy bueno! se agradece

[@lasfito]

Gracias, Diego 🤙🏼

[@osdevelopld7644]

pregunta antes de empezar a meter las manos, usaste create react app, funciona igual con npm create vite?

[@lasfito]

Usé ambos, bro. Mete las manos full 🤙🏼

[@diegounanue]

No entiendo porque tienes que poner el run build y tambien correr CMD npm run. Y dijiste que era para produccion como lo llevo a produccion? Gracias!!

[@lasfito]

Ejecutas run build para que la imagen tenga la versión de prod y luego ejecutas npm run build para correr dicho código. Para "llevarlo a producción" necesitas desplegar el contenedor en algún servicio de hospedaje/despliegue. Por ejemplo Railway, Heroku, AWS, GCP, etc.

[@diegounanue]

@@lasfito genial re clara tu respuesta, ahora si lo pongo en producción, el que se llama en react es el index.html, no entiendo como lo haría, si me haria falta ahi el CMD, como indicarle cual es el punto de entrada, tienes algun ejemplo?

[@lasfito]

A qué te refieres con punto de entrada?

[@diegounanue]

@@lasfito claro perdon por mi ignorancia lo que yo hacia era poner el build, que tiene los js y css y el html en un contenedor de aws. Pero nunca deploye una app fuera de eso. Por eso estoy medio perdido, no entiendo para que necesitamos hacer el build si el comando CMD [npm, start], ya corre la app en el localhost del contenedor. Espero se entienda.

[@pablobaskes3100]

Muy bien explicado pero el like te lo llevas por la bromita de Albert Einstein y el meme posterior xdddd

[@lasfito]

Gracias, Pablo Atte. El mismísimo Albert Einstein

[@kaelt75]

Excelente video y explicación, sin embargo me saltan algunas dudas respecto a como se ejecuta el proyecto de React. Porque "npm run start" es para correrlo en modo *Desarrollo* por lo que no sería necesario ejecutar "npm run build" antes. Ahora si yo quiero que corra en modo *Producción*, debería ejecutar el comando "npm run build" y usar algun tipo de proxy-server que carga y sirva los nuevos archivos compilados y generados dentro de la carpeta *build*, ¿no? Jejeje, lo explicaste pero ¿me perdí alguna parte, o como podría esto funcionar?, ¿se podrían tener dos configuraciones diferentes una para desarrollo y otra para producción? 🤯🤔

[@lasfito]

Hola, Jeisson Buena observación. Ya en otro comentario había respondido que ejecutar npm start dependerá de la config de tu proyecto. Con CRA npm start te corre desarrollo, mientras que con Vite te corre la build. Al final del día, el Dockerfile es la receta exacta para tu código, así que no hay una imagen general que sirva para todos los casos. Si quieres que corra en modo producción, tal como menciono en el video, basta crear la build e iniciarla. Recuerda que cada contenedor es un mini servidor/computadora, así que no hace falta preocuparse por algún proxy. Sobre tener dos configuraciones, no te recomendaría “desarrollar” desde un contenedor, su propósito general es el despliegue. Si aún así quieres intentarlo, para que tus cambios se guarden en local y no en el contenedor, necesitarás asignar una montura (similar a un volumen), pero eso es más complicado. Saludos ✌🏼

[@KromedesShooter]

Muy bueno el video, solo tengo una pregunta. Cuando creas la build de la aplicacion con "$ npm run build", si luego corres "$ npm start" en el container, me parece q lo q estas haciendo no es correr la build de la app, si no que seguis corriendo la development build q serviria para el desarrollo. No deberiamos correr la build en un caso de produccion real ya q esta mas optimizada?

[@lasfito]

Va a depender de los scripts y de la aplicación. En algunos casos *start* te ejecuta el bundle de desarrollo y para correr la build necesitas ejecutar algún otro script como *serve*. En algunos casos *start* te ejecuta la build final y necesitas otro comando como *dev* para correr el desarrollo. La respuesta estará en el package.json jaja

[@KromedesShooter]

@@lasfito claro claro, entiendo. Yo estaba teniendo en cuenta los scripts por defecto de create-react-app. Gracias por contestar, buen video saludos!!!

[@rayito845]

Excelente, Sirve para Node / Express ?

[@lasfito]

Sí, tan solo hace falta adecuar los comandos de arranque ✌🏼

[@kevinmc24]

super basico pero bueno ahora uno en enterno de aws y con variables de entorno para consumo de apis en enternos de dev producción y qa

[@lasfito]

El único paso extra es la declaración de las variables en el file. De ahí en fuera tan solo es la inyección según el entorno. Pero valdría la pena hacer un video de igual manera.

[@mauriciocruzlopez4526]

Una pregunta, hice paso a paso todo como en el video pero cuando modifico los archivos por ejemplo del src estos cambios no se ven reflejados en la web. Como lo puedo solucionar.

[@lasfito]

Cada vez que modifiques el código debes crear una nueva imagen. Si quieres usar contenedores para desarrollo, echa un vistazo a los “mounts”.

[@mauriciocruzlopez4526]

@@lasfito hice esto: #Dockerfile FROM node:14.15.4-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . CMD ["npm", "start"] #docker-compose version: "3.8" services: client: stdin_open: true build: context: . dockerfile: Dockerfile.dev ports: - "3000:3000" volumes: - './:/app' - '/app/node_modules' tty: true aunque me funciona lo de volumen , es decir me fijo en el contenedor y veo que se aplican los cambios pero me pasa lo mismo. No hay otra de tener que crear una imagen nueva cada vez que haga un cambio en el código?

[@lasfito]

Para los volúmenes y monturas no soy muy hábil xd Así que te fallo :v

[@darkosa15]

Porque copias el archivo packege.json y luego copias todo? no es repetir? (entendi la explicasion de la carpeta de node moudeles, pero con el packege.json no seria los mismo siempre?)

[@lasfito]

Es porque cada instrucción es una capa para la creación de imágenes. Docker guarda en caché cada capa y al momento de crear una imagen revisa si la capa en cuestión existe previamente. De existir, la reutiliza; caso contrario, la crea. Al tener una capa para package.json y otra capa para el código, nos permite poder crear imágenes más rápido al modificar el código (si es que no modificamos package.json).

[@ep4r4]

Lasfito lo que nadie dice es que si hay que hacer una modificación en la aplicación que has creado como puedes hacerle y luego re-subirla. Ej: imaginas que le haces llegar la imagen a otro compañero y este tiene que si por si hacer modificaciones en ella para luego ponerla a la orden de otro desarrollador, como se puede, he estado investigando y es todo un dolor de culo, mas que lo he intentado y nada que puedo.

[@lasfito]

Para eso se utilizan repositorios remotos y procesos de automatización. La fuente de la imagen debe ser siempre el repositorio. Para organizarte entre compañeros se utilizan las distintas ramas y procesos de desarrollo. Para generar imágenes de docker, puedes utilizar servicios como github, gcp, aws, etc.

[@I5R43LL0P3Z]

Me podrias ayudar a configurar el yml, para ver como seria el codigo

[@lasfito]

Hola, Isra ¿Cuál YAML?

[@I5R43LL0P3Z]

@@lasfito si para correr el contenedor se que es: docker run -it -p 3000:3000 -d , pero si quiera construir el docker-compose.yml con mis configuraciones propias, sabes como iria dicho archivo?, por cierto muy bueno tu video.

[@lasfito]

Como todo buen Dev, debo decir "depende" jaja. Dependerá de otros servicios quieras agregar al compose y de cómo se relacionen estos con tu app. También dependerá de si quieres construir la imagen con cada compose-up o si quieres usar una imagen previa, si necesitas variables de entorno, si necesitas cierto orden de construcción (en caso de tener una base de datos, por ejemplo), de si necesitas un volumen para la app, etc. En lo personal intento mantener las apps stateless para no complicar los procesos. Un ejemplo que podría darte de rápido (que no necesariamente funciona para React) es: services: app: environment: - variable=true build: dockerfile: Dockerfile context: ./app volumes: - /app/node_modules - ./client:/app

[@silviasandoval5068]

Lasfito porque tengo este error al intentar levantarlo /bin/sh: 1: [npm,: not found ?

[@lasfito]

Significa que en la imagen que creaste no tienes instalado npm

[@Deus-lo-Vuilt]

buen contenido

[@lasfito]

Gracias ✌🏼

[@Deus-lo-Vuilt]

@@lasfito haras mas videos con react ?

[@lasfito]

@@Deus-lo-Vuilt Sí, quizá el martes publique otro más. React, Firebase y algoritmos/consejos es más o menos el contenido que quiero crear en el canal.

[@Deus-lo-Vuilt]

@@lasfito Buenisimo , todo lo que sea proyectos con react , vite , react firebase etc me apunto ajaja un saludo

[@lasfito]

Genial, espero que te sirvan ✌🏼

[@rjcdz06]

[@lasfito]

Gracias, Raúl Espero que te haya servido ✌🏼

[@hernanarica6389]

no me funciona con vite, si bien me crea bien imagen y contenedor, cuando abro localhost:3000 no me sale nada, ya cambie el puerto de vite a 3000 y en local abre bien

[@lasfito]

Hola, Hernán Cuando dices que en local abre bien te refieres a correr el código en lugar del contenedor, ¿cierto? ¿Con qué comando estas corriendo el contenedor?

[@AlexanderUrquijo]

creo que en local para que corra "bien" es porque en local con vite por ejemplo ejecutaras el yarn run dev esta sentencia es la que despliega la app en local y seguramente en el dockerfile estas poniendo el "RUN yarn build" es el que te esta dando problema, no?

[@lasfito]

@@AlexanderUrquijo Sí, resta que nos cuente qué comando está usando.

[@hernanarica6389]

falto algo muy importante, enlasar los directorios, el de docker con el local para que los cambios se vean reflejados

[@lasfito]

Sí es una opción si quieres ir probando el desarrollo directamente en el contenedor.

[@IvanVelazquez102]

Tengo una duda porfavor, no me funciona el puerto 3000 y nose porque, ayuda :(

[@lasfito]

Hola, Iván ¿Algún detalle sobre el error? ¿Pasaste el puerto en el comando de docker?

[@IvanVelazquez102]

@@lasfito Ya lo solucione, muchas gracias por el tuto muy util

[@jheandaza7334]

Y si mi App tiene bases de datos?

[@lasfito]

No es necesario alguna modificación porque las credenciales suelen ser ingresadas en variables de entorno. Qué BD utilizas?

[@irrefl1672]

Loco y como harias para tener 3 enviroments?

[@lasfito]

En la imagen puedes meter variables y los entornos los gestionas desde tu plataforma. También puedes usar ramas distintas en tu repo para la gestión de entornos.