Deploy Angular App on aws ec2 Linux and Automate With Git Actions

i'm going to show you how to automate angular app on git repo at the same time i am showing how to deploy angular app on aws cc to server and with git ci cd actions okay so i just created my project on locally so see my app is my project i'm just running my project on locally okay so see this is the basic angular app okay so now i'm just starting the app ng serve or you can use npm also npm start also no worries about that so now the project will start from localhost 420 right so now i will push this local project to git repo and after that i'll deploy the same repo a project on to aws ec2 instances linux instances okay and after that i will do some changes on my local okay that changes will be reflected on play okay so let me wait for that so first we need to check the project is running on local mission or not so in this demo i am just going with the basic very basic uh project angular project so if you are good at the ui and angular things you can build a beautiful ui okay the compiling has been started it will take a little bit time yes now it is going to run on localhost 420 port due to space issues or yeah now see it is automatically opening the local host with my in my local uh browser right so see is compiled successfully and it is running on http localhost for to double search so now i am just cancelling this okay control c means the the project is not running on browser now if you go and refresh it will not serving on browser why because i just stopped the things on the browser uh local technique now i need to push this angular project to git repo for that and just creating new project git repo sorry okay i'm just giving it uh mostly you can keep it on private as of now no worries about that public and this is basic very basic project so now we need to do these things on your local mission okay i'm just pushing one by one i'm doing these steps into one by one to push my local project into github sorry it is not copied properly so get in it after that git add dot you can add only one file or you can add entire okay here the thing is they just added the readme file they have written echo thing so it is showing like this you can check get status after adding it is showing only it is added only one file so you can add this one no issues about that clx and now if you check the status of gate so now it is been staged you can just add or commit commit iphone name first commit so first file is inserted so now i'm just doing branch and i'm just adding this remote url and get push sorry get push hyphen you origin man so something metro sorry something went wrong on my screen so let me check it get dot click submit iphone m first comment so nothing to communicate add remote remote origin http it okay we need to change the branch so it is showing like this get branch name main so now we are in main branch so again you can use this same url add repose curvy oh sorry it is not copied properly so it's showing already exist get push iphone you origin sorry see now the project i think only the readme file has been updated to this repo let me check with this yeah now the project has been updated to uh git report right so initial commit it is showing initial commit no worries about that so now now you need to uh deploy the same project on your ec2 machine okay i just uh launched my services on aws and the server is on running no so now i need to connect to ssh so i'm just connecting with some other terminal or we can connect to put else no issues about that so i'm just connecting to puti you can just pass the hostname or browse you must browse your ppk file and i'm just changing the fonts here itself okay so now you must login as user for my mission easy to hyphen user is the username so it will connect to the screen yeah first you need to update update your mission for the first time why because it is asking to update that so after updating you need to check whether the git is initialized or not okay in the local machine uh you have node installed so the project has been running so you must install node.js on linux mission of your servers okay let me do that quickly so that so now i'm just quickly checking git version is installed or not by using git hyphen iphone version cd not uh installed here so i'm just installing here by using sudo you install it iphone by it will includes all the packages on the gate okay now git version has been installed you can check with git git iphone iphone version say the gate version is installed so now i need to install node.js for that no worries if you don't know the commands you can directly go to aws document aws ec2 node.js okay you can directly open the document from amazon site itself they will provide a step by step to install node versions so simply copy this command and paste it so again you need to copy next command sometimes you will uh it will shows you uh sorry i think i need to run this lst command yeah sometimes it will not accept you as a user mode you must run with sudo user okay root user so now i'm just clearing the screen node hyphen v and npm hyphen v so both things are installed so now i need to get the project into my uh linux mission so for that you need to go to github repo and go to actions see here i'm just using node.js right so click on configure but for writing some ml script see here i'm just removing the pull uh request i'm just only uh keeping the push request means when the user pushes the updated code then only it will updates on the live okay so uh self hosted i'm just removing the ubuntu latest and self posted okay and the version of the node is if you observe here v16 the version of the node is v16 so remove these two versions we don't require and then here we don't run these comments i'm just keeping the following commands and npm install and after that i need to start my project that's it this is very basic project so i just passing two commands here on the script so start commit and now the file will be created on actions okay so again you need to go to settings you are making configuration with your server go to actions click on runners see here the runners are showing no runners are there so click on new self for state runner choose your mission you can use windows mac or linux currently we are working with linux mission so choose linux you need to copy one by one and you need to paste the following commands on your server turn so i'm just copying pasting the commands it's simply creating one folder and it is navigating to that folder and it is bringing some curl command into the script so now see you may get sometimes uh is some not found for that you need to install mostly this issue will be occurs on linux missions okay so for that you need to run the following command okay in ubuntu you know you don't worry to install this command so it is asking you must do some root you must run this command as a root so i'm just running the command as the root and after that repeat the same as this one sha some not found right while clicking this and command enter so now it will it will not choose that one see action okay click on ok and then not required so now you need to type extract that file so now it will extract the actioner uh action runner is nothing but our folder and the mission linux running machine so it is showing like that so now you need to config it and then finally we have connected with github actions from the linux mission here i am just moving with default if you want any changes you can enter the uh the things or they ask okay now for now i am just entering uh skip here now the runners added successfully to linux mission i'm just entering so settings are saved clear the screen now if you refresh the console the runner will shows here it will take some time actually so if you see it is showing offline okay you must make it as active then only it will makes here instead of offline it will showcase how to do that see after cloning the github actions uh configuration with linux mission it is showing following things you must run sudo dot slash svc dot sh okay you must run this one install okay see it is installed see it has created one system and it will starts the following and again you need to run start instead of install then only the action runners will be keeping on running mode okay if you go to github actions refresh it it will show us now in active mode means our project has been become live okay we need to see the project on uh live on the browser like localhost put with put on the local mission now for now i'm just navigating to home pc to hyphen user and then clearing the screen for that for seeing our content on a browser and just installing nginx okay nginx hyphen by okay see nginx is not there so it is asking to use this following command to install nginx okay no worries about that so you can then go with the following commands what they have given see sometimes the platform will not choose the commands but the same commands will work on some different platforms okay no worries about that it will shows you uh the updated commands then you can use the easy commands so now linux so i have installed nginx on the linux mission so after that you need to start the services of that mission service ng next start okay it is started if you go and copy the ip of your server okay public ip of your server paste it on uh browser it is showing welcome to linux welcome to nginx online exemption see the the root path of this page is located in this path user share nginx html you need to change your project uh path by replacing this url okay let me go to the terminal oh pc to user and action listener from up for reaction runners so now my project is located on work folder okay i need to go to work folder and ls see here it is showing angular app okay you need to go to that path and again it is showing angular tap here again you need to go to that part and now here is my project i need to start my project but it's already passed from the ml screen no issues to start the path from here simply hit pwd okay present working directory so copy your path and place it in your some text path notepad or whatever okay so now clear the screen now you need to go to nginx confirm for that nginx folder you need to go nginx.com you need to change the uh root file where inside in browser it is showing like this you should put your content in a location and you need to edit the root configuration so here it is showing okay so now you need to replace uh here with your path of your project okay this one just copy this and go to terminal uh press i in the keyboard then only it will becomes insert mode and slowly scroll down to your see it is showing see the root it is showing the path here you need to uh you need to change here instead of changing the current thing i'm just keeping root okay and i'm just pasting the my project url here okay and simply scroll down you must see you need to place location slash slash means it will runs on the root part proxy pass pass http localhost okay four to double zero okay and then close the curly braces and press escape shift colon wq exclamation mark see it is showing you cannot open this file why because you didn't open this file with root user so you must do one thing you need to comment what the lines you have written okay now i'll just okay press escape colon quite okay now you must change it to root see now ec2 user becomes as root user means he has the root privileges he can change the things on the confine so vi nginx dot conf now scroll down to the path where you commented i think it will be removed why because as it has been removed you have written some as a easy to use at night so it has been removed so no worries you can return again right again copy the path of your project and paste it here and semicolon and then scroll down prolongs pronoun and location slash curly braces open and give some space proxy proxy pass okay http localhost you may ask one question like you may get some query like uh how did you give this uh path i will show you no issues about that okay process here shift colon wq exclamation mark and then service engine x restart sorry i given wrong spell of service okay it has been restarted let me go to this page restart this now see my project is running on particular ip okay this is how you can do uh github actions deployment cict but you have to know how the things will happen if something the developer do some changes on this application on github action go to see first i will show you actions see it is showing uh the ml file if you open the saml script field 16 see you will find angular running with localhost 4200 on the script okay so it will shows uh it is running but so i just passed the two lines of uh script on the nginx.conf okay now i will do some changes on this app i will push the updated content to this uh repo from my local let me do that so i'm just opening okay i'll just try to change the title okay let me check it yeah okay let me check with this cat command app.components.html now it is showing something different we can change but it is purely in css mode so better to go with some other file okay so i'll just open some other file instead of doing player cat i'll go with components dot ts see it is showing some a few lines command so title if i change my title title is nothing but in this uh this one okay i think my app is my title so let me check it or we'll go with another file let me check with index.html yes title it will uh it will replace here okay on the browser tab my app so i'll just open this page index.html on my local mission i will do some changes on the title to the title name okay i and so something went wrong here yes yeah i'm just trying getting angular angular space save press escape exclamation mark so now if you hit get status some file is changed it is showing modified the index file so you need to push that file you need to push that file to updated repo so git add index.html i'm just adding only one file why because i directly changed that file okay now get commit iphone m added or changed content change index title okay whatever you can give whatever the things now if you get status check with git status is showing you just need to push okay see i just try to it is rejected why because you need to pull first why because you have added it uh ml file there on the project level so you need to pull first so it is showing here you need to ignore it okay or press escape okay now the see the ml file will be there okay i think it is in hidden mode less siphon yet yeah it is in hidden mode no issues so now if you put uh push that file the updated file will be go and sit into the git repo ok so now if you observe here refresh the key repo see the index where is index he changed index title okay one minute ago so i i need to reflect i need to see the save on this page right but as of now you need to go to actions the second one is that but the currently the previous one is running so just stop the previous job cancel it so automatically also it is still in uh progress let me refresh it till it is showing progress it is showing the updated one is showing in q mode it will run after for taking time and just let me wait i think some network issues are there until it is if you open actually my network is not good yeah so it is taking time here see now now it will update that on without going to server after some time it will reflect here if you refresh it the angular cap is updated got it so you can do some uh if you are good in ui part you can do some changes and you can design your web apps and you can do cacd with a github actions okay like this thanks for watching please subscribe my channel and comment how it works or if you are facing any issues you can paste the same thing on the comment part thank you thanks

Channel: Ask Info Solutions

Views: 2,286

Keywords: #aws ec2 linux, #aws ec2, #github, #git actions, #angular, #angularApp, #nginx

Id: e1tSz0FUP2E

Length: 29min 58sec (1798 seconds)

Published: Tue Aug 16 2022