How to Deploy an Angular Application 2024 (Docker, Nginx & Digitalocean)

hello my name is Alex and in this video I'm going to be showing you how you can deploy your angular application in a real life scenario so basically this video is going to be split into two parts where in the first part I'm going to be showing you the entire process of deploying your application and we're going to be doing that using Docker and engins and the entire process is going to be done locally on our machine and once we're done with that I'm going to show you how you can replicate this process to deploy your app a on any thirdparty cloud service provider now with that said let's jump straight into it so to begin with the first thing you want to do is acquaint yourself with Docker and then you want to install Docker onto your machine so for different operating systems it is going to be a different process but basically you just want to go onto the official website you want to click get started and from there you should be able to figure out the ex ex process of installing Docker onto your machine now with that said we're also going to need engins but you don't need to download or install anything as everything will be done through code now before we begin I want you to open up your angular project and to begin with this is just a Bare Bones uh angular project so this is essentially a plain template which is generated using NG new so you want to open up your angular project and from here we are going to explore how exactly deploying an angular application works and what does it imply so first of all deploying an angular application or deploying any web application simply means setting up a server which is going to be serving the files of that application to the user so to begin with let's go ahead and build our application just for the sake of looking at the files that are generated through the build so to do that you can open up any command line so as you can see I have opened up a command line tool inside of my project location and from here on out I just want to paste the following command npm run build with configuration set to production and now we're going to run this command to build our project so as you can see the project has been built successfully and I want you to take note that the project is located inside of the dist folder and inside of that folder we have a subfolder with the same name as our project so basically based on the name that you've used for your project when you were generating your project or the name that you've set in the configuration of your project this folder will have a different name so we have this demo subfolder here because my project is called demo and then inside of that folder as you can see there is another folder called browser and now if we open up this folder as you can see we have our project files so these are all of the files involved with our angular application and these are the files that our server needs to serve to our browser now if we go onto any angular application so let's pull up the angular website and from here you can right click anywhere and go into inspect and if you go into the network Tab and reload the page you will be able to see quite a few files and as you can see we have files such as main.js and poly. JS and these are the files that are being served from a remote server so these are these files they are being sent from a remote server to our browser to our client so this is exactly what we want to do we want to place these files into a specific directory and then n jins will take care uh of serving these files for us so with that said hopefully you understand what our goal is and with that said we can go back into our folder and from here we can go back and then we can delete the this folder since we don't really need the actual build so let's just go ahead and delete this folder and with that said now we can move on to the configuration of our Docker container and enging server now if you're not familiar with Docker in general I do recommend you watch a tutorial on how Docker works and specifically you need to have an understanding of how Docker images and Docker containers work before we proceed although it is quite optional it will make things much more clear for you now having that said even if you don't watch any tutorials on Docker you should be able to follow along with this tutorial so basically what you want to do here is create two new files the first one you want to call Docker file and the second one should be called n Jinx docon now the docker file here does not have an extensions and it should start with a capital D the nameing here is very important so basically once you're done you can open these two files in any file editor of your choice and basically we will start building these two configurations so again make sure that you've downloaded Docker and that Docker is running on your machine and with that said let's jump straight into the first configuration so this is a Docker file which is used to configure a single Docker container so a Docker image will be built based on this file and then we can run a container on our machine based on the docker image in general in Docker Building images and running containers off of those images allows us to maintain a very strict and very specific configuration across multiple machines meaning that you could share your image with another person and their application instance would be identical to yours this is one of the many benefits of using Docker so first of all the first step we want to do is to import node so we're saying from node latest so from the latest version of node uh we want to import that as build and then we want to make a working directory so imagine this as a virtual directory and we're going to be calling it/ app and then we want to copy any file that starts with package and ends with Json so in this case we have two files our package to Json file and our package log to Json file if you're familiar with angular these two files provide us a list of dependencies that we need to run our angular application now with that said we want to copy these files first and then we want to run a clean install of these dependencies then we want to also install angular globally and then we want to copy the rest of the files now this is quite important because in this case we are first copying our package to Json files and first running the install commands before eventually copying the rest of the files now the reason behind this has to do with the way that Docker caches things and this is outside of the scope of this tutorial but just know that this is how we should run the sequence of commands so first first we're running the install command then we're running an additional command to install the angular CLI globally then we're copying all of the other files and then we're running npm run build with configuration set to production just like we did before uh to demonstrate how the build is being generated and then once this is done we're done with building our application so now we will have a a legitimate build inside of our virtual application directory from then on we need to configure our engins server so here we're saying engin from engins latest so we want to use the latest version of engins and then we are going to say copy and j.con which is this file which is located in the same directory so we're saying that we're copying this file into the following directory on our docker container and the directory is going to be Etc slings SLC con. d/ deault docon so this is the directory where we want to copy our enging configuration and then once the configuration is copied there we want to say copy and then we want to copy the generated build so again this is the location where our build is going to be generated so this/ demo browser is the same location that we saw before but the difference here is that it is being placed into our virtual app directory when we run npm run build inside of it so basically it is doing the same thing that it did before when we generated it inside of our folder so we're saying from builds so we're specifying that we want to use this build right here so we're saying from build we're specifying that we want to copy the content of the browser folder which contains our JS and HTML files to the user SL share slings SL HTML directory again on our Docker container so once the container is going to start running these files are going to be copied into these directories so these directories which I'm highlighting will be located in the file system of our Docker container and then we're simply exposing Port 80 since this is the Port that the application is going to be running on but to be honest this is a somewhat redundant line but let's just leave it here for now so next up we need to look at the in Jinx configuration and in here things are quite simpler so we're surrounding this uh set of parameters with a set of curly brackets and we're denoting it as our server configuration and in here we're saying that engin runs on Port 80 so listens to Port 80 and then the server name is going to be Local Host then the root of the application is going to be this directory which we're also using here so we're placing our files from our build into this directory so we're going to be serving our files from the root directory and this is important once you visit Local Host 80 which we're going to take a look at in a second you're going to be served those exact exact files in your root directory have having that said then we're saying that the index file is index.html and this part right here is very important since it allows you to successfully serve your angular application without any potential issues so just make sure to include this part as it will take care of potential routing issues with angular now having that said let's move back to our Docker file and now we need to find a way to run this file so to begin with let's go ahead and let's open up this folder back up and again we want to open a new terminal so in this case we are still in our demo directory here and what we want to do is we want to run this command so we want to say Docker build and then we want to uh add a name to our image so let's go in here and I'm going to just zoom in a little bit and in here as you can see I'm saying Docker and then build and then I'm providing the name of the image that I want to create and I'm saying that I want to use the files inside of the local directory so with that I can just press enter and this will initiate my build and as you can see the image has been successfully built so you can go into your Docker client and in here in the images section you can see your image now all you need to do is run the image so obviously you can do it through the UI but in our case we're going to be doing it from the command line terminal so what you want to do is run this Command right here so let's go ahead and copy this command and let's paste it into the terminal so basically here we're saying Docker do run and then we are detaching the container that is going to be run from this terminal so we don't want our container to be associated with this terminal so we're going to be detaching it and then we're specifying the port and then we're saying that for the internal Port of the container being 80 we want to map that port to an external Port of 8080 meaning that if you go to your browser and type Local Host 8080 that will point to the port 80 inside of the container and since our application is running on Port 80 so it's listening to Port 80 we need to make sure that once we uh access our application on any port which we specify here it's going to point to the port 80 of our application container so having that said afterwards you just specify the name of your image so in this case my image is called demo node.js and now we can just press enter and as you can see if you get an output like this it means that everything runs correctly and now we can go into to our Docker client and in here in our container section we can see that our application is running successfully so let's go ahead and pull up our application and as you can see everything runs perfectly so we're accessing the application on Local Host 8080 but in truth we're connecting to the internal Port 80 of our Docker container now if you go back into your container so you can just click on it and in here you can see the actual logs of your application and if you go into files we can go into user and then we can go into shared and from here we can just scroll down and we should be able to find enging and from here there is an HTML folder and as you can see these are the exact files which we saw when we buildt our application previously so all we're doing is basically placing our build into this folder so this command simply places our build from our virtual app directory which we specified here into this specific folder and then in our engins configuration we're saying that this folder is a root folder so we're serving the contents of this folder with our index file beinging index.html and I think everything comes together nicely so hopefully you understand how everything works by now everything is very simple we're simply placing files on the server and then we're letting engines serve those files to us and with that said we can move on to the second part of this video which is doing the exact same thing but in a commercial environment to deploy our application in a commercial environment we will need to use a thirdparty cloud service provider and in this case we're going to be using digital lotion to create a droplet which is essentially like a virtual machine which we can use to remotely set up a server now obviously you can use any other third party service provider but in this case we're going to be using digital lotion in the scope of this video and again the goal is to set up a simple server install Docker on that server and then repeat the process we did locally now I will be leaving a link in the description and you can sign up using that link and you will receive uh I think something like $200 uh worth of credits onto your account and that will be more than enough to uh run your own droplets for quite a while so having that said let's go ahead and log into our account now once you log into your account you will be able to see a menu on the side here here you can create quite a few things but we're interested in droplets and in this case you can just also click on spin up a droplet right here and this will bring you into this screen where you can select a server location and in this case I'm located in Europe so I'm just going to click on Frankfurt and then down here we can select the operating system we can select the version and then there are quite a few plans again you will have enough free credits to run all of these and in fact even having $7 will be enough to run an instance for a month now what we want to do is to go to Marketplace and here you can find many presets like WordPress we can find openvpn we can find quite a few pre-made configurations here and we're interested in Docker so we're going to click on this configuration and if you can't see this you can just simply search for Docker up here so we're going to click on Docker and this will generate a droplet for us with dogger pre-installed so we don't have to install anything so basically after you do that we want to go into regular here and we want to select the cheapest tier which is $6 per month so after having that selected as you can see here we have quite a few options but all we want to do is essentially create a new SSH key so that we can connect with our droplet now to do that we can click on new SSH key and you will have to generate a new key on your machine now in this case depending on your operating system this may be different but I'm going to demonstrate you how you can do that on windows so open up a folder where you want to Tor key this can be pretty much any folder but in this case I have a SSH folder under my username here and now I can open a command prompt and from here we want to say SSH key genin and we want to press enter and now it wants a name for the key and in this case I want it to be called uh digital ocean so let's just say ID RSA digital ocean and now we can press enter and you can enter any passphrase you want and then you need to repeat that and then press enter again and the key has been generated now I will be deleting the key after this video so I'm going to be showing you the actual key at least the public key right here so we can double click on that and that will open up the public key and we can save that and then we can paste that in here and in here I'm going to specify that this is a tutorial key and now I'm going to press on ADD SSH key and then you will be able to reuse this key so in this case I'm going to click on select all to deselect both keys and then I'm just going to select the specific key now these are public Keys again so there is no problem in sharing them but generally you shouldn't be sharing your keys online so with that done we can create our droplet so simply create click on Create droplet and now your droplet will take a while to be generated so now the droplet is up and running so we can click on the droplet as you can can see here are the details but we want to go into the droplet so click on it again and the droplet has been created and you have a bunch of analytics and a bunch of data regarding the droplet now what we do care about is being able to connect to this droplet and potentially transfer files into the droplet and to do so we will need to be able to SSH into the droplet now to do so we will need to use an additional tool to make our lives a bit easier which is called MOBA xterm so let's go ahead and download that so open up a new tab and type MOBA xterm and then press enter and from here you can go on the official website and download a tool now this is a tool which works on Windows I'm not sure if it works on different operating systems but if you're using a different operating system uh then you can use similar tools as well so basically the goal here is to download set tool and then once you open up the tool you will see an interface like that so from here you want to double click on user sessions you want to go to SSH and in here we want to go back to our website we want to copy the apv4 address and we will be using that as a remote host and we will specify the username as root and then we need to leave the port as is we're going to go to Advan SSH settings and we need to use a private key so we're going to select that select the private key so here we have two keys we need to select the private one which is without an extension and now we can click on okay and hopefully this will connect so it prompts us for our password and this is the password we used when we created the key and we can click on enter and we successfully connected to our server now on a side note if you don't want to use a third party tool you can always manually SSH into your machine now the way to do that is to bring up a terminal just like before and in this case what would you do is very simple you would need to say SSH and then you would need to say- I and then you need to input the path to your key so that would be the path to your private key just like before and then you want to add a space and then you want to say root add and then your IP now now if you don't want to pass your private key like this every single time you can also register your private key now to do that on Windows you need to press windows and R and in the popup that shows up you need to type services. MSC and then you can press enter and that will bring up this window and down here we want to go to the op SSH agent so here we have the op SSH authentication agent just right click on that and go to properties and then set the startup type to automatic then click apply and then click okay and make sure it is running and once you do that you should be able to use the open SSH authentication agent to register your key and to do that all you need to do is go back to your terminal and from here you can just say SSH add and then you can just input the path to your key and once you do that you can just press ENT and then you will need to type your passphrase and as you can see now it says identity added and now you can simply do SSH root at your IP and now you should be able to SSH into the machine by using your unique IP without providing the key every single time with that said in this tutorial we will continue to use mob by xterm to illustrate things a little bit better since it also has a file explorer which makes things a little bit easier to follow but in general you don't need to use a third party tool you can always manually SSH into your machine and then use commands to copy files and start up doer containers now before we proceed let's go ahead and let's save our image so that we can transfer it onto our server now the beauty of Docker is that since we've already generated an image based in our Docker file now we can basically freely use that image so let's go into our doer container let's resume doer and as you can see here if we go to images we have the image right here now we want to convert this image into an actual file so let's go ahead and do that let's go into any location I'm just going to use our previous location as an example but you can go into any location and then open up a terminal in that location and now we want to type the following command which is docker save - o and then we want to say demo nodejs which is the name of our image doar which is the file that's going to be generated and then we type the name of the image once again so basically we'll be generating this file from this image and now we can press enter and that will generate the demo nodejs doar file at this location so we can uh actually let's leave this terminal open for now as is and we can go ahead and we can see the file right here now you have two options you can either drag and drop the file directly into the inspector here or we can use a command to transfer it so let's go back into our file inspector here and let's click on the Arrow to go back and as you can see we have a very similar structure to what the docker container has already but in this case we want a Docker container to run run on our server and we're going to go into VAR and then from here we want to uh essentially create a directory called www so let's do that and let's click on okay and in here this is going to be an empty directory and now we want to transfer our file into that directory and to do that we are going to go into our terminal and from our terminal we want to say SCP and then we need the path to the file and now we need to say root add and now we need to copy the IP again so let's go back in here and copy the IP and let's go back and let's paste that and we'll say column and then we'll say VAR and then uh slash www and then we are going to going to say actually uh let's say the name of our application so let's just say demo and we want to create that folder using mobx term as well so let's just say demo and now we can go back here and we can press enter and see what happens and now we want to go ahead and say yes but the access has been denied since we're not using a valid access key so we need to fix that and to do that all we need to do is press the app Arrow to bring back our Command and we're going to go to the very beginning and we're going to say- I and then space and then space again and let's move back and here we want to paste the path to our private key and now uh let's also actually surround this with quotes and now let's press enter and we enter our password and as you can see the transfer begins so basically this is an alternative method of interfacing uh with the SSH terminal so basically whenever you want to do that without using mobx term you can just directly uh pass the private key like this and this will allow you to perform pretty much any action on your server and as you can see the transfer is complete and now if we go into the demo folder here is our tar file so now what we want to do is we want to go ahead and say LS and as you can see we're inside of the root directory so we want to do a CD with a double dot to move back and actually let me zoom in a little bit here so you can see better and basically now let's say LS again and as you can see now we can navigate into VAR so let's do a CD let's say VAR and then inside of that let's go ahead and do another LS and from here we want want to move to www so let's say CD and www and let's press enter and then we want to move to demo like this and let's do another LS and as you can see our file is here so now we want to load that file so the only thing we need to do is say Docker and then load and then I and then let's go ahead and say demo and if you press tab it autocompletes it for you so you can just press enter and as you can see everything has been loaded successfully since Docker is pre-installed on this machine and now we need to do a Docker run like we did before so let's just say Docker run dd again- p and again let's say 8080 to 80 and now we can say the name of the image again and now we can press enter and as you can see everything has been mounted successfully and now we need to ensure that the port that we're using is exposed to uh the outside world so we need to say ufw and then say allow and then want to say 8080 and then slash and then say TCP and then as you can see the rule has been added and now let's go back into Chrome let's copy the IP address again let's paste that and let's upend the port and as you can see your application is now successfully accessible to the public and that's pretty much how you deploy your own angular application to the web as you can see here you can also see the metrics and in general this is a very straightforward and very easy way to deploy your own applications however one last thing I want to mention is that if you're incredibly new to this process and if you want to do things in a simpler way you can also use the app platform feature of digital ocean which also exists with other third-party cloud service providers as well in a different form where you can connect any GitHub repository or even uh your dockerhub repository to digital ocean and then once you do that digital ocean will automatically detect what you're trying to deploy and it will deploy it for you this means that you can pretty much just simply upload your entire project to GitHub and as long as it has a Docker file it will detect that you want to run a Docker container and it will run it for you and it will also do things like load balancing for you as well so if you're looking for an easier solution I do recommend looking into the app platform but in this tutorial we've covered the basics of the old school way to deploy your application and usually in a real life environment if you're working for a firm or if you're deploying something uh in a real life scenario you will most likely be using this method however as I mentioned before if you choose to set up your own server you will need to manage things like load balancing yourself while with app platform it will be managed for you but again this depends on your use case and it is up to you to decide if you want a separate video on how to use the app platform although it is very straightforward I can make a separate video on that topic as well and that's about it so if you want more videos in the future do let me know you can also recommend topics for new videos in the comments below I hope that this video helped you understand the process behind deploying an angular or pretty much any other web application on the cloud and with that said I'll see you in the next one

Channel: Code Deck

Views: 3,148

Keywords:

Id: ERVAFkj66QQ

Length: 32min 50sec (1970 seconds)

Published: Fri Mar 01 2024