Deploy Node+React (MERN) app to AWS Lightsail

in this video we are going to deploy a node.js and react application to AWS light sail our app has a server written in node.js with Express and a single page application client written in react you can replace react with other framework the process will be more or less the same the advantage with using AWS light sale is that it's a pretty straightforward product and also very affordable the cheapest part started 3.50 and they include a static IP and also the tooling we can use to generate free SSL certificates from let's encrypt we will use one single light sail pod to deploy both the server and the client they will be deployed to different sub domains and we will use Virtual hosts in a Apache web server for achieving that I will be using a starter code for this video you can find it in video description below also there you will find the commands we use and relevant URLs if you want to support the Channel please like the video or consider subscribing we have a lot of videos on working with different Cloud environments such as Google Cloud AWS and more videos are coming up thank you we are going to take a look at the starter code so I opened it in a visual studio code and we have two directories in here client and server we are going to start with the server it only has the one file index.js as I said it's just a basic Express app it has cores enabled it runs on Port 8000 and uh it just it will um just return a random number with two decimals between 0 and 10. we can actually try it out so in here if we navigate to server we do an npm install and then if we do node and then index.js we see the server has started and if we go to localhost 8000 we see a random number if we refresh the page we get a new number every time and now for the client as I said it's a single page app in react so we can just start it and we can discuss it later so I'll open a new terminal in here navigate to client we need to do an npm install and then npm run start so it's just this basic UI for our server every time we click this generate button it makes um Ajax request to the server and it fetches a new number so in here if we go to client source app.js we will see that we have the button on click and then handle click and for handle click is just doing a fetch to localhost 8000 and sets the state the response in the field that then gets displayed as a paragraph with that being said we can continue by deploying our app to AWS so we can stop these both the client and the server for now um I'm assuming you already have AWS account and you have billing enabled and you are signed in so this is the AWS console and we need to navigate to the light sale product I have it here but you can just search it in a bar if you cannot find it so it says light sale next we can create an instance so we can select a location yeah Ohio is fine select a location that is good for your users and for yourself has Geographic proximity to where your users are for the platform we need to select the Linux Unix and now the important part is that we need to select the blueprint and the one that we need for this project is a mean and this one stands for node.js application so it's Express angular and node.js it also has the Apache web server and it has the ports enabled by default HTTP https SSH and also the tooling to generate let's encrypt certificates the important part for us are the node.js we need it for both the server and for the npm package manager we also need the Apache web server to configure the virtual host and this looks good so here very important if if it's the first time you create a light sale instance you will need to download your SSH key and store it somewhere safe so you can only download SS SSH Keys once if you missed downloading the key or you forgot where you saved it you can create a new one so I'll do that just now let's call this one test AWS so we can generate it and um yeah it says you can only download this private key once make sure you download it and I'll save it in a good location okay scrolling down here you can select more powerful Hardware if you get more traffic for this video I'm just going to use the cheapest one here we have we can provide a name I'll just use the default but you you can pick a better name if you wish and uh this looks good we can just do create instance and it will um take a couple of minutes to deploy this will change from pending uh once it's done our instance is now running it says here the status and uh this will be the static IP that is reserved for our instance the one that we can add to our DNS later and if we just check it in a new browser window we can see that it was pre-populated with the documentation of the blueprint so bitnami is the creator of the blueprint we just used and if we go to documentation actually the I think the get started is better we have here instructions on how to deploy um node application how to expose them to the internet we will use this later next we will transfer our project to light sale by using a FTP client I'm using filezilla but if you use a different client the instructions should be similar so in here I have filezilla up opened and I will create a new site in here let's call it uh mer one and for the configuration we we will use the IP address for the host for the protocol we need to use SFTP and a login type we will use key file the user will be bitnami this is the user we that was created for the blueprint and we need to select the uh key we just downloaded when we created the instance in light sail and um yeah this looks good we can just connect and on the on the right side we see the our our home directory on the server and on the left side is our local machine and we can use it to copy files we will start with the server so we'll just create a new directory on the light Hill Side let's call this one server and then we navigate on on the left side which is our local machine we navigate to The Path where we have the starter code so in here I think it's here and um inside server we have to make sure we don't copy node modules because there are a lot of files and it will just take forever and we can just install the dependencies once we connect once we SSH into the VM so from here we only need these three files upload okay and next we can just um SSH into the light sail virtual machine we can use this browser SSH client you can also use it in the terminal you will need to use in the SSH command you will use the certificate we just downloaded and um yeah we see that we are on our VM in here and if we list the files we see the server directory we just uh uploaded we navigate to this directory to server and we need to do an npm install to install the dependencies and now we see that node modules was created on the server so we we didn't need to copy all these files and next we will start the server and run it as a process and actually for this step the documentation of the blueprint comes handy so in here it says uh demonize your application with forever to keep it running so there's this utility um that we can use for keeping a node server running and the way we use it is uh we we have the our application in our case index.js so we just started with this utility forever start and there are other sub commands we can use there's start stop restart restart all and list so we're going to try it on right now so we can do forever start and then index.js and now if we do a forever list we see the processes that are managed by forever in our case we have the index.js and it has this index zero so if we want to restart just that process we can do forever restart and then zero or if we want to restart all the processes we need to do forever restart all we won't do this now but keep in mind that if you make changes to the node.js server you need to restart it for the changes to be picked up and now if we just do a curl let's say http localhost 8000 we will see the response from our server it's a random number and if we run it again of course we get new values now we will expose our server to the Internet by using an Apache virtual host so if we search on the Google for Apache virtual host and we open the documentation page this example illustrates pretty well what they do so in here we have one Apache server that is uh hosting two different domain names so the first domain will be example.com and this one will be served from this directory from example one and um the second domain will be example.org so notice the first one is.com the second one is dot org and this one will be served from a different directory in in our case we will have a virtual host for the react client and another virtual host for the node.js server if we look at the documentation of the blueprint there will be instructions on how we can create a virtual host for our node server so our node Server doesn't have HTML files or PHP but in instead it is just serving all these things from a port in in the VM in the light sail VM and then Apache will just proxy to that port for every incoming request so we can um we can start to create a configuration an Apache configuration file in Visual Studio code for uh for the server virtual host so we're just going to call it V host Dot conf and in here we will use uh this one from here and uh we also need to copy the proxy proxy pass and proxy pass reverse from the blueprint so we don't need the document root we need the server name this is very important and you will actually need you will actually need a DNS domain to for creating this virtual host my my domain is called vladsafe.com and the subdomain that on which we will uh expose the server will be sir server.vladsafe.com it it doesn't exist right now but we will create it and we also need to change the port in here so Port 8000 Port 8000 this uh this looks good and now we can um copy this file to to our VM so from here this file we will just copy it to V hosts to the home directory on in light cell and in here let's see if it copied yeah we can see it there so now we need to place this file in um in the Apache configuration directory in here also there are uh there are instructions on where to copy it so it will be an opt bitnami Apache conf V host so we're gonna we're going to copy this one into opt Apache no it's up to Vietnamese Apache configuration and V hosts so if we go to this directory opt bitnami Apache configuration so the the root configuration file of Apache is this one http.conf but if we look at the end of the file http.com we will see that it includes uh all the dot-conf files inside V hosts so if if you're using a different Apache server that is not configured by bitnami it might not have this include but you can you can create V hosts in the in this file in httpd.com and now that we copied our host we can do Apache CTL config test this is a utility tool to make sure our config syntax is correct and we see that it says syntax okay now we need to restart the Apache server for the config changes to be applied uh we'll go back to the documentation for our our blueprint and there's this command and here it says restart Apache for the changes to take into effect we're just going to run this one in SSH okay it's all good it says restarted Apache and we can Now list the virtual hosts that we have on our server with Apache CTL dash s and we can see in here that the virtual host we just added exists it says a server that let's save.com we can actually add the virtual host for the client as well right now so in here we will create a second virtual host this one will be client and this one doesn't need all doesn't need the proxies it will just be served normally from Apache we will build the react app into HTML and JavaScript files and then it will just be served normally by Apache okay this one looks good we just need to re-upload it upload overwrite and now if we go back to home we can just copy the file again I think yeah this command so copy V host dot conf to vhost now we restart the server again and if we list the V hosts again with Apache ctl-s we see here that we have client.letsave.com and also server.vlatsave.com and now what is left to do is to add our IP to our DNS domain as two sub domains so you need to open your DNS registry this is this one is the one that I'm using I'm using for my domain it it will look similar uh the idea is that in the DNS domain we need to create a new record and we need to add two two records so the first one will be called server and uh we just need to fill in our IP address like this yeah we see it there and we we need to create another one called client and um with the same IP address just checking that it was added it should be good yeah we can see it there we can try out if the virtual hosts worked so if we go to server.vladsafe.com we will see our node.js server that just Returns the random numbers and if we go to client.letsave.com we see the landing page from the blueprint uh just like before so basically we are serving two websites from one light sale instance and one Apache server so Apache server will go one way or another depending on the domain we are requesting and um also we see here that our connection is not secure we are using uh HTTP and not https and uh that's uh what we are going to do next after we do that we will replace this page with our react tab if we go back to the getting started documentation at the end we see a link to create an https certificate for Apache and uh yeah we just need to run this B insert tool that will generate the free certificate for us so in here we can try it out uh yeah it says that there's an updated version so now we need to run it again with the new version okay so the domain list for which we want to generate certificates uh this one it says space separated list so it will be client Dot vladsave.com and server that Vlad save.com of course this depends on the domain you have it won't be vladsave.com in your case it says the following domains were not included do you want to add them no we don't want to add them okay we don't have the redirect do we want HTTP do https redirection sure why not we need to approve the changes that will be performed enter our email if we agree with the agreement sure yes if we list our virtual hosts again with Apache ctl-s we will see that our client and server are still on Port 80. and actually we will need to reconfigure our virtual hosts to work with the SSL certificate we just generated if we go back to the quick start documentation uh there will be instructions here on how to make your virtual host use the SSL certificate so we can just transfer these three lines with SSL engine SSL certificate file SSL certificate key we will transfer them to our virtual hosts file so in here but we need to change the path for the CRT and the key files so if we look in um opta bitnami Apache configuration directory for Apache we will see these uh two files in here they will have different names for uh in your case they they are related to The Domain I used when generating the certificate so we can just copy this file name and um in here so it will be an up vitami Apache conf this one key and uh that that one is CRT and this one is uh dot key and we copy these uh this section also to the server virtual host like that and now we just need to re-upload this V host file using filezilla oh actually yeah one more thing we need to change the port from 80 to 443 which is the SSL port like that save the file so now now we can uh copy it again okay overwrite so now if we look at um let's make sure it copied correctly now we can see both [Music] um the the port change and the key file and the SSL certificate so now we can copy it again to let's see yeah copy it to the Apache configuration V hosts directory now we can do a patch CTL config test just to make sure it's valid it is valid and we can restart the Apache server again and also list the virtual hosts with Apache CTL dash s so now we see that our our virtual hosts are on Port 443 which is what we want and we can try again the server and client domain so if we refresh this page we will see that now as https we see this lock in here it says connection is secure we can even dig into the certificate it says let's encrypt so yeah this is a good certificate and let's try the client as well so client.vladsafe.com again we see that the connection is secure and lastly we can transfer the react app and replace our client with the react so in here in Visual Studio code now we need to change the the URL that we we use in a request in app.js so this is in client source app.js so in here in this fetch we no longer fetch localhost but we fetch server Dot vladsafe.com foreign like that and now we can copy the client as well so in the light sales side we right click and do a create a new directory we are going to call it client and in here again we copy we copy public source package log and package.json we don't copy node modules because again there are a lot of files and we can install it once we are on the server okay so now um if we go back to our ssh in here if we go to client and we can do an npm install that will install all the node modules dependencies the dependencies were installed if we list we can see the node modules directory and now we will just build our react app into an HTML and JavaScript and CSS package and we will use the npm Run build Target okay and uh this created this directory build and if we look inside it we will see that um it just has a an index HTML it has a CSS JavaScript files and this one we can just copy into the Apache root directory so we will do a copy recursive from build slash stars all the files and subdirectories we will copy them to home directory so till.ht Docs okay and uh now if we refresh our client we see the UI for our app and we can try generating some numbers we see that it um it calls the server correctly we can even do an uh inspect and if we go to a network tab we see that it called the server https server vladsafe.com which is what we expected this is all the material we have for today there are many more videos on cloud development on this channel some of them will show up on the screen if you have questions or you run into issues uh feel free to post in the comment section below and I will try to help you out thank you for watching

Channel: Vladsave Coding

Views: 5,181

Keywords: aws, cloud, node.js, express, react, apache web server, virtualhost, aws lightsail, ssl, lets encrypt, mern

Id: Cnvg9VnTIXE

Length: 31min 23sec (1883 seconds)

Published: Fri Dec 23 2022