Deploy a NodeJS React app to AWS EC2 (EASY!)

well hello there it's nice to see you even though i don't actually see you by the way and you don't see me either i don't know where i was going with that one anyway cringe aside in this video i'm gonna show you an easy way on how to deploy a react app with its node.js server both deploy them onto aws ec2 and we'll be using this chat app that we made as part of a series a while ago and we'll be using this as an example to deploy it many of you have written this alongside myself and but if you haven't you can just go to this git repo and i suggest you clone it from here and follow along it will make the deployment much easier now of course this app runs a front-end app um a react app on the front end on port 3000 and an apollo server backend on port 4000 but this applies as well to any node.js app because at the end of the day apollo server is just a node.js app it runs express in the background all right so before we get going please make sure to destroy the like button and subscribe to the channel if you haven't done so yet all right let's roll the intro shall we all right let's go to uh vs code and i have prepared this deploy markdown file that shows you like the steps that we're going to take to deploy the app and you can keep it as a reference first we need to prepare our code so let's start with i'm actually going to start on the server and here i want to change one thing is subscriptions are going to slash graphql i just want to make them go to just slash so here we'll add subscriptions and this will be an object and we'll have a property path oh this will be just a slash like that and we can actually get from here a subscriptions url this one and let's duplicate this line and here we can say subscriptions just for us to see that it's working ready at and we put that subscriptions url and save let's took our console so now when our server starts it says subscription is ready at uh websockets localhost 4000 slash so without slash graphql now um so this is done actually for the database configuration so here in the config.json i want to have these as part of a env file and i want to centralize all of these secret keys in one file in a dot env file so let's uh let's get let's do that so i'm going to copy all this development uh object just copy all the keys inside of it i'll create a new file a dot env and paste those in and select this quotation until here until the second quote and hit ctrl d and do equals and then remove all these quotations and also remove all of the um commas on this one as well and then this back so this is like kind of the the syntax of a dot env and here i'll put a comment and say database credent all right for this this file will be different on the server and this will not be pushed to the get repo of course so let's go to the get ignore and add a dot env so that it ignores it and i'm actually going to remove the config because i want to push this and i'm going to make this take the variables from the dot env so these are fine for now but actually i want to change the names here i'll call this db underscore username the convention with the env files is you have this uppercase constant naming scheme so here will be db underscore password and this will be db underscore database db host and db dialect all right save that and uh let's open the terminal i'm going to close the server and in the root directory install so npm install dot env and here in our server.js before we load any relative import let's load that dot env and say require dot env dot config config run it like that by default it's going to look for a dot env file in the same directory and it's going to find it and it's going to add these to a process.env variables so to use those let's go to the config.json and here i'm actually going to make this a config.js first be able to use the env so i'll say require.env now you might be thinking why am i requiring dot env here is for the sqlize cli to be able to access this because it's going to run it separately so here we'll say config but here we'll pass the directory because it's not in the same directory so go back one level and say dot env and here we're going to say module dot exports and we're just going to export one of these not all of them so i'm just going to remove all of this down to here and we'll replace these by the process.env variable so process.env this will be the db um username i'm going to actually save this remove i'm going to duplicate this four more times and this will be the database so here database and this will be the host host password i'm sure i should have done password second so password i'm gonna move it up and here this will be the dialect dialect db underscore dialect i'm going to remove these now this should work exactly the same we can test it let's go to the terminal and we can just say sqlize db migrate status just to check that's equalized cool the cli can actually use this configuration and it works just fine okay so i'm actually going to copy all the contents from here actually i forgot we need to add a no dnv so node underscore env and here we're in a local environment so we'll say development develop mint and uh actually this env.json needs to move to the dnv as well so i'm going to copy this go to the env paste it replace that with an equals remove the quotations from here and here save that i'm going to delete this env.json we don't need it anymore and let's go search for jwt underscore secret because we need to replace all the occurrences we no longer have this env file so in the users.js remove that import and we need to go down here and say process dot env.jwt secret i'm going to copy that and go to context middleware remove this import and replace that with process.env.jwt secret all right close that that's fine i'm going to copy this into a new file create a new file dot env dot example and paste that in so that we can make it easy uh for whoever is like cloning this to populate this so i'm gonna remove all of this um delete all of these same thing with as that and save and this will actually be pushed to the get repo and it actually makes it easier for us to set up our code on the server so that's everything set up with the server but for the client we need to go to usually you go to package.json and you set a proxy variable here but for apollo we'll go let's go to source to our apollo provider and we need to change these uris this will now be relative so this will point to slash graphql slash and i'll explain later why it's graphql and make sure to have this trailing slash and here for the websockets link actually this needs to have the host but since this is executing on the client side we can get the host from the window object so let's say consthost equals window.location.host and here instead of localhost 4000 do dollar sign curly brace host and close that and add a trailing slash and save let's run uh let's run our server to check if it's working fine all right so we have a i forgot that we have a index.js inside of the models folder that's actually requiring the configuration so let's go there and now we actually don't need this anymore so we don't need the config actually i'm going to leave it because i'm just going to remove this denv because if you wanted to add some other configuration you can still add it here so i'm gonna keep it but of course now it's importing from config.js and we don't need this env here because this is available now and remove that line and here we're not we're not going to do this check because we're always using environment variables anyway so i'm going to remove all of this remove that and here's a const equalize and save this should work actually i'm going to save without formatting this should work exactly the same so let's open the terminal say npm run dev all right it runs and if i go and just test out for example the login it runs just fine cool so now we can push our code so break that and say get add all get commit and the message will be prepared code for deployment and let's push get push origin master all right our code is pushed let me close this and close everything and let's check the deploy.md so we've done all of this the next step was to set up an ec2 instance so let's go let's head over to aws and let's go to services ec2 and here go to running instances and let's launch a new instance and select the free tier to get just the free ones if you are interested in staying in the free theater and let's go to the ubuntu one selected t2 micro that's fine uh preview and launch that's fine launch and here i'm going to say create a new keeper i'm going to call this chat and make sure to download it because we're gonna need it uh launch instance okay view instances all right it's pending i'm gonna wait for it to uh become running all right our instance is running so we can actually connect to it via ssh now let's uh click on that and make this bigger let's copy this public ip um to make sure i've copied it all right i have and i'm going to open git bash make this full screen make this a bit bigger i'm going to cd into my downloads folder where that key is that i downloaded and let's say ssh dash i and let's use that key so chat dot pem it creates an ubuntu user by default so let's say ubuntu at and then paste that public ip and hit enter yes i'm going to add that and there we go we're actually now ssh into our server now first thing i want to do is i want to clone the repo where the the our code is and bring it into our server and it's right here and this is a private uh public repo so i can just clone it with the https but i'm gonna work assuming that this is a private repo because you know usually you'll have your code in a private repo and for us to be able to pull code from a private repo we need to add a deploy key so let's go to the settings of the of this repo and let's go to deploy keys and here we need to add an ssh key that represents our server and actually let's generate one first so i'm going to go and google generate ssh key go to this github link and just copy this command from here and let's go to our server and cd into a hidden directory dot ssh and here paste that command and change this with your email i'm going to put my email here clast gmail.com hit enter okay i hit enter enter i'm okay with that name and no passphrase and ls and here you'll see we have these two new files and here i'll do vim id rsa.pub for the public key i'm going to copy the entire contents of the of the key and go back to github and here add a deploy key and i'll call it ec2 server and paste that in no no right access because it just needs to pull the code and now we can actually clone this code even if it was a private repo so let's grab the get endpoint and let's go back to our server exit this colon queue i'm actually going to clear the console cd back and here i'll say get clone and paste that in and i want to clone it into a directory and i'll call this messageme.com which is the fake domain name that i have for this i don't actually own that domain name but i just called it around all right yes on trusted cool now if we do ls we have this directory if we see the into messageme.com do ls you see that all of our code is here so now let's actually install the dependencies for our server to run so let's say npm install and i forgot we actually don't have npm and node installed in our server but we can actually install it so we need to install a binary version for ubuntu so we'll say node um i already googled it node.js node source let's go here to this github link scroll down and let's grab 12 because that's the stable one uh copy this curl command and go back to our server paste it and run it and let's go back again we need to copy this uh install command to install the package that we just downloaded wait for it okay it's done paste that and hit enter all right now we have node installed we can check node.v there you go we have 12.18.4 and of course same thing for npm so now we can run npm install to install of all of the dependencies for our server all right i'm gonna see the inter client and install the dependencies for client as well run npm install inside of client and now we need to actually connect our server into a database so that we can have where to store data and for this let's go to aws and let's go to services i'm actually going to duplicate this let's go to services rds because this app uses a mysql database i'm going to create a new rds instance here just go create database and select my sql and here select free tier i'm going to call this cluster chat master username is admin and for the password let's generate i'm using lastpass here to generate a secure password i'm going to copy it make sure to actually store this i'm actually going to go back to my desktop and create a new text file so call it db creds so that i don't lose it and here i say username actually make this bigger is admin password is what i just copied and let's go back and that's fine so actually i forgot to fill it i'm just going to paste it twice here and tito micro that's fine and that everything else is fine here actually for connectivity i'm going to click on additional and give it public access so that i can connect to it from my machine uh just to demonstrate some stuff it's not actually just like open to the public by the way you still need to have the admin and the password uh you know the password that we just created so it's not you know open for anyone hit create and uh no it's not actually my password i'm gonna wait for it to finish provisioning and creating the database it says backing up but i think it's done creating it's just like doing like a snapshot of it yeah it's available so we can connect to it um you don't have to do this but i just want to demonstrate to you how to connect to it let's go to my sql shell and do backslash c to connect and our user is admin and do add and paste that endpoint there and hit enter and it needs the password so i'm going to grab the password from that db creds file that i created so copy that and go here paste it and hit enter and wait for it all right you can't connect okay i know why it's because rds even though it says publicly accessible but we need to actually go to the security group so click on that security group and here make this bigger let's go to inbound rules and go edit inbound rules it doesn't um it doesn't allow anything other than that vpc to connect so let's add another rule here and select uh scroll down go to my sql slash aurora and for the source do anywhere so any source can connect through three port 3306 save that and now if i go back to the my sql shell and try to connect and when it's that password again copy it and paste it this time it should connect all right yes save password and there we go we're actually connected so do backslash sql just change to that show databases and we get the default uh mysql databases cool now let's actually connect our server to this database and let's go to the other terminal cd1 level back and now we need to create the actual env file so we can copy that the example envy so say cp dot env dot example and say dot env and now vim dot env or nano if you prefer that and here we can we need to populate these so the node env will be production because this is a production server and the jwt secret i'm just gonna put like some gibberish for now you can generate a secure one and paste it and the db username will be admin the db password will be the password that i have copied and the database will call this chat it hasn't been created yet because remember that chat thing that's a cluster it's not just a single database and the host will be let me copy it again let's go back to rds um let's go back to oh somehow on ec2 again no actually i'm in an rds that's one copy this endpoint and let's go back to the terminal paste that there and the dialect is my sequel all right hit escape colon x to save and now we need to find out if sqlize can connect to it and we need to actually install uh sqli cli globally so npm install dash g sequalize dash cli and give that a second to install oh sorry i forgot to add sudo because otherwise we don't have permission to update any system files all right we have sqlize now the moment of truth i'm gonna run sqlize uh sqlize db create to create the actual database all right database chat created and if we go to the mysql shell actually let me make this bigger and i say show databases there we go we get a chat database that's been created nice so now our server is actually connected to our database so now let's run the migrations so sqlize db colon migrate my great and let's run the cds as well so dbc'd all and now if we go back to my sql shell use that chat db and select select from users cool we get our like three you know fake users that we have created all right so the data has been seeded so now we actually need to run our server now we could type nodeserver.js and this will run the server and everything will be fine but obviously this is you know this is not the approach that we need because each time we escape from it the server stops and nothing is serving our front end um let's fix the second one first let's uh we need to build our front end files and serve them as static files and before we can do that we need to set up nginx which is a web server that will help us like kind of like route the different services to whatever our client is requesting so let's install nginx so let's say sudo apt apt install engine x hit enter and let it install yes all right it's done installing and it all automatically runs itself so let's check let's go to ec2 and copy that public ip and open a new tab and paste it and see what we get there we don't get anything it just hangs i know why because we need to actually allow http access to the ip to that ec2 instance so let's go back to ec2 and go to security and click on that security group that's associated with instance and here in the in click inbound rules edit inbound rules you see we only have a rule to allow ssh that's why we connect to it but we need to add another rule and here select uh where is it http and the source is anywhere so we need to allow anywhere to connect through http and now if we go back to that tab and hit enter there we go we get welcome to nginx which is the default nginx page now of course we need to change this so let's go back to our server and to show you where that's coming from by the way you can cd to the uh slash etc www and www and uh oh it doesn't exist oh my bad not etc slash var slash www and if you do ls you get an html directory if we see the intuit we get this index uh html so let's uh actually edit it and here let's say welcome to i'm gonna change this to welcome to chat app and hit colon x actually i needed to uh do sudo my bad because we don't own this as the user ubuntu um this is kind of redundant but it's just like a small demonstration save it and now that we have updated that i updated the title of the document not this header so yeah it is it does say welcome to chat up here so it has changed all right so we need to change the configuration of nginx to make it point to our application and uh first i want to build the front-end files of our app so let's do cd to go back to our users and cd into messageme.com see the into client and here we need actually i'm just going to clear the console we need to build our client files so let's say npm run build to build our react application all right so our app is built now i'm going to create a new directory next to the html directory that the nginx has i'm also going to say make the slash var slash www slash and i'm going to call it the same domain name that we're using for this so msg me message me dot com hit enter i need to do sudo and hit enter okay now it's created it which reminds me actually we need to own this as this user so do let's remove this make there and let's say ch own to make this user the owner of this directory dash capital r and do dollar sign uh uppercase user colon dollar sign uppercase user and give that directory hit enter and now we can actually operate anything on that directory now we have everything inside of this build directory right here that is our static files so we need to move everything into this directory so let's say um actually i'm just going to copy them so say cp r and build slash star and we're going to move them into slash far slash dub dub dub slash message me dot com and hit enter and now if we do ls slash message me you'll see that we have all of our react files there the static app and if we go here and we refresh oh actually nothing happens because we're not we're not serving those files so we need to edit the uh nginx uh configuration so let's cd into slash etc nginx and actually what is it yes uh let's cd into uh sites available and here we get the default file here so let's do sudo uh vim default to edit it and let's scroll down and right here this is where it's pointing to the the default files that it serves so now let's actually edit this and we need to point it into var dub dub dub msgme so messageme.com and put a colander and down here as well inside of this location block i'm going to replace this so leave try files dollar sign uri and here's a slash index.html which will be the default file that you will serve from there so escape colon x to save and now we need to restart nginx for this change to uh to take place so let's say sudo system ctl restart nginx and hit enter and now let's go back to chrome refresh and there we go we actually get our front end uh but of course it's not connected to any backend and it's failing this websockets connection because of course our backend is not running yet and if we click login it's going to fail because there's no server so that's easily fixable let's uh cd into our users and cd into messageme.com and here we can run our app doing a node server but of course that approach wouldn't work because each time we'd leave it would break it so we're going to install pm2 which is a process manager so let's say npm install gpm2 and let that install and what this does basically it manages the different node servers that you have on the server and then it keeps them running even though when you leave again i forgot the pseudo add sugar to that and hit enter now we can say pm2 [Music] add actually not add start make sure you're in the directory messageme.com say server.js and do dash dash name let's give it a name and this will be just server and hit enter and there we go it actually gives you a list of the processes and the server process now is online and is working to check we can just do curl local host 4000 i mean we get this get query missing but this is the normal response from you know the an apollo or like a graphql server so our server is actually running but we need to route all the requests that come to our server to this we need to do something called a reverse proxy so let's see the uh actually without csd in let's say we need to edit the nginx the configuration so let's say sudo vim and do slash etc slash nginx slash sites available slash default and down here under this location slash block i'm going to set another server block and tab here say location and i'm going to point anything that goes to the server to slash graphql slash like this and open curly braces and close them here and tab again twice and here we'll say proxy pass http colon slash slash local localhost 4000 slash colon semicolon and now this alone any request that comes to our server to slash graphql will point it to our running node.js apollo server but i'm going to add a couple of lines which help our um subscriptions actually route into a websocket instead of staying on an http in case it's actually a request for subscription i'm going to add these three lines don't think too much about them but they're just lines that you add and uh yeah you just configure this once and you leave it so here we'll say proxy http version and this will be 1.1 and do colon semicolon rather and he will say proxy the underscore set underscore header and we're going to need to set the upgrade header so up grade and here we'll do dollar sign http underscore upgrade and do semicolon and here we're going to add another header so proxy set header and this will be the connection header connection and this will say up una update upgrade and close that and do semicolon and escape colon x to save and now we just need to restart nginx so actually sudo keep forgetting that sudo system control stem ctl restart nginx alright now let's go back to our server and uh not the server sorry the click on the ip now we get our front end but we'll get our back and click on login and there we go we do get our backend and it works and if you go to uh network and xhr which i'm gonna refresh there you go you see we send a request to slash graphql and it's actually pointing it to our server if i put john and one two three four five six and hit enter we do log in and uh if i go to websockets it actually requests the uh switches the protocol successfully and it actually you know subscribes and if i hit the reaction here we get the payload here and even web subscriptions and web subscriptions websockets are connecting successfully all right i hope this was not too overwhelming and again like everything is in the github i'm gonna push all of this to the repo and uh yeah if you have any questions if you get stuck on anything please let me know in the comments again like smash the like button for the algorithm to spread this video out there so we get more people in and explore the channel all right thank you very much for watching and i'll see you in the next one cheers

Channel: Classsed

Views: 36,639

Keywords: deploy nodejs aws ec2, deploy nodejs, deploy mern stack to aws ec2, deploy apollo server aws ec2, deeploy nodejs ec2, deploy a nodedjs react app

Id: rE8mJ1OYjmM

Length: 31min 47sec (1907 seconds)

Published: Fri Sep 18 2020