# Deployed Angular Application on Linux server with Nginx..

we're going to set up this angular app with nginx and make it publicly accessible using an ec2 server and so first thing we're going to do is launch an ec2 instance I like to use the default instance and T2 micro as the default size and so we're going to click through all the configuration until we get to configure Security Group um here we'll want to add HTTP access to rdc2 instance because we want people to be able to access the angular application over the web and so in this case we create a new security group called tutorial and then tutorial tutorial to add the description and then we simply just add a new rule for HTTP it has built-in defaults and you can customize these for based on what you want but I'll just go with the defaults here oh in this case I've already created an existing Security Group matching those rules I'm just going to select it using um ultrasound default and you can see the rules pop up HTTP all I did was add a HTTP type Rule and these are just defaults so you go to review and launch you can ignore this for now and then simply launch an instance you can create a new key pair but I already have one so I'm going to choose that one um and then launch instance and so my keeper is located in this on my desktop within my project directory so I'm gonna navigate there really quick you can see the keeper file I've stored um in there um ultrasite default.pm I got it easy too okay my instance is running now and so I'm going to want to connect into that instance using my default um oh using my key pair permission file and so I just copy and paste this as long as I'm in the directory where this file is directly located and IPS and I'm in ec2 my virtual machine and so the next thing we're going to want to do first to show you guys this empty ec2 virtual machine printing out all the contents or the creative directories and there are none so the next thing we're going to want to do is go to our angular application and get build files that we can copy over to easy2 I'm going to do that using NG build in vs code and just wait on this to build all right so built I can see this disk folder pop up with all our static files and so we're going to want to actually copy that into ec2 I'm using SCP and so we can all we really need to do is um so basically to break down this command SCP is um kind of like a shell copy um which uses SSH to copy over files from your local directory into the directory on your virtual machine um and so this is um I keep my permission file and the path to my permission file um this basically just says copy copy this entire directory into the remote directory and so my build files are located um at this path under the distribution folder or disk folder and disaster just means copy all the files under this folder um into this remote directory the one thing I'll have to replace is this because I have a new ec2 instance URL and so let me actually copy that and then we're going to want to um tell where to copy it into with colon and then the directory here I'm just going to copy it into my home directory um and run this command and you can see it um copying from my local into ec2 and it's simply loading right now and just wait for it to finish and it's completed copy and so if we LS in ec2 you can see this folder has popped up and we see to it and print out the contents you can see that the contents match the contents in the build folder um generated by the S code so we have our angular app inside of ec2 but we have nothing to run it with for example if you go back to ec2 and go to the public API or IP address nothing comes up because nothing's being hosted right now and so we're going to utilize nginx to do that part for us and so nginx is basically like a web server um but it also has a lot of other building capabilities like reverse proxy that allow you to place your backend and front end on the same server and load balancing for larger projects in this case I need to install nginx into the ec2 machine I'm using this man sudo Amazon Linux extras install nginx1 and basically this is going to create a default nginx setup for us which we can check out in a second and so now that nginx has finished installing we're going to use Vim which is like a terminal text editor and go into the EDC nginx folder that was created for us and specifically you go into the configuration and you can take a brief look at this configuration this is all created for you by that command and the key thing to focus on is that the port is at 80 um and the root which is where the content is hosted is user share nginx HTML which is kind of a folder holding static files just like the files we just uploaded to ec2 um and so whenever you start up the nginx server it's going to host these static files at the um URL of the ec2 instance so we're going to take a brief look at that really quick first we can actually CD was it user share nginx and so you see this HTML folder go there and then the index.html is what's actually pulled in the server there so we can take a look at it using Nano index.html and so basically the title is going to be test page for nginx HTTP server um it's got the styling um and then this is kind of what it's going to look like welcome to nginx this page is easy to test blah blah so whatever's on this HTML file um is whatever's going to be on our ec2 server public IP address and so we're going to start the server using sudo systemctl start nginx and so this just booted up that nginx server we can check the status using and it has started the nginx HTTP and reverse proxy server so if we actually go to the address of rdc2 instance and copy and paste it um you see last time before starting up the server nothing shows up this time that default page shows up so test page for nginx HTTP server um and then this is the default index.html page so now you're going to see um what we actually want on this page is the index.html of our angular application which will actually show all the information for angular app and so what you need to do for that is navigate into the um nginx configuration file again and the key change which I like to separate the route from the server route is to show that the default location or the root location of your HTTP server is going to serve up your the HTML file in your angular project build and so that's located if you have the Linux Ami at home easy2user slash the name of that folder add a semicolon and then we're going to delete this and so at the location root path it's going to grab the index.html of our angular project so we exit that text editor and then we we load the nginx server just reloading the contents and then we restart it so that those updated contents are shown but there's going to be a problem that you see at first so let me navigate to ec2 and it'll probably say forbidden yeah and this is because the files are one of the directories in the path that our angular project is hosted on in ec2 is located on an ec2 doesn't have the right permissions so we can compare the permissions with the HTML file that nginx was just working with using this command name I om and then the path was user next share.html as you can see it's just a bunch of letters d r w x r Dash XR X this is just read write um I think execute I can't really remember but we just want them to match and so if we go to the path that our folder our build files are located in which is home C2 user slash ultraside you can see most of these match except this ec2 user folder um doesn't have um the right permissions and so we can add them using chmod which is basically used to change permissions uh the file or directory and then um ec2 user then run again and you can see the permissions have been updated um so we reload again the web server and then we start the web server and voila the angular project is now hosted on easy2 um at this public API or IP address at any we can address or it can access and so um that's mainly it on angular and nginx

Channel: DevOps-Erpnext

Views: 3,604

Keywords:

Id: Gd-9-jvWyuU

Length: 8min 45sec (525 seconds)

Published: Wed Dec 14 2022