Dockerize an Angular Application using Nginx
Summary
TLDREn este video, Junior muestra cómo decorar una aplicación Angular, la cual es la que han estado construyendo y planean dockerizar. La aplicación, que incluye funcionalidades como actualizar información de perfil, cambiar contraseña, roles y permisos, así como la capacidad de gestionar clientes y facturas, se ha desarrollado desde cero. Seguidamente, Junior explica el proceso de Dockerización, que incluye la creación de un Dockerfile para la aplicación Angular, utilizando una imagen de Node.js y Nginx. Detalla los comandos necesarios para copiar archivos, instalar dependencias, y construir la aplicación. Además, aborda la importancia de especificar una versión de Node.js para evitar problemas de compatibilidad y cómo usar el archivo '.dockerignore' para excluir archivos no necesarios en la imagen de Docker. Finalmente, Junior ejecuta el comando 'ng build' para construir la aplicación y se topa con errores de presupuesto de paquete, los cuales resuelve ajustando la configuración en el archivo 'angular.json'. El video es una guía útil para desarrolladores que deseen empaquetar su aplicación Angular en un contenedor Docker.
Takeaways
- 🛠️ Se discute cómo decorar una aplicación Angular y se menciona que se usará para dockerizar.
- 🏗️ Se detalla cómo se construyó la aplicación desde cero, incluyendo todas las funcionalidades.
- 📝 Se muestra cómo se puede actualizar información de perfil, notificaciones, actividad de la cuenta y cambiar la contraseña.
- 🔄 Se explica cómo cambiar la autorización y el rol de usuario, y cómo esto afecta los permisos del mismo.
- 🗑️ Se destaca la capacidad de eliminar permisos para clientes y usuarios si el rol cambia.
- 🖼️ Se menciona la posibilidad de actualizar la información de la cuenta, incluida la imagen de perfil.
- 👥 Se cubre cómo se pueden gestionar los clientes, incluida la adición y actualización de información de clientes.
- 📋 Se aborda el tema de la creación y gestión de facturas, incluyendo la selección de clientes y la entrada de información.
- 📂 Se indica que la aplicación fue diseñada para manejar clientes y facturas, y se sugiere que se dockerizará.
- 📁 Se describe el proceso de creación de un Dockerfile para la aplicación, incluyendo la especificación de la versión de Node.js y la configuración de un servidor web Nginx.
- 🚀 Se discute la importancia de la compatibilidad de las bibliotecas con el tiempo de ejecución de Angular IV y cómo usar el comando `ngcc` para asegurar esta compatibilidad.
Q & A
¿Qué aplicación está utilizando Junior para demostrar cómo decorar una aplicación Angular?
-Junior está utilizando una aplicación Angular que ha construido previamente y planea dockerizar. La aplicación permite a los usuarios actualizar su información de perfil, recibir notificaciones, cambiar su contraseña, actualizar su rol y permisos, y también tiene funcionalidades para manejar clientes y facturas.
¿Por qué es importante especificar una versión de Node.js en el archivo Dockerfile?
-Es importante especificar una versión de Node.js en el archivo Dockerfile para evitar que se utilice la última versión disponible, la cual podría contener cambios que rompan la aplicación. Es recomendable usar una versión conocida que sea compatible con la aplicación para mantener su estabilidad.
¿Qué hace el comando 'npx ngcc' en el archivo Dockerfile?
-El comando 'npx ngcc' es la Compiladora de Compatibilidad de Angular, que se utiliza para compilar bibliotecas publicadas en un formato heredado y hacerlas compatibles con el tiempo de ejecución de Angular Ivy. Esto asegura que los archivos generados por 'NG build' sean compatibles con la mayoría de los navegadores.
¿Cuál es el propósito del archivo '.dockerignore'?
-El archivo '.dockerignore' funciona similar al archivo '.gitignore', y se utiliza para definir los archivos y carpetas que no deben ser copiados dentro del contenedor de Docker al crear la imagen del contenedor. Esto mejora la eficiencia del proceso de construcción al excluir archivos grandes o irrelevantes.
¿Cómo se aborda el problema de los errores de dependencias externas en la aplicación Angular?
-Para solucionar los errores de dependencias externas, se debe permitir explícitamente en el archivo 'angular.json' las dependencias comunes de JavaScript que la aplicación utiliza. Esto se hace agregando los nombres de las dependencias en el arreglo de 'allowedCommonJsDependencies'.
¿Qué es la configuración de 'budgets' en el archivo 'angular.json' y por qué es importante?
-La configuración de 'budgets' en el archivo 'angular.json' establece un límite de tamaño para los paquetes o bundles de la aplicación. Esto es importante para monitorear y controlar el tamaño de los archivos que se cargan inicialmente, lo que puede afectar directamente el rendimiento y la experiencia del usuario.
¿Cómo se definen las variables de entorno para diferentes entornos de trabajo en Angular?
-Se crean archivos de entorno separados, como 'environment.ts' para el entorno de desarrollo y 'environment.prod.ts' para el entorno de producción. Estos archivos contienen variables específicas para cada entorno y se selecciona el archivo correcto en función de la configuración de compilación de Angular.
¿Cómo se soluciona el problema de las rutas en una aplicación de página única (SPA) cuando se refresca la página?
-Para solucionar este problema, se configura el servidor web (en este caso, Nginx) para que siempre sirva el archivo 'index.html' cuando no encuentra la ruta solicitada. Esto permite que Angular maneje la navegación en el lado del cliente y no interrumpa la experiencia del usuario al refrescar la página.
¿Por qué se utiliza un archivo 'default.conf' personalizado en el archivo Dockerfile?
-Se utiliza un archivo 'default.conf' personalizado para incluir la configuración específica que se desea aplicar al servidor Nginx dentro del contenedor de Docker. Esto evita la necesidad de modificar manualmente el archivo de configuración dentro del contenedor y permite que la configuración sea parte del proceso de construcción de la imagen Docker.
¿Cómo se puede implementar la aplicación Angular en un servidor utilizando Docker?
-Se puede crear un archivo Dockerfile que defina los pasos para construir la imagen de Docker de la aplicación Angular, incluyendo la especificación de la versión de Node.js, la instalación de dependencias, la compilación de la aplicación y la configuración del servidor web. Luego, se utiliza 'docker-compose' o los comandos de Docker para construir la imagen y ejecutar el contenedor de la aplicación en el servidor.
¿Cómo se puede acceder a los registros (logs) de un contenedor de Docker?
-Se puede utilizar el comando 'docker logs' seguido del ID o el nombre del contenedor para acceder a los registros de ese contenedor. Esto permite a los desarrolladores y administradores verificar el funcionamiento y diagnósticar problemas en el contenedor de Docker.
Outlines
😀 Introducción y descripción de la aplicación Angular
Junior presenta el tutorial sobre cómo decorar una aplicación Angular. Explica que la aplicación ha sido desarrollada desde cero y que se usará para dockerizar. Detalla las funcionalidades de la aplicación, como la actualización de información de perfil, gestión de notificaciones, cambio de contraseña y autorización, y cómo se pueden modificar los roles y permisos de usuario. Además, menciona la posibilidad de habilitar la autenticación de múltiples factores y la gestión de clientes e información de cuenta.
🛠 Creación del Dockerfile para la aplicación Angular
Se inicia con la creación de un Dockerfile para la aplicación, explicando la necesidad de una imagen de Node.js y la copia de archivos dentro de un servidor web Nginx. Destaca la importancia de especificar una versión de Node.js conocida para evitar problemas de compatibilidad. Describe los comandos para copiar archivos, instalar dependencias de Node.js y ejecutar la compilación de Angular con npx ngcc, que es esencial para la compatibilidad de librerías con el tiempo de ejecución de Angular.
📄 Configuración del Dockerignore y construcción de la imagen
Se detalla la creación de un archivo .dockerignore para evitar la copia de archivos no deseados en el contenedor, similar al .gitignore. Luego, seguidamente, se ejecuta el comando npm run build para construir la aplicación, lo que resulta en la creación de la carpeta 'distribution' con los archivos estáticos generados. Se describe el proceso de copiado de estos archivos en el servidor Nginx y la exposición del puerto 80 para servir los archivos estáticos.
🚀 Ejecución del comando ng build y solución de problemas
Junior ejecuta el comando ng build y aborda el problema de 'no meeting the budget', que se refiere a la configuración de tamaño máximo de los archivos generados. Cambia la configuración en el archivo angular.json para aumentar el tamaño máximo del archivo. Posteriormente, se describe la estructura de la carpeta 'distribution' y cómo los archivos generados serán copiados en el servidor Nginx.
🔧 Configuración de entornos y variables de entorno en Angular
Se explica cómo crear archivos de entorno en Angular para diferentes configuraciones de desarrollo y producción. Se enfoca en la importancia de la bandera de producción y la URL base de la API. Se muestra cómo se utilizan estas variables en los servicios de la aplicación y cómo se configuran en el archivo angular.json para el intercambio de archivos de entorno según el entorno de producción o desarrollo.
🖥️ Creación del archivo docker-compose.yml
Se detalla la creación del archivo docker-compose.yml, donde se definen los servicios, la construcción de la imagen, la asignación de puertos y la red para la aplicación. Se resalta la importancia de este archivo para la ejecución y gestión de los contenedores de Docker.
🚧 Ejecución del contenedor y solución de errores
Se ejecuta el comando docker-compose up para construir la imagen y ejecutar el contenedor. Se aborda el problema de los errores y advertencias en la aplicación y cómo se resuelven al permitir las dependencias comunes de JavaScript en el archivo angular.json. Se menciona la necesidad de reiniciar el contenedor después de realizar cambios en la configuración.
🔄 Actualización y prueba de la aplicación en Docker
Seguidamente, se prueba la aplicación desplegada en Docker, accediendo a través de la dirección IP del host y confirmando que la aplicación se ejecuta correctamente. Se muestra cómo se puede interactuar con la aplicación, incluyendo la actualización de información de perfil y la gestión de clientes.
🛠️ Solución del problema de 404 no encontrado en la aplicación
Se identifica el problema de los errores 404 que ocurren al actualizar la página en una ruta específica en una aplicación de página única (SPA). Se explica que este es un problema común en frameworks JavaScript y se ofrece una solución sencilla para Nginx, que consiste en servir siempre el archivo index.html. Se demuestra cómo entrar en el contenedor en ejecución y modificar la configuración de Nginx para solucionar este problema.
📝 Edición de la configuración de Nginx y reinicio del contenedor
Se describe el proceso de edición de la configuración de Nginx dentro del contenedor y el reinicio del contenedor para aplicar los cambios. Se destaca la importancia de la directiva 'try_files' en la configuración de Nginx, que asegura que se sirva el archivo index.html en lugar de devolver un error 404. Además, se muestra cómo copiar una configuración predefinida en el Dockerfile para evitar la necesidad de editarla manualmente en el contenedor.
🔄 Recompilación de la imagen y confirmación del funcionamiento
Seguidamente, se recomienda la recompilación de la imagen de Docker y se ejecuta el comando para construir y reiniciar el contenedor. Se confirma que la aplicación funcione correctamente después de los cambios, evitando el error 404 al actualizar la página en cualquier ruta. Se ofrece ayuda para configurar un servidor Apache similar si es requerido.
📝 Finalización del tutorial y pruebas adicionales
Finalmente, se concluye el tutorial asegurándose de que la aplicación funcione correctamente en Docker, incluyendo la creación y edición de facturas y la actualización de información de clientes. Se invita a los espectadores a realizar pruebas en su propio entorno de desarrollo utilizando servicios en la nube como AWS o Microsoft Azure, y a ponerse en contacto a través de Discord para cualquier pregunta o asistencia adicional.
Mindmap
Keywords
💡Docker
💡Angular
💡Contenedores
💡Nginx
💡npm
💡Dockerfile
💡Docker Compose
💡ngcc
💡Single Page Application (SPA)
💡Environment Variables
💡Dockerignore
Highlights
Junior muestra cómo decorar una aplicación Angular, la cual previamente construyeron y planean dockerizar.
La aplicación permite actualizar información de perfil, notificaciones y actividad de la cuenta.
Se puede cambiar la contraseña y la autorización, incluyendo el rol de usuario.
Se discute la importancia de las funciones de administración de permisos y la capacidad de eliminar permisos de clientes y usuarios.
Se abordan las funcionalidades de autenticación, incluyendo el registro de inicios de sesión y la autenticación de múltiples factores.
Se muestra cómo actualizar la foto de perfil y cómo afecta la barra de navegación.
Se explica cómo gestionar clientes y crear y actualizar información de facturación.
Se detalla el proceso de creación de un archivo Docker para la aplicación Angular.
Se discute la especificación de una versión de Node.js para evitar problemas de compatibilidad con versiones futuras.
Se menciona el uso de la imagen Alpine de Node.js para un contenedor más ligero.
Se define un directorio de trabajo y se copian los archivos package.json y package-lock.json.
Se instalarán las dependencias de Node.js y se ejecutará ngcc para compatibilidad con Angular Ivy.
Se describe el uso de un archivo .dockerignore para excluir archivos y carpetas grandes que no necesitan ser copiados en el contenedor.
Se ejecuta el comando ng build para crear archivos estáticos y se aborda el manejo de errores relacionados con el tamaño del paquete.
Se crean archivos de entorno para diferentes configuraciones de desarrollo y producción.
Se utiliza el archivo angular.json para configurar el reemplazo de archivos de entorno durante la compilación.
Se resalta la importancia de configurar correctamente las variables de entorno en los servicios de la aplicación.
Se crea un archivo docker-compose.yml para orquestar el contenedor de la aplicación y se explica su estructura.
Se aborda la solución de problemas comunes con aplicaciones de página única al refrescar la página o acceder a rutas específicas.
Se muestra cómo corregir la configuración de Nginx para servir correctamente las aplicaciones de Angular.
Se discute la implementación de configuraciones de Nginx dentro del propio archivo Docker para evitar la necesidad de modificarla manualmente.
Transcripts
what's going on guys this is Junior here
and today I'm going to show you how to
decorize an angular application this is
the application that we have built so
far and it's the one that we're gonna
use to dockerize and if you want to know
how we actually build this application
you can just check out the videos on the
channel then you will know how we
started working on this application and
how we built it from scratch literally
adding all the functionalities that you
see here so I'm in my profile right now
and I can update my information if I
click here I can just change anything
that I want here and then I can update
it you can see that I have a
notification and then the account
activity is popping up here and I can
also change my password give the current
password and pass in a new password I
can change my authorization so I can
change my role so if I change my role to
admin for example and then I click
update you will see that my rule will be
updated and also the permissions will
change and if you notice you see that I
don't have the delete permission for
customers and users back to rule
sysadmin which is the highest permission
and then I saved that information again
then you'll see that my permission will
be updated you can see that I have the
delete permission so I can delete
customer and I can delete user and I can
also update my account information so if
my account is locked and if it's active
and also authentication so if I want to
show the logs as you can see here I can
just click on this checkbox and it will
disappear or appear and I can also
enable multi-factor authentication so if
I enable multi-factor authentication
when I'm going to log in it's gonna send
me a text message with a code that I'll
need to put in but I'm going to go ahead
and disable that because I wanna I don't
want to have to go through this whenever
I'm logging in and I can also update my
profile picture so if I change this
picture here it will change here as well
as in the nav bar and also if I go back
to the home page I can manage all of
these customers so I can go to this
first customer for example then I can
update their information if I need to I
can add a new customer so I can do new
customer and then I can pass in the
customer information I can see all the
customers again and I can sort them and
I can also add a new invoice you know I
can select the customer and then pass in
the information the data Etc and I can
also see all of the invoices as of right
now I don't have any invoice so it's an
application that we build to manage
customers in their invoices and we can
also manage our account and that's what
I showed you in the beginning so we can
go here and then manage our account so
that's the application that we're gonna
be dockerizing so let's go ahead and
work on that right now so let's go back
to the code of the front end and the
first thing we need to do is to create a
Docker file so I'm going to right click
here or you can click on this icon right
here and then create a new file so here
we're going to create the docker file so
Docker file okay and for the docker file
it's actually going to be pretty simple
because we're just going to need a node
image and then copy everything inside of
a nginx web server so I'm going to see
from we want to get node if you want to
know what version of node that you want
to have here you can just Google it and
see what the latest version is or you
can just leave node like if you leave it
like this it will just get to the latest
version which is fine in a lot of cases
but the reason that you might not want
to do this is because if you keep this
file like this so the docker file if you
just skip it with just from node which
means every time it's going to get the
latest version of node then it might
break something in your application so
if there is a new version of node.js and
there is breaking changes then it's
going to break your application because
it's gonna get the latest version so
it's best to specify a version that you
know your application works with just
fine so that you don't have to worry
about a new version breaking your
application and if you just want to know
what you need to do here I can just go
back and then I can just say node.js
just Google it and then go to the
official node version and you can see
it's 18 17 1 which is the long term
support so we can just pass in this
number as the version of node that we
want to have in our application because
that's the version that I have in my
computer and I know that with this
version the application is working just
fine there's nothing and that is broken
okay so that's the that's usually what
you want to do you want to specify the
version that you know your application
works with just fine so that later
version of node doesn't introduce
breaking changes on your application so
now we can just say we know that our
application is going to run with version
18.17.1 and we can get an Alpine version
of that which is just going to be like a
smaller build for that particular image
and then we're gonna assign it as a
build okay so we're just defining a
reference to this entire thing so that
we can just copy the files that we need
so very similar to what we did in the
back and then I'm going to define a
working director so I'm going to see uh
word der and then I'm just gonna Define
this as app and the reason I like to
define a working directory is because if
I need to go inside of the running
container then I know exactly
um what folder I need to go to to see
the files that I'm going to copy inside
and then here we're just gonna say uh
after that we want to copy the
package.json file so I'm going to say
package that and then we're going to put
a well I have to put a star first
because we also need the lock file and
then that Json so it's going to copy
both the packet.json file in a package
Dash lock file so this other file here
this one right okay maybe I should just
leave this open in this situation and
then we're just gonna say that for slash
which means it's going to copy it inside
of this working directory because
everything we do now from this point
forward like everything we copy they
will go inside of the working directory
that we Define and then after that we're
gonna run npm install so that we can
install all of the uh node module
dependencies and then after that there's
a very important command that we need to
run and that's the npx ngcc and then
we're gonna say properties and I want
the
es2023 okay so you're going to see 2023
and browser module Main and then we want
to do first only and also dash dash
create dot IV
that entry that points okay and I have
to explain what this command is doing
but before I do that let me start from
the beginning so we're saying we need
the node version 1871 Alpine which is
just a smaller bundle of this version of
node and then we're going to give it an
alias which is going to be built the
reason we're going to give it an alias
is because we're gonna ditch this part
of the building of the image and then
just copy the result of this entire
process so we're gonna need this name to
reference this build and then copy the
file that we want and then put it in
another nginx image or container
whenever we run the container because
ultimately we don't want a node image as
the base of this image but we want an
nginx okay so maybe when it's done I'm
gonna go over it again then it's gonna
make more sense so we say get us this
version of node we're gonna give it an
alias of build we're gonna Define this
directory which is just a folder we're
gonna copy the package.json also the
package lock.json and to this app that's
what this dot forward slash means and
then after we have the packet.json files
and the package Dash lag file we're
gonna install the dependencies so we're
gonna run npm install and then after we
do that we're gonna run this command and
this is the command that I really need
to go over so that you understand what
it's doing now you don't really need to
do this but it's just the safest as of
right now so you're in a better position
when you pass in this command then when
you do not and so what exactly is this
comment doing so what this is doing is
fairly simple but it's just a very long
command so we're running so that's
coming from Docker so this run here so
all the ones in blue and capital letters
they're a keyword coming from Doc so
Docker is going to run this command and
the MPX is also coming from the node
package manager it actually stands for
the node package executor so what this
means is it's simply a package Runner so
everything that exists in the npm
registry we can just execute that using
the MPX and what we want to execute in
this case is the ngcc so so far so good
we're invoking this node package
executor which is going to allow us to
execute some command or execute some
package that is available in the npm
register and in this case that's the
ngcc so you can already see the NG here
which gives you a hint about something
being of the angular CLI and if I put a
space here you can see that just that's
just the engine command and then CC
which stands for the angular so the NG
here you can just see that's the angular
command or the CLI prefix and the CC is
the compatibility compiler for angular
so the ngcc which is the angular
compatibility compiler is a tool used to
compile libraries that have been
published in the Legacy format and you
use this when these libraries are not
compatible with the angular IV runtime
so that you can format them to uh to a
format that is compatible with the IV
that you can see that I'm mentioning
here now I don't want to get into all
these details of the IV and all that but
I really want you to understand what
this means and why we need to do this so
that's why this two parts are doing and
the properties flag which you can see
here because you have the dash dash so
that means this is a flag it's just
specifying in the format so all the
packages will be processed in this es23
which is just the ecmascript 2023 which
is just a version of JavaScript so we
want the 2023 and the browser module as
Main and the first only flag means that
ngcc is going to process the first
property that it finds in the
packet.json otherwise it will just
process everything all the format in
JavaScript so things like es2015 or esm
2015 like there's a default value that
it will use so that's why we're
overriding it with this dash dash first
only in this create IV entry point
that's just gonna tell the ngcc command
to create new properties for the IV
generated entry instead of overriding
the previous one so that's what this
flag is doing and all this coming is
doing as a whole is to make sure that it
takes non-iv libraries and generate
files that ivy can understand and this
is really just a browser thing so that
the Javascript file generated when we
run NG build to build this application
so that they can be compatible with most
browsers so that's why we're doing this
command here but don't worry too much
about it just understand that it's
somewhat important so far at the time of
recording this video which is in
September 2023 then you it's safer to do
this than not to do and then we want to
copy everything else so we're going to
say copy that and then dot so copy all
the rest of all the other files so all
of this is going to be copied inside of
the app folder and then lastly we're
gonna run npm oops not in npm run build
so you might be asking where is this
comment coming from so if I open the
packet.json you can see when we run the
npm Run build then it's going to run the
NG build which is going to build the
application it's going to create a
folder named secure Capital so whatever
the name of the application is going to
create that folder here and then it's
going to put all the build file inside
of this folder by this name and I'm
going to run this command uh in just a
moment so that you can see the result of
it so that is the first part of the
build that's what you call a multi-stage
build uh Docker file so after that what
we want to do we want to go and get an
image for nginx so we're going to say
nginx and then we want to get the stable
version of nginx and then we want to
copy from so we're going to copy from
what we defined up there so we're going
to say from the build because everything
we did up until this point we don't
really need it anymore we just need the
result of running this command so we're
gonna see we're gonna copy this time
we're copying from build so copying from
everything we just did here and we want
to copy from inside of the app folder we
want to copy everything that we have
inside of this name here and this is all
going to make sense in a second and we
want to copy this inside of the USR
share and then NG next
forward slash HTML so for the nginx web
server you want to serve your static
files inside of this folder so that's
nginx stuff so this is coming from nginx
and we're just copying all of the file
that resulted from this build that we
know that will be located inside of the
secret Capital app how do we know that's
going to be the folder because when you
run NG build it's going to look at the
name of the project and then put all the
files inside of this folder so we go
inside of the app that's what we're
working with from the build that's what
we Define from build and then copy
everything and then place them inside of
the nginx folder for serving static
resources in this case that's USR share
nginx HTML and then lastly we want to
expose Port 80. oops expose okay so you
know this is a web server serving HTTP
and that is done well it's not always
done over Port 80 but the default is
0.80 and that's just to serve the static
files that are going to be generated
from running npm run build so hopefully
this is coming together and we're gonna
continue in the next lecture so you guys
know that inside of the docker container
we're going to be copying everything as
you can see on line six here but we know
that we never want to copy this big huge
file that contains all of our
dependencies and the dependencies of
these dependencies because this file is
huge that's part of the reason we have
the packet.json file because we Define
all of our dependencies here so that we
can install them again with npm install
so what that means is that whenever
we're gonna copy everything over inside
of the container or to create the image
we know that we don't want to copy this
node modules folder so what we're going
to do is to Define another file called
that Docker oops
Docker ignore so this file is similar to
a git ignore file and here we're going
to Define everything we don't want to be
copied whenever we're running this copy
command so whenever we're going to copy
stuff from our local computer to the to
inside of the container then it's going
to look at this file and then it's going
to skip everything that we're defined
inside of this file so for example node
underscore modules will go into that
file because we never want to copy this
huge folder inside of our container
because whenever we run npm install then
it's gonna just reinstall them again
reaching out to the internet and then
recreate this folder so we never want to
copy this folder anywhere we only want
to run npm install and then that's going
to read our Json file or the packet.json
file and it's going to install all of
these dependencies so we're going to
pass this in there there's other things
that you can pass in there so things
like that git or the license or readme
file so everything that you really don't
want to copy over to The Container then
you would pass them inside of this file
so what I'm going to do is to just give
give you a standard DACA ignore file
that you can use for node.js so I'm
going to just select this and then paste
it in here and all this is doing is it's
just passing in the files and folders
that we never want to copy over inside
of the container so you can see
distribution node module that git folder
readme license Etc and you can put
whatever really you want inside of this
so for example if I didn't want to copy
this editor config file I could just
pass it in here so this is no big deal
so that's the docker ignore file really
very important because otherwise
whenever we're gonna try to build an
image from this background file copying
this huge file is going to make it slow
so you might think that there's
something wrong with your Docker file
but in reality it's just this file is so
big and we never want to do that so
that's what this is doing okay so you
can just keep this for all of your node
projects you just paste it in and then
you should be good to go whenever you're
creating a diagram so that's it for the
docker ignore file it's similar to a git
ignore file so this file that
here so everything that we don't want to
push to a git repository we're just
going to place it in here that's
literally the same idea but for Docker
as you can see okay so that's what we
have to do for the docker ignore file
the next thing that I want to show you
is what's going to happen when we run
this NG or npm run build command Okay I
want to show you what's going to happen
to the application whenever we run this
command so that you understand why we're
copying from this folder and then
placing everything inside of the nginx
folder so let's go ahead and work on
that next so I'm going to go ahead and
bring up the terminal and I'm gonna do
Ctrl C I'm also going to show you how
we're going to get rid of all of these
warnings because I know I've been seeing
this for a while now but before I'm
gonna clear the screen and you can
either do NG build that will do the same
thing and the reason this will work is
because we have the angular CLI
installed so if you go inside of the
packet.json and we go to our script so
if you do NG build then you will just do
this run this build or you can do npm
run build as the same thing so let's go
back to the terminal and we're gonna do
NG build or npm run build it's the same
thing so I'm gonna run this and we're
just gonna give it a second to finish
and it's over but it wasn't successful
okay so you can see here it tries to
generate the bundles and then at the
very bottom it says we didn't meet the
budget so the maximum budget and what
this error means is that we are watching
how Big the bundles are and there's a
default configuration in the angular
application that sets the size of the
bundle to a certain number and what that
means is that whenever we're gonna build
the project like we're doing here with
the NG build if the bundles are bigger
than what we Define in the configuration
then it's going to give us this message
so this is just a nice way that you can
keep watch on your angular application
bundle size okay so let's go ahead and
just change that real quick so if I go
back to the angular application I can go
inside of the angular.json file and if I
scroll down or there it is so you can
see here we have this budget it's an
array and you can Define the initial so
the initial is what fails because it's
1mb I think it was bigger than that yeah
so budgets 1 MB but was not met by
50.58 kilobytes so that means it was
more than one so what we can do I mean
this isn't really a big deal for me but
some people are really careful about how
big the bundle size are because that can
affect their performance but in my case
I don't really care about this too much
so I'm gonna make sure everything is
like at least two so I'm gonna change
everything here to 2 megabyte okay
because I don't really care too much
about this budget thing or if you want
you can just get rid of it all together
if your application is that big but it's
a good thing to use if you have a big
team and A lot of people are working on
the same application so that you make
sure that you control to some degree the
performance of your application by
looking at the bundle size because the
bundle size is important for the initial
load of the application whenever the
application is loading the bra is going
to download all these bundles so if
these bundles are too big then the app
is going to be slow because the browse
is going to need to take more time to
download these bundles and if the user
internet is not very good then it can
take a very long time and that's just
gonna make the user experience even
worse so that's what this is so now
let's go back and just run this command
again gonna bring back the terminal
gonna clear the screen and then run NG
building and just give it a second to
finish okay so it's over and this time
you can see that everything was
successful and if we go back now to the
application and let's close all these
files and go back here you can see now
we have this distribution so this
distribution folder was created and if
we open it we have a folder by the same
name of the application so you can see
secure capital and then it has all of
the static files that were generated so
these are the files that we're going to
copy if I open the docker file so we're
going to copy all of these files as you
can see here inside of the nginx HTML
folder and also we need to pass in
distribution here so the IST forward
slash okay because they're inside of
this distribution folder inside of this
secret Capital which is the name of the
application like this name that is
defined in the packet.json file this
name right here okay so these are the
same right here okay you can see we are
targeting these files we're copying them
over to the nginx server so what this
means is that whenever we complete all
of this we get node we create this
folder copy the package.json file
install of the dependencies run this
command for compatibility copy
everything else and then run the npm Run
build which is gonna do exactly NG build
and it's going to create these files for
us and then we're gonna say from this
first page so from all of this which
will result in this folder being created
with these files we're gonna copy
everything from the app that
distribution so the app is the working
directory because that's where
everything is copied and we want to go
to distribution secure capital which is
going to give us access to all these
files and then we're going to copy
everything over to the nginx HTML folder
which is where we serve static file in
the nginx server and then one last thing
we can do so you can see here we have
this NG build we can also pass in a
configuration for production so I can
copy this and then paste it here and
then pass in production so whenever we
run NG build you can add as many of
these scripts as you want but since I'm
going to be running NG build or npm run
build for this script then it's going to
run this command which in this case will
set the configuration to product and I'm
going to show you why we're sending this
to production actually this can be any
name that you want it doesn't have to be
production but I'm going to show you how
we're going to use this in an
environment because we can have
different environments whenever we're
building the application either for
deployment for production or deployment
for development whatever the case might
be and angular can switch different
environment files and then apply the
properties in these files whenever you
run the application in a specific
environment so that's what I'm going to
show you how to do next so what I'm
going to do is I'm gonna just collapse
this actually I can just delete this
folder altogether so let's just go here
and I'm going to do remove
recursive Force verbose so that I can
see everything and I'm gonna pass in
distribution so that's going to remove
this folder and everything inside it so
I'm going to press enter and you can see
it's removed clear the screen and if I
go back this folder is removed from here
so what I'm gonna do is I'm gonna go
inside of the source folder and then I'm
going to create another folder and then
I'm going to call it environment
so before by default whenever you use
the angular CLI to create an angular
application this folder would be created
by default like it would be here by
default with the angular CLI but for
some reason they don't do that anymore
but you can still use it as you can see
that I'm doing here I'm defining it
manually and then inside of here we can
have environment
dot TS and then we can have another file
which is going to be the
environment.prod so here we can see
environment
.prod.ts so we have two environment
files one for development you could name
this
environment.dev.ts it's really update so
but this used to be the default that
comes with the angular CLI whenever you
build an angular application with the NG
new commit that's no longer the case and
I have no idea why so inside of the
environment.ts file we can just Define a
simple uh object so we're going to say
export cost and then we're gonna say
environment
and then we're going to set it equal to
an object and then all we have to do is
to Define whatever we want but one thing
that's really important is the
production flag so we can see production
and we need to set this to false because
angular is going to need to read this to
determine what it needs to do with this
file so we're going to set this to false
and then we need to pass in the API
underscore base underscore URL
I'm gonna set this to whatever we have
inside of this service so inside of the
service remember in the customer service
we have this string here so we don't
need to pass this in like hard coded
like this so I'm gonna cut it and then
put it in here okay so this is going to
be the environment of my local computer
so this computer that's where the
backend application is running so you
can see here okay so that's running on
my local computer if I scroll up you'll
see there it is sorry application on
port 8080 and I know the IP address of
this computer is this IP address that
you can see here
19168.1.209 that's my local IP address
and another thing worth mentioning is
I'm using the local IP address because
this is going to be deployed in a darker
container and by default Docker is going
to define a bridge Network and the
bridge network has a switch that
connects to your local network so that
this application will be able to resolve
this IP address okay so don't put
localhost in here just get the IP
address on your local network and then
pass it in here instead if you put
localhost then it's gonna look at the
host container which is not gonna work
for you okay so make sure you put the IP
address in here so in the regular
environment file we just Define
production to be false and then pass in
everything else that we want in this
case we just have one other environment
variable which is the API based URL and
I'm defining it here so now all I can do
is just copy everything here and then go
to the prod paste and then just change
this to true so that's the prod in our
case the URL is going to be the same so
we're just going to keep the same URL so
now inside of the customer service we
need to pass in this environment
variable coming from this environment so
also notice they have the same name so
API based URL and also in the production
it's API b0 in our case it doesn't
really make sense because the URL is the
same but just imagine that inside of the
production environment so this file
right here this was pointing to the
production URL so it's angular that's
gonna do the switching for this files
and use the different environment
variables so now we're gonna go inside
of all of our service and then just read
that environment variable from the
environment file so instead of passing
an empty string I'm just going to call
the environment so we're going to see
the environment as you can see here and
then we're going to pass in the API b0l
okay it's the same name this is really
important and we're going to do the same
for the we don't have anything in the
service that's making HTTP call nothing
in the notification service either but
we do have something we can call in here
and we're just gonna change that as well
and make sure we import the environment
okay so we import the environment coming
from the environment so the one for the
dev or the non-prod but whenever we run
the NG build with the prod flag then
it's gonna do the switching for us so
now this is all good I'm gonna close
these files and there's one last
configuration we have to do before when
you create an angular application with
the angular CLI so using angular NG new
command it would do all of this for you
and they changed it in these newer
versions of angular so I'm not sure why
because I still use
um this setup the way it is maybe it's
because they want to start off with less
files and you just Define these if you
want them so this might be the reason
but in any case we need to go inside of
the angular.json file and tell angular
about the switching of these files
otherwise it's not going to do that so
you want to go inside of your
angular.json file and also by the way
this is a very important file for the
angular ecosystem or an angular
application this file right here the
English that Json file so instead of
that file we want to scroll down and
then go to configuration and in
configuration you can see we have the
production object here it only has the
budget so instead of here we can do
something called a file replacement so
we're going to do file replacement you
can see it coming up here and it's on
array so in here we're gonna say we want
to replace so we're going to say replace
we want to replace something in the
source forward slash environment
for a slash environment that TS I think
I need to rename these so inside of the
source this is supposed to be
environment so let's rename this to
environments okay so because it's
multiple environments so this is
supposed to be environments so Source
environment and then we want to switch
the environment.ts file to a new file
which in this case is going to be oops
the prod file so we just copy this and
then change it to prod.ts
and then we want to say with it's very
intuitive so we say for file replacement
which is a configuration we're giving to
this angular.json file look for this
file replace it with this file and we
want to do this when the configuration
is production okay so instead of the
production object this yellow open curly
braces here so when the configuration is
production configuration production
switch the environment file to the
product okay so that's all we have to do
here and I think we should be good to go
now everything should work just fine the
only thing we have left to do is to
create the docker compose file just to
make it easier to run containers using
this Docker image and this is going to
be just like a few lines of code so
let's go ahead and work on that right
now so I'm gonna go ahead again click in
this file explorer here and create a new
file this time it's going to be the
docker compose file so we're going to
say Docker compose that EML press enter
and then we're going to Define our
services so we're going to say services
and then we're gonna see a this is the
secure Capital so that's the name of the
service and then we need to pass in a
container underscore name uh we can say
secure copy the app container this is a
long name I should change this also to
app this is a weird name because we have
like two A's touching each other so you
can come up with a better name so we're
defining our services and the first one
is going to be the secure camera or the
only one because that's the only service
that we're gonna have in here the
container name whenever the container is
created it's going to be secure Capital
app container and then we're gonna
Define the build so we're gonna say
build
a DOT to denote the current directory
because that's where the docker file is
if the docker file was in a folder we
would say you know folder name
folder that blah blah blah okay in our
case it's in the same directory so we
just put a dot and then the image is
going to be uh secure
Capital app V1 like version one or
latest if you want and then we're gonna
Define some Port so we're gonna say
ports which is on array and then we're
gonna see we're gonna map 80 to Port 80.
so map 80 under container which we're
exposing here because that's what nginx
use we're also mapping it to Port 80 on
the host okay and we expose
so that's import
ant and also Define a network so
Networks
and this is going to be the same network
so internal net and then I need to
Define this network so we're going to
say Network or networks and then we're
gonna give it the same name so
copy paste we can give it a driver so
we're gonna say
driver
Bridge that's the default anyway but I
just like to specify it so all this is
gonna do when we run Docker compost up
it's going to look at this Docker file
build an image and then run the
containers expose the sports so that's
all we have to do for this Docker
compose file as you can see it's just
really just 16 or 15 lines of code and
that's all we have to do here so
everything is pretty much done the only
thing we have to do now is to run this
container and see everything in action
and that's what we're going to be
working on next so the last thing that I
want to show you is how to get rid of
all these errors that we've been seeing
in the application so let's close
everything here and I'm just gonna bring
back the terminal and then we're gonna
run the application and just so that we
can see them so I'm going to do NG serve
and then let this finish okay so it's
over and you can see we have all of
these warnings for external dependencies
and all we need to do is to pass them in
as we gonna allow them as common
JavaScript dependencies so we have to go
back to the application and open the
angular.json file and we already started
doing this we just didn't finish it so
let's cool up a little more so you can
see here we're passing in the jspdf so
the jspdf is a library that we brought
in to help us with the PDF generation so
what we want to do is to also pass in
the file saver that's another library
that we brought in let me see if I can
grab the package.json file and put it on
the side so if you scroll down in our
dependency we have this one which is an
external Javascript dependency so we are
allowing it as an external Java
JavaScript dependency also the file
saver so I'm passing in the file saver
but the thing with this is it also
sometimes complain for dependencies of
these dependencies so if jspdf or
fastsaver has a dependency on some other
library then sometimes it's going to
complain for it as well so all you have
to do is to just look inside of the
terminal and see what those dependencies
names are and then just pass them inside
of this array so let's go back and
scroll up so you can see they're still
here but I'm going to stop and rerun I'm
gonna fast forward the video so that you
don't have to wait for this and if I
scroll up so it's over we still have
some and if I scroll up you can see now
it's complaining for this gorgeous
module so you can see core core core all
of these are core and then there's a
raft and then there's a RGB color and
then there's this uh don't purify and
then this HTML canva so we just need to
pass all of these in so let's do Ctrl C
so I'm just going to copy them one by
one and then I'm just gonna put them in
so I'm gonna copy this gorgeous thing go
back go here get another entry in this
array which is core.js oops I don't need
this single quote and then we're gonna
do it for the next one which is Raf so
copy that go back pass in ref and then
we need to do it for RGB color copy that
and then
bust this in here and also for the uh
this dumb purify copy that I can close
this now and pass it in here
lastly we're gonna do it for the HTML to
Canvas to copy that and then we're gonna
paste it in here
just like that okay so now it shouldn't
complain anymore so let's just give it a
try here just to make sure we're good so
NG serve and then let it finish all
right and you can see now we don't have
These Warnings anymore so it's really
just look at the warnings just see what
the dependency is sometimes it's not the
dependency that you install but a
dependency of the dependency that you
install so just grab the name and then
put it in the allowed common JS
dependency as you can see and I know I
say I would do this I just keep
forgetting but that's how you solve this
okay so now everything looks clean and
they just make you feel good because I
was having a hard time dealing with this
errors all the time okay so the next
thing we're gonna do is to just run this
container using this Docker file in the
docker compose and then see everything
in action so that's why we're going to
be working on next so I log into my
Linux computer and I actually log inside
of another machine which is the same one
that I was using to deploy the back in
because that's why I have darker install
so if I do Docker it's going to give us
something because I have darker install
and if I clear the screen and I do you
name Dash a for example you can see that
I'm using a Linux computer so obviously
it's not this Mac that you're looking at
I'm just sshing inside of this computer
that you can see here okay so that's why
I have Docker install and I have also
added the application in there so we can
do secure copy that just so that we can
go inside of this application and if I
do an LS here you can see we have all of
our files so the docker file is here and
the dock compose file is also here so
now all we have to do is to run the
direct compose command and then launch
this Docker container so I'm gonna do
backer
Dash compose
that up Dash D and then we need to
pattern dash dash build because we have
a Docker file that we need to build so
the same command that we use in the back
end we're just going to use the same one
here so what this is going to do it's
just gonna create the darker image and
then run that image with the
configuration that we gave it instead of
the docker compose file so I'm going to
go ahead and press enter and we're just
gonna let this finish this can take a
minute because it needs to pull images
from the internet so let's just give
this a second to finish everything is
finished you can see we have the steps
that we've ran and the darker image was
created the container was started and
the network was also created so now I'm
going to go ahead and clear the screen
and just do Docker PS and we want to
grip for the
secure copy that so I can just say
secure and then press enter as you can
see here it says it's up 26 seconds ago
so it's up and running and another thing
I can do is I can do darker logs and
then look at the logs so in this case I
can pass in the ID of that container so
that ID that you see here or I can pass
in the name of the container which is
the secure Capital app container and
also I want to point out you can see the
image that was used is the secure
cabinet app version one which is the
image that we specify and the docker
compose file so the name of the email so
if you want to see the log we can do
secure Capital container you can see
these are the logs coming from inside of
that container here so if we go to the
browser and we and just access the IP
address of this computer we don't even
have to pass an 80 because that's the
default for HTTP then we should be able
to see our application so I'm going to
clear the screen again and then do
hostname Dash I so that we can see the
IP address of this computer so the first
two IP addresses and those are the one
that we're interested in everything else
that you here this is just IP addresses
coming from the the docker engine and
the reason I have two IP addresses
because I have this computer connected
to the Wi-Fi and also to the network
using a cable so I can just copy this
right here oops I didn't mean to do that
but I need to copy this and then I'm
going to open my browser then I'm gonna
bring it over here so we need to go to
192.168.1.164 or 216 should give us the
same thing so if I press enter here you
can see the application is running so
it's deployed using Docker and it's
asking me to log in now remember this is
using the backend that is connected to
my computer running on the same network
because I didn't pass in localhost so I
should be able to access this
application if I use the same credential
Outlook gmail.com and then one two three
four five six so if I press enter and
just give this a second and you can see
that I logged in successfully so now we
know that everything is working and the
application has been containerized so I
can go to my profile I can update the
information I can do everything that I
was doing before so everything should
work as expected you can see I can
update my MFA I'm gonna disable that I
can go to my profile and make an update
here
and then I can save everything should
work as expected I can also update the
customers so you guys can feel free to
change whatever you want
I'm gonna change this to Gmail update
I'm just doing random stuff at this
point because you know uh if I do rig
you can see that everything is working
go back to the home page so the
application has been fully containerized
and everything should be working as
expected you shouldn't have any problem
now there's one thing that I do want to
show you and I'm going to show it to you
right now so if you look here you can
see that I'm looking at the specific IP
address because I'm in the root or the
home page of the application so if I
refresh this you'll see that the
application just refresh like normal
however if I for example go to my
profile and I try to refresh the
application you can see now I get this
404 not found now this is a problem that
you probably gonna find in all of the
main Frameworks the JavaScript framework
so angular react.js and also a view
because the navigation is done in the
front end and not in the back end and
what happens when we try to refresh the
page and we go to forward slash profile
or forward slash anything for that
matter we get a 401 not found because
the nginx server could not find this
path on the server so what the browser
did the browser sent this request all
the way back to the server requesting a
file by that name which doesn't exist
because this is a single page
application we only have one index file
so it's angular with the browser that is
managing this navigation or in other
words just JavaScript that is managing
the navigation it's looking at this path
and then deciding what piece of UI to
show in the application which is why it
works uh like if I refresh the home page
which is going to serve the index file
by default and also if I click on a link
which is being managed by the angular
router so angular knows exactly what I'm
trying to do so it takes me there but
when I refresh the browser the browser
actually send this request all the way
back to the server so the nginx server
requesting a file by that name profile
which doesn't exist which is why when
refresh not found so there are many ways
that you can handle this but we're just
gonna do it the simple way which is to
always serve the index file no matter
what path that is serve here so this is
a problem that I had for a while and I
was using the Apache server before and I
fixed it on the Apache server and now
I'm using the nginx server and I also
fix it on the nginx server so you cannot
deploy your application this way so for
example if I look at this first customer
here and then I refresh the page and
then the page is broken so obviously you
cannot have your application this way so
that's what I'm gonna show you how to
fix in the next lectures and if you want
to go back to have the application
running so that you can see something
you just have to go back to the root so
this route right here and then refresh
it because in this case the browser is
going to request the index file
index.html which we do have on the nginx
server which is really the only file
that we have so if I refresh this you
can see now I work so I'm going to show
you how we can fix this problem it's
really just a simple fix but it's really
important because you can't have your
application breaking like this so that's
what I'm going to show you how to fix
next and this fix is going to work for
react.js and possibly for you I haven't
worked with View at all so I'm not
entirely sure but single page
application JavaScript Frameworks will
have this problem so this problem exists
and angular it also exists in react.js
and I'm going to show you how to fix it
using just the nginx server for the
Apache server it's a little bit
different because the configuration is
totally different but the solution is
similar you just want to always serve
that one index.html file because that's
the only file that we have in the nginx
server all the other files are
Javascript file and the browser cannot
serve these files the browser can read
these files but it cannot serve them and
then show them as the UI so that's what
we need to fix so I'm gonna go back to
the terminal and we're gonna go ahead
and take a look at this so what we need
to do we need to go inside of the
container so if I go up a little more
we're gonna grab this container so the
secure Capital container press enter so
you can see that we have this container
running right so that's the application
that we have running so now we need to
go inside of this container and we can
do that using the docker exec command
and then we pass in the interactive mode
and we pass in the name of the container
so the secure Capital container and then
we want to execute the bash shell so to
do this we just do bin Dash bash which
is the location of the shell and then
we're going to press enter you can see
now my prompt just changed because now
I'm inside of the container so I'm going
to clear this and if I loot LS you can
see that we have some files in here and
I'm also going to see if I can minimize
this okay just so that we can see this a
little better and then I need to go
inside of the four slash
Etsy and we want to go to the nginx and
if I list everything in here you can see
we have this conf.d so that first folder
here right here and that's what we need
to go into so I'm
cdconf.d and then LS so you can see in
here we have this default.configuration
so that's a configuration that nginx is
using and also if we go to the main
configuration so this nginx config right
here uh let's see if I have VM so nginx
okay I don't have them let's do update
so that we can well need to do apt
update because I need to install them so
otherwise we won't have any text editor
so I'm gonna do apt install them you can
install Nano if that's easier for you
but at this point you're inside of a
container so now you really will see why
you need to uh to some level be able to
use the terminal because I cannot use vs
code inside of the dagger container so
let's clear this in LS again so we need
to go into this
nginx configuration so this is the
configuration and you can see at the
very bottom if I scroll to the bottom
you can see here here they're including
everything that is inside of the conf.d
folder okay so everything that we put
inside of this folder will be included
in this file so what this means is that
we don't have to touch this file
directly I mean we can but we don't have
to so if I LS again so we don't have to
touch this file we just have to put
whatever configuration we want inside of
this folder so if I list everything
inside of this folder you can see it's
gonna look for everything that ends with
conf and then included inside of this
file which is what I just showed you so
if I do an L nginx if I don't know if I
oh I have NL so you can see here at the
very bottom on line 20 that's what it's
doing say include everything inside of
this itsy nginx conf.d everything that
ends with cough in that case this file
will be included inside of this
configuration so let's see what's inside
of this file so I'm gonna clear the
screen again and then oops I'm gonna go
up so LS we want to go inside
D and then LS and then Vim go to this
and I'm gonna go here well not here
I'm gonna go down here and then I'm
gonna say try underscore files and again
I'm going to put a dollar sign I'm gonna
say URI and I'm gonna say forward slash
index.html and then put a semicolon so
every time that it cannot find a file
it's going to go ahead and try this
index file so in this case that's always
going to return the index file whenever
it cannot find the file and then angular
will handle the route that is present in
the URL bar in the browser so that we
don't have this problem anymore so just
telling nginx to try the index file
whenever you cannot find the file that
is being requested by the browser so try
files dollar sign URI and then forward
slash index.html so now I can save and
quit and I'm gonna exit out of here and
then I'm gonna clear this and then we're
gonna restart the container so I can see
Docker restart and then we're gonna say
secret copy and then press enter and
then now we can do Docker PS and then
grab that secure copy that again
you can see now it's running so I'm
gonna bring back the browser and I'm
gonna move it over here and if I refresh
this everything should work as expected
but now if I for example go to my
profile and I refresh the page you can
see that it's not giving me this photo
or not okay so if I can keep refreshing
it you can see that it still works the
same and I can update my information
well let me just delete this part so
that you can see an actual update so I
can update that and it should work the
same I can go to the customers again I
can update them everything should work
as expect okay and well if I go to this
customer again and then refresh the page
and can I can keep refreshing it it's
not giving me this snap because it's
returning the same index file and then
angular is handling the route that is
present here okay so that's what we have
to do for this and the last thing that I
want to show you is you saw that to fix
this problem we have to go inside of the
container and update a specific
configuration file so that is definitely
a lot of work so what I'm gonna show you
is how you can just create that
configuration and you can just copy that
file over whenever you're going to build
the docker image and then run the
container so that you don't have to you
know separately go inside of the
container and then do that every time
obviously that wouldn't be a good idea
so that's what I'm going to show you how
to do so that we don't have to do this
manually I'm just going to show you how
we're going to take that config file and
then just copy it in that particular
location so that we don't have to deal
with this problem in the first place so
that's what I'm going to show you how to
do right now so I'm going to go back to
the terminal and what I'm going to do is
do condacker
Dash compose down so this is going to
destroy everything so it's going to stop
the containers and then remove these
containers now I'm also going to remove
the image so I'm going to say Docker
image RM and then I'm gonna say secure
copy that version one and then remove it
I think you can do Docker RMI for remove
image that should work as well I'm gonna
say Docker image rune so that we can
remove any dangling image and then I'm
gonna say Docker Network
prune gonna do the same thing so clean
any dangling image and networks that we
weren't using and then clean this so at
this point this application should be
broken so if I go back and refresh the
page you can see it's broken and we
clean everything so back in the terminal
I just need to go inside of the darker
file so I'm going to say vim and then
Docker file
and then I'm gonna scroll down so
whenever we get the nginx image I want
to go ahead and then copy the
configuration file so to do this I'm
going to say copy and I'm going to copy
a file name default dot conf okay and we
need to copy this file in that same
location so we're gonna say Etc forward
slash nginx for slash conf.d okay so
we're just gonna copy this file inside
of this folder now we don't have this
file yet but I'm just going to show you
what that file will look so I'm going to
save that so we're technically doing
everything else but the only difference
is after we get the nginx table image so
that's happening on line eight as you
can see I'm highlighting here then when
I copy this configuration file that we
don't have yet but we're gonna create it
which is I'm gonna call default.conf and
we're going to copy it over to that
particular location because we know
that's where it belongs so I'm going to
save this and then I'm gonna quit and
then I'm gonna create this file so I'm
gonna say vim and I'm gonna say
default.conf so this is the file you can
see at the bottom that we just created
this file and then I'm just gonna go
ahead and paste it just to see what it
looks like so this is what the file
looks like it's literally the same
configuration I just really copied it
from inside of the container and then I
just paste it here and then I just add
this line on line 9. so just say try
files that'll sign URI and then the
index.html so that way we know that
whenever we're gonna run this nginx
container it's going to copy this
configuration file and it's going to
make that one change on line 9 so that
we don't have to do it ourselves as you
can see that I'm highlighting because
it's going to override the existing file
that is going to come with the container
image itself so we're just overriding
that one line as you can see here
everything else is the same okay and I
don't think we need that part here at
the bottom because we don't have any 500
HTML file that we return but I just left
them here it doesn't really matter but
if you want you can clean this up as
well this is what's really important
that location and all the way to the
closing curly bracket here and we just
added this line nine okay so hopefully
that makes sense and also if you want
you can remove this
index.htm so I can just really remember
of that because we only have the
index.html we don't have any HDM file
okay so always serve the index.html and
if you can find anything just return the
index.html again so that angular can
handle the routing and the front end so
I'm going to save that and quit and if I
LS everything you can see now we have
the configuration file so
thedefault.conf and if I NL the docker
file so Docker file you can see we're
copying this file so the default.conf
this file right here and its location
which is the Etsy nginx and then the
config so all we have to do now is to
just run this command again and
everything should work as expected but
this time when we refresh the
application on a particular route it's
not going to give us this forward so I'm
gonna go up and then run this command
again okay so this is the command and
then I'm just going to run it and then
we're going to let it finish all right
so let's just give it a second
all right everything is completed I'm
going to include this one more time I'm
gonna do docker
BS and then we're gonna grab
here press enter you can see it's up and
running so now let's bring the browser
just gonna move it over here and I'm
just gonna make it full screen and then
reload you can see we're back in and if
I go to my profile for example and then
I reload you can see it's still working
as expected because we pass in the
configuration in so we didn't have to do
it manually and that's typically what
you want to do but I wanted to show you
the solution because it's really
important that you understand how all
these things work so let's go back to
the terminal and let's just go inside of
the container again so that we can
confirm so if I go up some more where we
go inside of that container so right
here and we want to go to Etsy
see we want to go to nginx
LS so you can see the cough so that
folder right here that's why we need to
go so path D clear that one more time
now s so this is the file that we
overwritten so I can do NL I don't know
if I have that installed but let's see
okay so you can see this is our file
because we overrode this file when we
copy it to that particular location in
the docker file okay so this location
right here that we have in the docker
file which is where we are okay so we
have this in there now so we don't have
to worry about going in there and doing
manual and if you want to know how to do
the same thing in Apache I can probably
give you the file because before I was
using nginx I was using Apache for this
I just recently started using nginx so
if you want the configuration the same
configuration for Apache just let me
know I can just send you the
configuration that you need to add and
I'll tell you uh where you need to put
it okay so that's all we have to do here
and if you have any questions let me
know I think that's everything that I
wanted to cover when it comes to the
deploying the front-end application and
if I go back again you can see
everything is working as expected that
can save my information I can change my
authorization I can save update
everything should work as expected I'm
gonna make me a super admin again okay
so admin and update my profile I can go
to the customers I can create a new
invoice if I want it I can edit an
invoice here and then select the
customer I can go to the invoice I don't
have an invoice but you guys feel free
to test that but everything should work
and then I can also access the customers
I can update their information blah blah
blah so everything is working as
expected so if you just want to test
this you can create an ec2 instance on
AWS or Microsoft Azure just get some
server in the cloud that you can use and
then you can install Docker on it and
then you can deploy your application I
already showed you guys how to pass
sensitive information to the docker
compose in the docker file when we were
deploying the backend so you can use the
same logic and then pass insensitive
information but you don't save them in
any of the config file but that's all I
want to to show you obviously that
doesn't really have anything to do with
the application that we built in this
course but it's also important that you
know how to work with Docker because
Docker is like super popular and it
solves a lot of problems that that
developers used to have so it's a very
important piece of technology that you
should know in this day and age when it
comes to software development so I hope
this was useful to you and if you have
any questions just ask me in the Discord
and I should be able to help and I'll
see you guys in the next one
Ver Más Videos Relacionados
2. Installed Custom Builder Package in Multi Repo Angular Project | Micro-frontend | Amar Kumar Ram
Securing Swagger API Documentation with an API Key (JWT) | FREE COURSE
Flet Curso: 13 Empezando el Entendimiento de la Estructura Básica de una Aplicación Tipo Flet
Consumir API REST con #ANGULAR 17 con MANEJO DE ERRORES e INTERCEPTORS
SinuTrain. Conceptos básicos de torno | | UPV
7. Deployment of Host and Remote App over Vercel | Microfrontend Communication | Amar Kumar Ram
5.0 / 5 (0 votes)