Es momento de que construyamos nuestra imagen.
Recuerden que a diferencia de las aplicaciones que hemos creado anteriormente, nuestras imágenes han
sido basadas en node, es decir, ocupamos correr node para poder ejecutar el procedimiento de no index.
HTML o no no index.
JS si queríamos correr algo.
En pocas palabras, solo déjenme refrescarle la memoria.
Por ejemplo, en la sección anterior o en la sección previa, nosotros vamos a buscar aquí que no sé
porque estos archivos de Docker no se abren automáticamente en Visual Studio Code.
En secciones anteriores lo que nosotros hacíamos al final era correr el comando de No dist main.
Esto es porque era una aplicación de Node.
Pero al contrario de lo que ustedes estarían pensando acá, a pesar de que sí es una aplicación de Node
para desarrollarla, es una aplicación de Node.
Pero cuando yo hago el Will de producción, es decir, cuando ya construyo el dist, lo único que hace
es construirme archivos HTML, CSS, de js, assets, entre otras cosas.
Entonces, básicamente lo que yo necesito es un hosting para hacer simples archivos HTML, CSS, js,
assets, planos.
O sea, no ocupo nada del lado del servidor, simplemente un hosting que sirva estos archivos y para
eso voy a usar en Genesis y por eso no puedo usar la imagen de Dove directamente, aunque técnicamente
sí se puede usar.
Si ustedes montan un servidor de Express y en el servidor de Express ponen la carpeta de distribución.
Pero nuevamente hay muchas razones por las cuales ustedes van a querer tener el backend forense parado
en imágenes separadas, porque así es más fácil hacer los cambios, es más fácil de balancear la carga
y etc no?
En fin, vamos a comenzar a crear nuestra imagen y ustedes ya saben que todo empieza con el Docker file,
el Docker que es para crear imágenes.
Y una vez ustedes crean el Docker files, acostúmbrese a crear de una vez el archivo de Docker.
Ignore el doc ignore va a ignorar los módulos de Node Note modules.
Vas a ignorar la carpeta git por si acaso, y también va a ignorar la carpeta de distribución, porque
yo no quiero que se vaya a copiar nada de eso por accidente.
Ok, voy a cerrar el docker, ignore y empecemos a trabajar este Docker File Si ustedes quieren pueden
tomar el parte del código anterior.
Si quieren que piense todo el doctrine nor del proyecto de los de de las gif actions, pero si no pueden
empezarlo a copiar conmigo, entonces siempre vamos a tener la parte de hacer el Frozen Log file para
las dependencias de desarrollo.
Creamos un stage únicamente para las dependencias de desarrollo.
Luego tenemos la fase del Builder.
La fase del Builder nuevamente y también del testeo.
Si ustedes quieren pueden ejecutar el test porque va a demorar un poco, porque hay mucho test.
Hay mucho test ahí, en fin.
Pero se puede hacer, como ya lo vimos en otra sección.
En fin, lo que estamos haciendo aquí es crear nuestro builder.
Al hacer el Paso Builder, lo que queremos hacer es que construya e copie todos los todos los archivos,
copie los módulos de Node y cuando ya tiene todo eso en la imagen, construye.
Es decir, esta es una fase solo de construcción y testeo, testeo y construcción, testeo y construcción.
Una vez pasa todo esto, se va a crear la carpeta de distribución.
Ustedes se acuerdan?
Ya lo vimos en los videos anteriores, se crea la carpeta de distribución.
Esta es la carpeta de distribución que yo necesito colocar en mi hosting, pero no hay una fase de dependencias
de producción a pesar de que más de uno diga bueno, pero, pero yo estoy viendo que aquí hay dependencias
de producción.
Si.
Pero como se está utilizando, como se construye esa aplicación, o como funciona Bitcoin, o como está
montado esta aplicación de Bitcoin, su aplicación de Bitcoin, así como está, así como lo tenemos
nosotros, no es necesario ninguna de esas dependencias de producción cuando ya la aplicación es construida,
porque cuando se construyen esas dependencias ya están dentro de la carpeta de distribución, por lo
cual yo no ocupo para nada este paso de pro dependencia.
Nada de ese paso.
Ahora el paso para correrlo, este va a variar donde ustedes quieran montar su aplicación.
Si yo lo quiero montar en un servidor de express de Node, posiblemente yo vaya a usar exactamente esos
mismos pasos, pero yo no lo quiero montar en un servidor de Express, no lo quiero montar en Nginx,
el cual es mucho más popular que no para hacer este tipo de trabajos.
En fin, entonces lo que voy a colocar acá va a ser la imagen de en Genesis Nginx o nginx como dicen
que se pronuncia, uno punto 23.3 y le voy a poner el stage Prod.
Voy a exponer el puerto 80, que así como lo oímos nosotros en el archivo de configuración, ya vamos
a regresar a él y después se lo voy a mostrar, pero vamos a ocupar exponer ese puerto.
80 no cupo el Working Directory, técnicamente lo podría utilizar, pero ocupo moverme a dos pads,
entonces me base, me va a estorbar más de lo que me va a ayudar.
Si ustedes quieren pueden agregar variables de entorno y voy a bajar un poco esas líneas.
Y ahora yo necesito copiar el barril de distribución y en dónde lo voy a colocar y qué es lo que tengo
que copiar?
Nuevamente acordémonos de que esto no hace falta que vengan, solo es para refrescarle la memoria.
Recuerden que el objetivo es poner mis archivos estáticos que yo quiero servir en mi hosting, en user
share en index.html.
Aquí es donde los quiero colocar y lo que yo ponga aquí.
Esos archivos HTML y CSS JavaScript se van a servir en el hosting.
Entonces aquí es donde yo lo quiero tomar.
O mejor dicho, dónde los quiero pegar?
Entonces copie.
Tendríamos nuestro pase local y lo quiero pegar en ese Pat.
Pero si lo dejo así, copie y punto.
Va a copiar todo lo que yo tengo aquí, todo lo que yo tengo aquí y no es el objetivo.
El objetivo sería tomar lo que la carpeta de distribución que se creó en el paso del Builder.
Entonces como era menos menos from y el sketch es Builder, asegúrese de escribirlo bien.
No como yo Builder.
Entonces From Builder.
Quiero que copie la carpeta de distribución que se encuentra en donde?
Cual es la carpeta de distribución?
Donde esta?
Está en app.
Es las dist.
Entonces copie ese app.
Las dist y lo va a pegar dentro de ese directorio.
Este de aquí no lo ocupo.
Esas dos líneas no las ocupo.
Ahora si yo quiero correr la aplicación, osea si yo quiero montarla, obviamente yo no tengo nada instalado
o previamente instalado en Genesis, yo no lo tengo ahí.
Entonces no es este comando para ejecutarlo, pero el comando que yo voy a usar es en GeneXus que obviamente
viene instalado y yo los invito a que ustedes investiguen estos comandos que yo estoy escribiendo solo
para no darles todo y simplemente investiguen para que tengan una idea de lo que estoy haciendo aquí
y coloque Daemon off, punto y coma.
Por favor escribanos exactamente igual que yo en Genesis G.
Daemon.
Y con esto vamos a echar a andar nuestra aplicación de Engine X.
Entonces todavía falta un paso.
Bueno, faltan dos pasos, pero por ahora, por ahora lo vamos a dejar así para ver qué pasa.
Ok, entonces gánense los cambios.
Regresemos a la terminal.
Recuerden a la terminal donde nosotros tenemos corriendo nuestra aplicación y vamos a hacer el Docker
build.
Voy a colocarle el name.
Bueno el tag mejor dicho build en usted.
Le voy a poner el tag que se va a llamar Héroe app espacio punto para decirle que aquí se va a encontrar
nuestro Docker File y adicionalmente voy a poner menos.
Menos no cash, no cash.
Para que asegurarme de que yo no tenga nada en caché que vuelva a hacer todos esos pasos, a pesar de
que hay ciertas cosas que ya están ahí en el caché, pero es propiamente de la imagen de Engine X,
entonces esperemos un momento a que ese procedimiento termine.
No debería tardar mucho porque la aplicación de todos modos no es muy grande, pero hay descargas,
hay procedimientos que esta haciendo, entonces esperemos unos momentos hasta que este procedimiento
termine.
Ok, ya termino.
Puedo limpiar la consola y hacer un Docker y ls y ahí tenemos nuestro héroe app con el test creado hace
22 segundos.
Perfecto.
Ok, vamos a correr la aplicación para ver que pasa.
Ok?
Para ver que sucedió entonces como lo querríamos?
Docker run o Docker container run.
Se me está yendo la voz, pero bueno, si tengo que contener run voy a poner el publish del puerto 80
de mi equipo con el 80 del contenedor y es Héroes App.
Ese fue el nombre que le dije y voy a presionar Enter.
Voy a dejar los logs aquí porque me interesa verlos.
Voy a regresar navegador web y escriban localhost, nada más.
Ok, escriban localhost y si quieren borren ese local y solamente presionen enter.
Posiblemente o ustedes caigan aqui o puede ser que esten en el login dependiendo de la primera vez que
lo ejecutan o no?
Si ustedes recargan el navegador web me dice cuatro cuatro not found y eso es que no se encuentra nada
que esté en ese paz.
Pero si yo voy de nuevo al localhost aquí si funciona y parte de mi objetivo es que eso sea el comportamiento
que yo estoy buscando por defecto.
Ahora no se estresen, si ustedes no ven las imágenes, las imágenes no se van a ver en su computadora
porque no las tienen.
Yo las tengo en el caché gracias a que Nginx ya lo hizo por mí, pero bueno, y el navegador web?
Pero no se estresen si ustedes no las ven, eso es parte de lo que vamos a hacer también en esta sección.
Yo creo que Batman aparece, pero si yo recargo un navegador web se rompe nuevamente.
Si vengo aquí e ingreso a localhost todo funciona.
Pero porque funciona de esta manera?
Porque por defecto yo no le estoy diciendo a alguien X de que React así la aplicación que yo tengo configurada
en React tiene su propio router, es decir, tiene su router, el cual maneja las rutas.
Pero yo le tengo que decir a index.
O sea, esto estaría bien.
O sea, en pocas palabras, no quiere decir que esto esté mal, pero en pocas palabras, si yo tuviera
en mi file System un directorio llamado Marvel y dentro de Marvel tuviéramos un archivo index.
HTML, eso es lo que se serviría.
Pero como no existe ese archivo de local box slash, Marvel, bueno, Marvel index, punto html.
Por eso está dando ese error que es el 404 que no se encuentra.
Tiene mucho sentido, pero al principio puede ser algo engañoso y la pregunta es pero, pero si yo estoy
aquí, si yo me voy a loco, si presiono enter y aquí si yo ya miro que todo funciona, por qué?
Porque ninguna petición ha salido realmente de El Root, que era el slash inicial que nosotros hicimos.
Tenemos que hacer una configuración adicional en Genesis para que esto funcione de la manera que yo
espero, pero nuevamente van a ver que interesante no?
Qué interesante lo que tenemos ahí.
Ok, por ahora.
Por ahora me siento satisfecho con esta primera aproximación que nosotros hicimos.
Voy a presionar control para cancelar esto y si quieren, ustedes pueden nuevamente venir aquí, borrar
esa, esa imagen o ese contenedor que tenemos ahí, porque tenemos que volver a hacer una construcción
y una configuración que haremos en el próximo video.
Pero por ahora me siento satisfecho con ese gran, gran, gran avance.
Lo veo en el siguiente video.