Dockerize an Angular Application using Nginx

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

Channel: Get Arrays

Views: 17,172

Keywords:

Id: -o5l6zFJ9_o

Length: 56min 41sec (3401 seconds)

Published: Fri Sep 08 2023