Deploy MERN STACK App with AWS EC2

hello my friends in this video we are going to deploy our Bostick application by using ec2 so you can use the ec2 inside of AWS so in my previous video we deploy our application by using Heroku now first I want to make sure the difference between Haruka and ec2 so if we use Heroku we actually don't need to take care of this part we can only just a focus on source code if we think about our computer so when we buy the computer we actually need to download our OS operating system first it could be the window or you could be the Mac OS so first we need to choose that one for our application and then inside of that OS we also need to download nginx for web server nodejs or the java for the backend server or like there are so many things we need to download the first to deploy up our application but if we use the Heroku actually we don't need to take care of that counterpart so we can just only focus on our source code so we can start on making our application really fast but if we use the ec2 in the AWS we actually need to take care of this part too so it will take more time to make lots of configuration but there are some first and cons of for each of them so that's why I try to make a video for easy to this time so based on your preference you can choose the ec2 to deploy your application or just choose the Heroku for deploying your application so without further ado if I start or deploying our application first we need to go to AWS so hit over your ass in here we need to go to sign into the console so you can never use it or you didn't the sign up for the AWC yet I think it is it is really easy to sign up and that is really straightforward so I'm going to skip that part so after is the signing of your application you can sign in to AWS concern and then in here we are going to use is c2 so you can type use it too in here and click it so you are inside an ec2 dashboard right now and then we need to click the launch instance there are six step we need to take for the server configuration first so first step is that choose on Imagine motion image in here so we are going to choose this Ubuntu server this one just so lucky and you can see is the free tier eligible so we are going to use this one and click the next configure instance detail this is the step for configuring instance detail but if you want to know more about each of them you can just cover this one so they will give you some detail for this part but so it is good to go with just a differs a lot it one so I'm just going to click this next add storage this is the further adding the storage so it is also good to go with the default one this one and click the next so now you're in the step for the adding tasks so by adding the tasks it will help us manage our instances and images and other imagine ec2 resources so we can simply just add cat 5 6 you can just to give any value and any key for this one so and then we will click this next button and here we can configure our security groups so if we come back to our diagram here in our application we are going to use the nginx for the webserver and then those know JSF for the back-end server and we can also use the MongoDB for our database so to access to this server is each of the server and database so we need to tell them to allow our specific trappy to reach our instances so here eighty port and noticeable for the five thousand two seven zero one seven for the MongoDB so we need to click the advert for first HTTP port 80 and custom TCP and five thousand for another server so for this one you don't want to make any restriction for this one you can just give this value for this source so if you want to open this one only at your home you can change this one into my IP so we also need one more for the MongoDB two seven zero one seven mmm two seven seven and this one again so 22 for the SSH and then 80 for HTTP and 5,000 for node and this one for the MongoDB so and then I will click this review and lunch and I will click this lunch button again and there we need to or I'll make the key pair file so by using this key pair file or we can connect into our server with SSH so we need to create this cute pair file first I'm going to select is create a new key pair I'm just going to give this one name hello and then click is download key pair so we need to save this apply inside the safe place if you lose this one once you need to create this one again so you cannot restore it anymore so I'm just going to save this one inside 8w s further and save and then I will click this launch instances so now my our instances are now on chains so ready to wave for a bid for this one to be launched so you can see this one is the pending and so I'm going to wait for this one to be launched so now this one's the instance state becomes running so now we can go to our next step so we need to assess into our server we just made by using SSH so first do all so to do that we need to turn on our terminal here the first thing we need to do is that we need to go to the directory where we save our PEM file so I save the PEM file in here so go back and then just type the CD and I will just drag this one in here then if I click it we can come inside of that directory so well we save our PEM file so from here we are going to type some the comment line to assess to our server we just made so type SS 8 and I am O key pair file name you can see here keep a fi name that is for me hello Pam top Pam and then you boon to our we need to put the public key and s so you can check this one or in here we click this one and if you see this a public key and ass you can click this one to copy this one in the clipboard and then we put it in here so you can enter and we will type yes we are blocked because you can see permissions 644 first hello Pam are to open so we need to change this the paym files permission or into different one 6:44 it is to open so to do that we are going to just type this chmod 605 name so chmod and 600 a hello dot Pam I'm sorry about the chmod 611 so I just changed the hello pimp files of permissions that into 600 from 644 so now I'm going to do it again this SSH I so start now we are inside our server we made it by using the ec2 so in here what we need to do is first we need to update our system spy typing sudo apt-get sudo apt-get op update after that we need to make the file structure or beautify structure like this now we assess to our server by using the SSH but now I'm going to use the different tool to assess to our server so for me I'm going to use the FileZilla if you don't have this one I hope you can just download this one it is really nice to just go in there and click the new cipher protocol so we will use s captive P click this one and we need to put the post in here by using this public dns again so copy and paste it and for user we will use the Ubuntu user and the password or we reuse the key file the PEM key file so this hello the Pam and then we will connect it so click the ok button so now we are inside our servers so now we are inside the same server but we still use the different tools so we can see our file structure or more easily in here so but inside our ubuntu further there are nominating because this one is default structure so we want to change this one this one into this one because if you see in here the result inside the ubuntu further there is a client part and then cyber parts so inside this client we are going to put all of the reactors record in here and for the server part are going to put the notice source code in here so that's why we need to make the client further in server further first so inside the ubuntu store create directory and client and one more further so sorry bar so inside this client there is a deploy further we can pull all the big file that come from the reach a ass put inside our deploy I'm going to let you see later if you can understand right now inside the flyer we create one more at ti3 named deploy and we we also put the server loads for the logs server loads so now we finish making our file structure after that as I said before the difference between the Heroku and is c2 we actually need to download the so many thing on our own not like the Heroku so we need to download nginx and node server or the MongoDB but if you don't want to download the MongoDB you can just use the MongoDB at last cloud service so you will take care of over the database for you even though you don't download it in here so first we are going to download jf4 this one so to download this one we will type the sudo apt-get install of the J ass in here sudo maybe I make it bigger so you can let us see more easily so sudo apt-get install nodejs why now you've done with the note G as download and the next step is to download nginx offer the webserver teach this one so clear sudo apt-get install and Gen X Y so now you've downloaded this or nginx that is time to start the nginx so but we didn't just a start is no day as up what we will do later so first now we are going to start our nginx over by typing sudo service and do a start so sudo service and it takes start so now the nginx is a started so if you want to know this one is really running on you can just type this sudo service and getting steadiest to the service and you exist it is so now it is running you can see this active part or before to skip going we actually need to do a configuration for the nginx so we can just do some configuration inside in here it is the nginx nginx kampf or in this file so first I'm going to change the directory so we are inside in okay CD it TC and nginx and I'm going to let you see in here so now you can see this engine cone and then comp dot d so in these two file folder and files we can change the engineer configurations first we will change this engine X comp to get inside this and the next come file so we will use the B and then engine X comb so we are inside in here but but to change the content of engine X configuration we actually need to have the administrators or permission so to have the administration permissions we are going to use the sudo MV and and Gen X comb so now you can see some the configurations for the engine X in here it is a lot or even never the treat engine X before maybe you'll be really dizzy yeah it is actually complicated so from now on I'm going to change the configuration while here first I'm going to delete everything by just a typing D if you click the B button so you can delete it like this after that I'm going to copy and paste all of the code I already made in here I already made the code for this engine X configuration after doing the Alvin going to explaining so so paste copy and pasted so we go outside by typing WQ and we are going to change the one more files content we first need to go inside and call that D so there is no default for default file in here so we are going to make that default 5 first so to make the default file so sudo touch octave Ford confu so if we type ls' you can see this file is created so if we go inside the default come home so we also need to use the ordering the administrator the permission so sudo MV and T fourth cone and as we did before I already made the code for that in here so we are going to copy this one and paste it like this WQ to save this one first I'm going to explain a bit or what I just did so the default home this means and Linux will listen on ad port and the free disk part or if you have your own domain like abc.com or visited calm you can just type ABC calm ABC calm or we see data come like this in here but we don't have our domain right now so I just leave it like that and then for assess low so we will let the nginx knows though we are we want to leave the load in here so we made their folder in here so home home and Ubuntu and client and several logs and inside in here or put successful so we will just put the log in here that's why we give this directory for assess load and for the location or just the root is here home Ubuntu and client and deploy so we are going to put all the build files inside a diploid further these nginx will find the files inside a deploy folder and then we also have index dot HTML in inside the deploy so just why we do like this and then this one is for the security reason so now we move on to next step we finish our configuration for internet so first we are going to start nginx again because we change the configuration so we can just type sudo service and it's restart so so now we go outside here and try the sudo service nginx and restart and then we will check the nginx status by typing sudo service and genexus status so now it is running where right now or if you didn't do the configuration well maybe you got the red color in here and then fail so I am going to give this this script or this screen in the description for this video so you can just copy this one and then paste it this configuration file so so you won't have any error and you can get it like this so the next step is we need to take care of the MongoDB right now I said that we will have the 2-way over using MongoDB so one way is that we are really going to download the MongoDB inside our server and the other way is we will use the Atlas service for this one so mumble at last service is in here this one is a cloud service so it will take care of everything and it really give us some account and the password and the database name so by using them we can just put them inside our source code and we will connect this MongoDB application into our application so in here I don't know which way you actually want me to do maybe for this time I'm just going to use this second way and if you want to know this way you can just let me know I'm going to make a video for you actually this one is really complicated so like it would take more and more time than this one so if I just keep this part just for a bit so I'm going to take care of this one later so finally it's time to put our source file and further into our cloud server I put the source files inside my guitar in here this name is deployed more AWS ec2 so if you come in here I'm going to give you the URL so you can just click the download the G so now I have the file I just downloaded so I'm going to open this a file with my text editor and then I drag it into the text editor here so first I want to put the client part into the our cloud server inside in here so before putting on this client part in here or there were something I need to do for reactor J asked we need to build the react.js application for it for the production mode so go to client directory and then first I need to download the dependencies that belong to the rig J as they we have a lot of the dependencies for the reactor yes so first download the dependency NPM run NPM install so now we will download all the dependencies so we can build the rig jes application MPM run fail so we will have the further name the built in here right now so we just finished building our registration so very first of beautify insided client so do that go inside the folder and cly in and bill so now we drag all the file inside the div flow a further so now that we just put all the beautify inside the deploy is further so now we can access to our applications by using this public IP copy and we need to paste it in here so now we got our applications but this is just a further front-end so we don't have any code for the or back-end right now so now it's time to put back and source code inside this type or further so to do that first we actually need to connect this our application with the MongoDB through MongoDB we are going to use this second way by using the bongo at last service so first we need to go to the MongoDB calm in here or if you don't have a account for this one you can just click the try free and then you can sign up and then and then you can sign in so if you sign in we can just click the build a new closer start click it and then you can just to choose the AWS and Google and ager for the cloud providers we want the free tier cluster so you can just click to anything that has this tag the free tier available and it is good to choose the one that is close to closest to your place for me I live in Seoul but there is no free tier available so I rather click the sync up we want and then well I already made it so many closer but so I cannot click this m2 your sent box only this one is too free so I hope you can click this m0 sent box and then you can just change the cluster name into the one you to have after that you can just click is the create cluster so for me I already have a lot of closer so I don't need to keep going you will take a long time to make the cluster so we need to wait for that so if you finish making this clusters you can just click this connect and then click the connect your applications we need to just copy this one so we are going to flip back over to our text editor and here so inside the server further and then configure further in here we will make the file name deprecated ass in here we will type module done export and when go you are I and paste the one we just copied from here so we also need to change this password into your own password so you may you may need to click this add new user and make this user and then make the password in here and put these put both of them in here for the username and for the password and if your password is one two three four that you need to do it like this not like this you need to delete this part so after putting the password and your name we are going to save it so I'm going to change this one into my rear password so now now I changed my password in in my second monitor now we need to put all of our files and further in side of server further so if we drag into here so now we still move all the further that belong to server inside the cyber folder now it's time to start our new JSO plication because we never started our nodejs so now it's time to do that so we are in here first we need to go to this directory this directory CD home and Ubuntu and server and here you can see these files like this first I need to download all of the dependencies that belong to this nodejs you can see here like there's a lot of dependencies like a scene big river bug parser so many things in here so we need to download them too so to do the NPM install first we need to download this NPM package a lot of package manager so I forgot to insert this one okay so sudo apt not install NPM why so now we've downloaded this our node package manager so by using node package manager we are going to download the dependencies that belong to no js' by typing npm install like this so now we've downloaded a lot of dependencies so now it's time to run star our Lotus over by typing NPM run start so our MongoDB is to connect it so we go to application here so we pressure so we are going to sign up in tears after that we will check our database so the account we will sign off will be saved inside the database so account name will be more name is step and Mars tank google.com and password the 1 2 3 4 5 6 7 1 2 3 4 5 6 7 now we click the submit redesign of successfully so now ready to check our database by going to MongoDB r2 loss so if we go down so now you can see the account is murde and image first day we've just typed in and name is thing so we've done everything for a domestic applications by using the ec2 this is actually very harder than using the Heroku and it takes a very long time also that's why some people just want to use the Heroku for really faster deployment and actually after this one we also need to do something for the SSL and Erie or does it take a longer and longer time but for the Heroku sexually they will take care of everything for us or that is the really process for using the Heroku but definitely is that we can control more or in the AWS that's why so many people are said to use the AWS and by using the AWS actually we can know the deeper knowledge about the computer science so I think it is a really good to know both of them and then just so you can choose anything you want or based on the situation so I just want to say again thank you for watching all of my videos and seeing my next project thank you

Channel: John Ahn

Views: 26,028

Keywords: EC2, AWS, Deploy, MERN, React

Id: HtWgb_vbyvY

Length: 32min 39sec (1959 seconds)

Published: Sat Feb 22 2020