Setting up an HTTPS ec2 Nodejs Server and Connecting to Frontend

right i hope everyone's well uh today we're going to be doing a video which i think will be helpful for a lot of people um so what we're going to be doing is connecting a backend no js express server with setting up with https because well you need it if you're going to put it on the web um and then also pairing that up correctly with the front end which is obviously client side what the user sees now i've had a lot of issues um over the past few months whenever whenever whenever i've been practicing my own ideas and implementing them i've had i've had a lot of difficulty getting them up and getting the node server on https using the hypertext transfer protocol secure version now it's very important that you are able to do this because uh well first of all for data to be sent from an https url such as your website of course you you highly recommended to have your own website as an https amazon web services have it if you don't have it google pops up with this not secure website now that is pretty off-putting for users so definitely you want to get that lock symbol now when you're sending requests from this type of uh from this type of domain then you can only send it to to servers which are secured themselves so today we're going to be looking at how to do that like i said i've had challenges before but i've figured out a good way and i'm going to share in this video so first of all we're just going to begin with setting up the actual ec2 instance now this is going to be done on amazon web services we're going to be using one of their products called the uh elastic computer which is essentially just a digital what's the word for it um uh virtual machine so we're going to be using one of their virtual machines and what that means is that we don't have to have it on our own device on our own local host and have it running on here permanently we're going to have it on the amazon web services so i'm just going to log in and i'm going to let you guys figure out how to do it yourself i'm sure that's quite straightforward so i'm going to log in and take it away from there right so now that i'm in we can click onto ec2 um or you can go into services i think for me ec2 comes up just because i have been using them recently but if you go into services go into compute and then ec2 virtual servers in the cloud i'm going to click on that and we're going to create um we're going to create our own ec2 instance so you just want to click launch instance from there let's go full screen make it a bit clearer so call it um very cool test and so it's going to be in amazon this is all totally free by the way i didn't mention that totally free to do this so we're going to use the amazon linux aws free tier eligible uh we're going to keep that at the same key pair we'll press create key pair so this is what's going to allow us to ssh into our virtual machine uh ssh is the method of connecting to these virtual machines so we're going to create a new key pair again i'll just call it test um i'm going to create that that will then be downloaded into my downloads folder and network settings okay so this is important we're going to firstly allow https traffic and we're also going to allow http um but these need to be these need to be clicked now just by clicking these um if you don't click these you can configure it later on but it's far easier to do it like this with this ssh traffic this is like it says here helps you connect your instance now we're just going to put my ip for this it's far more secure it means that anybody who's not on your ssh even if they even not on your ip address even if they do have your code they won't be able to connect uh and okay yeah launch instance so that's everything set up uh take a bit to launch so if we go on to our instances now j called test pending so it's going to take a few maybe a minute or so so i'm going to pause it and i'll get back once that's been done cool so now that's up and running we're going to click on it and we're just going to click on this connect button over here and this will give us all the information we need to connect so we're going to be using the ssh client um now like i said this is all the information we need i'm going to show you how you do connect to it you can do it from your visual studio code right and you're going to need to have this uh remote explorer installed i'm not sure if it comes installed already if it doesn't download it and this allows you to connect to virtual machines from your vs code which is really great um so we're going to click that configure button and we're going to go to our ssh config file i'm assuming you've already set up this at this point uh i can't remember how you do it i did it so long ago but it's quite straightforward to do so i'll look it up and i'll put some information in the description now this is where we enter the information so this is for a previous thing that i've done so we're just gonna the host it doesn't matter what the host is the host will just call again test uh host name this is important so the host name is what we're connecting to you can either use the ip address which is what we've done over here or you can use this longer one i'm going to use the longer one just because it's uh it's given to us and then we're going to do user i think again this doesn't actually matter i'm just going to go user and then the identity file well that's the thing that we've just downloaded so if i go onto my downloads and i'm gonna copy it as a path uh so downloads right click on it and copy as path and now i'm just going to paste that in here save it and as you can see it pops up we just need to press this test this connect button up it's going to pop a new window and the platform we're using is linux linux is the three-tier version so we're going to be using linux continue and we're going to be loading in anytime soon awesome so so we're in we're in uh if i go into the terminal because obviously we're using a bash linux terminal uh i can firstly see what uh well i'll print the working directory so we're in this directory here and there is currently there's no files within it so we're going to create a new file using mr make directory and again i'll just call it test so then i'm going to cd into that file cd test and from here we're going to this is where we're going to put all the code so first of all we're going to actually just download node onto our ec2 instance um because it doesn't come installed so we're going to do that now right so my go-to resource for setting up an amazon ec2 instance is not the amazon docs every time i've done it following the amazon docs method it just doesn't work it's this guy's video check it out it's really really good uh you probably don't need to check it out because i'm going to run through what he does in this video but it's a great video i'm going to subscribe to him now as well actually so sam meech ward awesome video uh all of his stuff's in the in the bio so we're just gonna copy and paste these commands into our terminal and that's going to install um the going to install node for us though just literally copy and paste we'll do the same for this so copy and paste the second line in and now we're going to do uh install node.js and this is all we need to do this is just other stuff that he's got for his own um for his own project so like i said sam cheers for this man i'm gonna link his lick his video link his uh link is bio whatever in the description as well uh and as you can see he's got other tutorials so check them out check them out righty so now we've firstly connected to our ec2 instance and we have also downloaded node onto our ec2 instance so now we're just going to initialize a node repository we're still in the test directory so we're just going to do it in here npm in it just enter enter enter yes that's okay and now if we check our files uh i'm just gonna open the test file okay yes i trust the authors and as you can see we've got our package json in here so there's two things that we're going to need to install we're going to be making an express server so we're going to be needing to install express and we're also going to be needing to install this thing called pm2 pm2 is how we're going to get this node piece to run just all the time so first of all we're going to install express and then we're going to need to install pm2 globally which is why i've done it separately so we're going to say npm install g and pm2 right so there's been an error installing pm2 and that's because we've done we've done it globally and we don't have the actual permissions to do it so if you want to install something great globally we need to pre-pend it with the sudo keyword that that just allows you um kind of master uh master permissions so we're going to do sudo install g pmt sudo npm install sgpm2 i'm going to use the show out because i don't want to do it a third time brilliant so now that we've done everything we're actually ready to set up our express app uh now there's two ways we can set up the file we can do it by pressing new file or we can do touch um we can say touch and then we're just gonna go to server.js and that will create this file in here so the first thing we're going to need to do is we're going to need to require express um so we're going to say const express equals require express and then we're going to say const app equals express and this is pretty much what we need to set up our node server so if we go straight away we can do app.listen uh and then now we can give in the port so what i'm actually just gonna do is i'm gonna declare the port as a variable so we're gonna say port equals 3000 this is the port we're going to be listening on and then we're going to listen on the port and then we can also add a callback function which is just going to say listening and we're going to use not this in fact we use backtick so that we can inject our our port variables we're going to say listening on and then we'll use that and we'll say port so if we go on to node server given we've setted everything up right it should say listening on port haven't done console log it's stupid to me there we go so let's close that after the listening on 3 000 to be honest i don't usually do this uh i never do it um because i know that it does work so that's that's our server set up it's not doing anything useful yet uh and there is actually a few things that we do need to add but to be honest i'm not gonna do it in this tutorial so i would recommend adding uh json body body body body parser so yeah add body passwords just mpm uh body password and that will allow essentially a website to communicate more easily um and also what else there's a few things we do need to install we're going to need to install fs which is like a file service manager um because it doesn't come default into inter into our downloads we're going to need to install fs we're also going to need to install https so we're going to install those quickly now as you can see happen very quickly because they're quite small right so like i said this server isn't doing too much anymore if i start the server again and we go on to our localhost port 3000 uh then oh sorry we're not on the local host we're actually on this ec2 instance now so if i go over onto this one here and open the address nothing's going to happen uh first because we're not on the port 3000 also it's not https so this is this is the correct uh server for our port nothing's happening because we're not doing anything so we're actually just going to set up a page where it just prints hello world so it's going to be on the on the initial direction on the initial slug whatever you want to call it and uh what's it going to do it's going to take a request and it's going to send a response and we're going to send hello world and now if we restart this also another i don't know why i'm not huh didn't see me right so if we go back onto this now we're listening to right so there's some error um for some reason it's not doing anything so i'm going to try to figure out why but to be honest i don't actually know why i'm going to keep on trying right so i think it's actually because the way we've configured it how we did it so that you can only listen through port 80 and if i show you in the security uh so it's only listening on port 80 in portfolio 443 now that just means that's not an issue because we have to go around this issue anyway so i'm just going we're going to go and do that before earlier tonight then than i thought as you can see it's not as simple as just listening on paul 80 straight away and that's because if we do that and we start to serve as you can see port 80 is already the position's been denied i think something's either already using it or um basically we can't use it but what we can do is we can redirect traffic from port 3000 and we can redirect it onto port 80. so the way that i'm going to do that is through this uh stack overflow thing that i saw so we'll copy and paste it just copy and paste that in and that's automatically done it so now it's redirecting stuff that goes to 3000 onto port 80. so we'll start the server and saved it there we go so listening on port 3000 if we now head over back to our thing and we go so i've changed it since fiddling around with it um and if we go poor no don't need to do anything port 80 by default with http so we'll just want to do that and then we just want to go poor sorry slash api there we go okay now it works right so we had to redirect it slightly before um it's not an issue that i've noticed before but clearly too maybe i haven't actually configured these settings until a point afterwards uh but good so actually by doing that we've uh ticked kind of two boxes uh we've redirected the traffic so we're also gonna have to redirect the traffic one more time we're gonna have to redirect it for our https server now by default https listens on this port 443 so that's the this is our https port so we're also going to have to redirect some traffic onto that one there and we're going to do that by going so it is going to it's going to be 443 and the port that we're going to call it on is 8443 but we haven't got to setting that up quite yet eight four four three this is just ahead of setting up but yeah uh next step is now we're going to do the front end and then we'll finish off by linking it up at the back end with the https so yeah again we'll do the front end totally from scratch i'm going to make a new folder and call it test and then to open up visual studio i'm just going to drag and drop it in over there we've got our our backend server still open just i've uh minimized it for the moment um and like i said it's going to be a really really basic html page with some javascript and maybe some serials oops so yeah with some javascript so uh css nationals we'll do index html and we're going to have uh let's make it div first and it's going to say welcome to this tutorial uh and then we're going to just have an empty uh p tag which we're gonna give it a class name um i'm used to doing react so class and we're gonna give it a class and the name is going to be link doesn't really matter what the name is and for now it's going to be empty so i'm not actually going to i'm not actually going to do anything with it quite yet um then we're going to make our javascript so we're going to make a script.js and we're going to link that into the page using the script tag a script src and we just want dot slash that and now i'm not going to bother with any css so if we open up this with our live server this is a extension you need to install you get welcome to this tutorial and um yeah nothing else because we've just got an empty class there uh and what we're going to do now i'm going to call it id just so that we use document element by id it doesn't matter there's also a document element by class name it really doesn't matter at all so firstly in our javascript code we're going to create a constant variable called the link and that's going to be document.getelementbyid and we're going to use the link because that's what the id is over here we've got the id equals link uh you can use query selector you can use get element by class you can do all these different methods now what we're going to do is we're also going to call a we're going to use the inbuilt fetch api which is built into javascript it's a way of communicating with apis uh sending requests and we'll be able to send requests to this page over here which has this information so we're gonna do um i'm gonna use asynchronous uh code for it so let's think about what we need to do right so i've thought about it a little bit more we're also gonna add a button and what the button's going to do is it's going to we're going to click the button then it's going to talk to the api and fetch it and go from there so we're going to have a button uh we're going to say click me and again this is going to have an id of i'm just going to call it button so we do a similar thing we'll say fonts button equals document.getelementbyid and it's called button i didn't say i do yeah right okay so we're going to add a event listener to this button uh button dot add event listener i'm just going to listen to the click and then it's going to call this function so it's going to call an asynchronous function because we're using the fetch api which is asynchronous and that means we need to use this async keyword uh then we need to well then we need to actually interact with the fetch api so we'll say const our response equals fetch and we're just going to copy and paste the [Music] uh what's it called from over here so cropping paste it from this api here and that's gonna oh we need to say wait uh then we've got the response and then we're gonna say okay the data from the response equals away response dot json and this will make the data into it read in the uh readable way and for now we're just going to go console.log data body so data is quite quite a large response there's a lot of information that comes with it body is the bit that we're interested in that's the bit that gets sent in uh that's the res.10 bit so if we uh that should be good to go if i save that head over here click me and nothing happens so what we got we've got a on call error failed to get it from this api let's have a closer look we can look into the network tab and have a look at what's happened so what's this said ah of course is it cause no data found no data found right so i'm not gonna lie i am a bit rusty with doing it just with a vanilla javascript i've been doing it mainly with react and view recently so i'm a bit rusty i think this might be coming up because we haven't uh set up the core stuff properly so we're going to do that quickly uh that's also something we do need to do so we're going to go mpm install calls and i'm going to install it over here so const calls equals require i'm going to require some chords so even automatically popping up uh then we're going to say app.use and we're going to say use cause and that's just going to take in just an empty function this means um claus stands for cross origin response service or something like that it's essentially kind of the security features uh but this this gets us around a lot of things by doing that okay cool so now that we've done that it actually has uh it has worked to an extent so as you can see when i click this click me button you don't get an error so it's correct it is connected to our api but it's just returning undefined so i'm just gonna uh have a little look at what's happening and actually again i think it's because we haven't installed something yet so again i was gonna i was planning on installing this later on in the tutorial however i think we do need to do it now so we're gonna install the body parts but i know i mentioned it earlier on tonight i mentioned it earlier on uh turns out i think we do need it so we're gonna install body pasta mpm install body dash passer so then again also going to call it and install it require it over here so const uh body faster equals require body dash passer and like we did with the chords gonna go app dot use and we're gonna say body parser.json i believe um right okay i see so i'm guessing what this does firstly if you don't know the dot use property within the app uh that's how you kind of add extensions features uh to improve the flow of express now i believe by doing this that then allows this object and our in our backend server it then allows us to use this.json uh this dot json method now if that's the case and i've just learned something new which is brilliant so let's refresh it uh we saved it nope it's not up and running um do you know what we're also i'm also going to do this now so i'm going to install nodemon now nodemon is great node 1 allows you to make edits to your server and just press ctrl s and then it updates the server without having to close it and then reopen it so we are going to do that now uh should have done it at the beginning but i didn't think it was necessary and now that is taking longer than i thought i've realized it is necessary so always download node one it's very very handy i'm gonna go into our package.json and then in these scripts i'm just gonna add a dev command and we're going to say when uh well we're going to say when we do call dev that's actually just going to call nodemon server.js so we'll save that and now when we press npm run dev it uses node one server so as you can see if we go back onto our server it's up and running and we just need to change that it will save automatically we don't need to open it and close it again and it will automatically update it so node one's very very handy right okay we've now added the uh body parser so i'm going to go into our console and fingers crossed still undefined right so uh what i did was i just removed the dot body so i just deleted that and that allowed us when we click it and then returns this so we can be more specific we can say dot people and then when we click this button it will return the the variable assigned to that key um i'm just going to quickly double check if actually we needed we did even need to install that json parser in order to get this json property here yeah so that uh that body parser is it's actually only to do with this is what i initially thought it's only to do with uh when you're receiving or when you're receiving requests on the server side so that's when bodypassword.json comes up comes handy so we don't need it for this tutorial because we're going to be sending stuff over to the client and the client can handle it um but often so in in all the projects that i've used you'd need to kind of communicate both ways and in that instance you will need to do this buddypasser.json but for this tutorial it's not going to be needed however you know that uh that is very necessary um so right what's next on the to-do list right yes at the moment nothing nothing much important as our is happening so what we're going to do is we're just going to make it a bit cooler and we're going to say link.inner html we're going to say that equals data and we're going to say that equals data dot people and it's just going to pop up with this random string of letters and words uh that'll just there we go so it's injected that uh this string into the into the paragraph now now we're going to get onto the main focus of the video and the main focus of the video is turning this from being an http not secure server and we're going to make an https server now why do we want to do that we want to do that because when we're on a website when we have our own website and we publish it to something like netlify yet we want to have an https tag so we can get that secure lock on it that's is it's just a given we need it we cannot communicate to these backend servers unless they are also the https protocol so it's absolutely the utmost importance that we get both of these to become the to become secure now for security you need to use you need to get a certificate and you need to get a key uh and you can do it yourself you can you can use open ssl within your uh in the command line you can make your own certificates and you can sign them yourself but it it doesn't work it gives you an unsecured certificate so it's just it's very very annoying you can make them your own but they don't they don't work so you're going to need to use a provider the provider that i use is xero ssl now they're totally free um not totally free they are free to an extent so if we log in i'm just going to log in using my credentials okay cool it's already done now you get three 90-day certificates um to use so to be honest for most people that's that's sufficient um it's also pretty cheap uh once you do go beyond it but then there's also you can use uh openness let me see there's there's another free ssl provider that you can use i think it might be openness so i a lot of people recommend this i've actually had a lot of difficulty uh using it myself but this is a free method using xero ssl so we're just going to press new certificate uh we're going to enter the domain so that that domain is this here it's our aws server enter that control v and we don't want the http bit so we're going to delete that now it's saying it's a valid server so we want a 90-day certificate one year is for the pro version we're going to auto generate the csr next step i'm going to press next step so right this might be because i've done too many or something right so reach my limit which is really really annoying um is there oh something see look how many have cancer oh damn right okay i'm just going to create a new account right so uh not the best advertisement for these guys no i'm not that i'm actually advertising them they're not they haven't paid me enough about that uh they wouldn't pay me i get like 20 views a video um right so yeah i think it should still be copy and pasted in remove the http bit next step we're going to take a 90 day certificate auto generate finalize your order got the free tier because it's a new account and there we go right so now we need to verify it so we're going to be using the http file upload method um because c names with aws i've got no idea i do know what a c name is but i don't know how to use them with aws so we're going to be using http file upload uh now how do we use this okay so what xero ssl are asking us to do is they're asking us to have a have this uh have these paths what's the word for them routes routes that's the word so we want to have this route and we want to have uh this file underneath it so right now of course if we click on the link there's nothing there but if we download right so yeah download auth file i'm gonna download that auth file uh we're then just gonna drag and drop it into our server so we're gonna open up our server again uh i'm just gonna drag and drop it in here so this is it's just temporary not very important uh because we can delete it afterwards we'll delete that we'll delete that right so what do we want to do so we firstly want to uh use that fs module that we've installed so we're going to say require fs so we're going to do that and then what are we going to do we're then going to need to import this this file so how do we do that let me just have a little reference yeah okay so we're just going to say right uh const file equals fs dots read file sync and then it's going to be taken i'm going to copy and paste this dot txt cool then we're going to need to make this route which is very straightforward so what we're going to do for that is we're just going to say create a new route we're going to say app.get and it's going to copy and paste this uh and then we're gonna copy and paste this now before i do anything i'm just gonna check that the route is working it's gonna get a request and a response and that's going to go to an arrow function is there a closed bracket no there's a closed bracket right that's where the close bracket is uh so it's going to take a request and a response and we're going to say res.send and oh now we're just going to say red dot send file and we're going to just send file now i've done this correctly we click on this link your path must string right okay so we don't go res far far we go res.file like that so let's save that refresh the page what's going on oh error path must be a string teres.writer is a string refresh okay so it needs to be the absolute path so what we're going to do is we're just going to right click on that and we're going to say copy path and now we're going to go like that so fingers crossed this is it there we go so that's the information now we can verify it press next step verify domain and it's verified so now we're going to receive the certificate and we're going to receive the key and then we're just going to add that into our own website into our backend server and that's going to act as uh as as the certification that is secure so yeah let's download this zip file so when we download it uh i'm gonna extract it uh just into my downloads for the meantime and we're only interested in the private key and the certificate so again we'll just drag and drop it in here um close this close this we will be using the file sync for this stuff we don't need this anymore so i'm just going to delete that route and that's not what we're file syncing so we're going to be taking the private key private.key uh pull that the key and we're going to be taking the certificate fs dot read file sync and that's going to be certificate uh good i think i'll spell that right okay we're also gonna now require the https module we installed at the beginning i'm gonna say const http equals require i'm pretty sure i've installed it http recommendation on this is so bad i think it's slow because it's uh because it is a because it is a virtual machine uh okey dokey so we've got that uh now we just need to listen to it we've already we've already moved the port over we've already what's the word we've already redirected the the traffic that's going from 8443 and we've redirected that into 443 which is the https so now what we need to do is we just need to set up an https port to listen on so we're going to firstly um put these variables here i'm just going to do that over here i'm going to say const and we're going to say what do we call it doesn't matter what you call it what i call it over here i call it the credentials so const cred and that's going to be an object it has the key which is the key we can actually shorten the syntax because it's got the same name so we just say key and then we'll just say sir as well and then we need to say uh i think it's https i'm just going to double check this right so we need to create another variable so constant https server and that's going to equal https.createserver and then it's going to be taking in the credentials and it's going to be listening for the app and then we're going to say https server dot listen and then we're gonna do eight four four three now the reason why we're saying eight four four three is because earlier on in the tutorial when we redirected the the traffic to port 80 we also redirected the traffic to port 443 so we redirected the traffic from port 8443 to port 443 and port 443 is where the https server runs from so this is all good to go now and now our server is totally secure so uh at the moment if we well let's just [Music] that's not right that's our thing in the bobby https there we go and it's we got the lock it's worked yeah if we remove this if we're saying don't listen to it there it's not going to work throwing an error refuse to correct connect now so if we also then don't use the correct credentials say key equals crashed most okay so well essentially we need to also use the correct key and certificate that's also very important so yeah uh that's the tutorial done uh of course every kind of aspect covered in this video is very very basic level uh of course if you want to turn this and use it into your own app this is not an app yet but this is the basis to build an app upon build a web app upon um so yeah we've got that special lock this then allows our which we don't have but um our when our live server is going to be https and like i've said i've emphasized this many times before you must have an https server side if you want to connect your client side to it right now it's just http on this on this web app on the html page um but when it comes to when it comes to getting your web app uh your front end app https then it is far easier if for example if you're using netlify by default you get an https uh certificate so yeah i hope that was interesting i hope that was useful uh drop a like whatever do that stuff and yeah i'll see you in the next video right i do apologize i missed one little thing out and that's how we can keep the server running forever without having to worry about it um if you remember at the very beginning of the video we installed pm2 which is the which is the node package that we're going to be using to do it so to use that very very quick just going to go pm2 start and the name of the server server.js and what this will do is it just sets up uh sets up some sort of system i don't know how they do it to be honest uh which just has it permanently running and as you can see we still use the node we can actually still use the terminal if we close the app it will still be working and this is great because it just means we have it on the background just running permanently all times so this is the action of the video like i said hope you enjoyed it and yeah stay tuned for more stuff like this in the future

Channel: Jay Cool

Views: 7,191

Keywords:

Id: q-XEGbipOVw

Length: 41min 44sec (2504 seconds)

Published: Sun May 22 2022