How to deploy your React App to AWS with the Serverless Framework - Full Tutorial with CloudFront

do you want to learn how you can deploy a react app and ensure that it loads for your customers as quickly as possible in this video that's exactly what I'm going to show you how to do hi guys my name is Sam with complete coding and in this video I'm going to be showing you how we can deploy a single page react app using serverless instead of just deploying it to an s3 bucket with also going to be adding in cloud front distributions cloud front is a CDN which allows us to cache our web pages closer to the end users this means that you are more likely to get a fast low latency response for your website which results in a better user experience this is a great option and it also integrates with a lot of the other AWS services so now we're going to jump into the code and see how we can set this all up now that we're in the code the first thing that we want to do is to create a react app that we're going to deploy to do this I'm actually going to be using create react up and I'm gonna be using it inside this folder to create a subfolder so to create a reactor I'm going to run npx and then create - react - app and finally the name of the app I'm just gonna call this demo - this is going to install and create all of the packages that we need inside demo app this takes a little bit of time so I'll get back to you when I is done now that that has finished building we can go into our demo app by seeding into demo app and because this is a react app we can run MPM start which will open up a new browser tab and that is going to be at localhost colon 3000 and as you can see we have the default react app here because this is react you can do whatever you want you can build your complete website this could be a portfolio this could be a customer project it could be whatever you like it has to be a single page application but this is all contained within here I'm going to modify this a little bit so that we know when we deploy it that is definitely our app so first we're going to head back to our code and we're going to close this and we're going to jump into our demo app jump into the source and app dot j/s this is where all of the frame default page is found the first thing we're going to do is change the text here to be this is a react up for complete coding as well as that I'm going to change this link of it I'm going to change it from loan react to learn server less and of course I need to change the URL and I've got the URL here for all of my videos so I'm gonna save that the last thing we can do is actually change the logo this is gonna be a little bit of fun but what I'm going to do is I'm going to paste into the source the complete coding logo now inside fjs the logo we're currently getting from logos SVG but we can now change that we can now get it from dot slash complete coding logo dot PNG if we save that and restart our react up we shall see that this will change in a second and we'll see our new react app that we have created so just refresh the page there we go this is my logo spinning round now this is a react up for complete coding and the link to learn service now we can jump back into the code where we can set up the s3 bucket the syncing as well as the cloud formation that the cloud front management which allow us to deploy a scalable and fast website inside this code we can now minimize the demo and close these two files so it really left leaves us back in the service yeah more file in this file we need to do quite a lot of setup to get this all working so the first thing that we need to do is get rid of functions because in this project we aren't actually deploying any lambda functions but we do need to use a plugin so we need to say plugins and this is an array and we have one item in here which is the server less - s3 - sync and if we copy this we can also go into a terminal we can create a new terminal here and run npm install - - save - dev and paste in the service s3 sync - make sure that we actually install this service plugin this plug-in will allow us to upload a set of files in our case the built react up and deploy it up to an s3 bucket so with this plugin we need a little bit of configuration in the custom section so create a custom section and inside this we have s3 sync and this is setting up a set of buckets to be deployed to so what we're going to do is we're going to deploy a bucket name and we're actually going to be using a local reference to this so we're going to use dollar sign curly braces self : custom dot bucket name what we're going to do is we need to out add this to our custom variables so our bucket name is going to be my service react app and then because it needs to be unique across the globe for everybody because this is a bucket I'm gonna add some numbers onto the end so I'm going to add 4 5 5 6 now we can go back to our s3 sync and we are going to be telling s3 to sync up to this bucket and we also need to tell it what we're going to be syncing up we do this by passing in a local dir which is a local directory and for us that is going to be the build folder of the reactor so to get there it's going to be demo app slash build forward slash and that is going to make sure that the build folder from our demo app gets deployed at this stage we meet we probably want to make sure that we have actually built our app so we're going to CD into demo - up and run NPM run build this is going to build that react up that we had just seen with a spinning complete coding logo and deploy it into build now that we've done that we need to set up some of the s3 buckets as well as some other policies around cloud front so to do this we need to define some resources and because of the format of service this has to also have a property of capital resources so the resources that we're going to be defining are the s3 bucket so I'm going to call that react bucket this resource has a type of AWS : : s3 : : bucket and then it has some properties these properties include a bucket name which we're going to use a reference to self : custom dots bucket name as well as that we have to set an access control policy so access control I'm going to set it to public read this means that anyone that reads any files from this bucket will automatically be able to read it from the public but would be able to write to write to this you need extra permissions and as well as that we need some website configuration and this is defining some of the URLs so index dot you know index document is going to be index dot HTML and we're also going to have an error document so again it's also going to be index.html so that is our s3 bucket configured it's going to be deploying with our bucket name and it's going to be publicly accessible we also want to create an access policy so we're going to do that with a s3 access policy and this resource is going to have a type of AWS curl on color on s3 : : bucket policy it's going to have some properties and these properties are the buckets and here we actually need to reference so ref means point at one of the other resources in this deployment so what we can do is copy the react up bucket and paste it just there also we need a policy document this has some statements and the first thing that we need to pass into this statement array is an S ID for this we're saying that we're allowing customers to get objects I think to read them from the public so we have a property of public read get object we also have an effect so this is going to be similar to I am role statement things so we're going to allow now we need to define the principle and this principle is defining what can access and we want this to be accessible by everyone so we can set top star we then have an action array and this action array has a property of s3 : get object as this is what we want everyone to be able to do to be able to read the objects but we don't want them to be able to write new object to our bucket and finally we need to define the resource that we are affecting us on and this resource is the s3 AR n which will be AR n : aw s : s3 and then three colons and then the bucket name we can reference the bucket name here with the self : custom dot bucket name and then we want to be able to access all of the resources in this bucket so slash star now if you go back to so that we're in line with the access policy we're going to be creating a configuration for our CloudFront distribution so cloud front distribution this is gonna have a type as always of AWS : : now this is going to be plowed front : code : : and distribution has some properties and the properties on this are a distribution configuration inside this distribution configuration we first have to set the origins the origins are an array which define the URL that we want the end CloudFront distribution to point out so for us we're going to start with domain name and this is going to be pocket named s3 to Amazon AWS comm so we have to use a reference here for custom : self dot bucket name and then it's going to be dot s3 dot Amazon doc I WS dot com as well as a debate name we need an ID and I call this react app and some origin configuration so custom origin config this custom origin config needs a HTTP port a nice needs to be set to 80 we also need you to find a hasty TPS port of 443 and then the origin protocol policy this is just stating how we want these resources to be accessed because nowadays everything needs to be secured we're going to say that it can only be accessed by HTTP by setting HTTP - only so that now is the origins configured we need to add a field of enabled which is going to be true the default routes object it's going to be the index dot HTML because this is telling you where the CloudFront distribution should be pointed up we also have some error responses so if there is a cross an error we need to define custom error responses if there's an error code of four or four what do we do we're going to respond with a code of 200 so response code of 200 and we're actually just going to return the index dot HTML file so the response page path of slash index dot HTML so if they go to a URL page on this cloud formation and Cal Front template that doesn't exist they'll get a 404 but that is going to redirect them to get to 200 and send them back to the index.html page the last thing we need to do is set up some default caching behavior so this is telling the browser what to do with the files to cache them locally caching files will speed up how users experience your site the 2nd 3rd 4th time round so it's really good thing to set up we need to say which of our methods they're allowed to cache so allowed methods which is a list and this is going to be a list of all of the methods as we want all of them to be cached so it's delete get options hatch post and put so that's going to set all of the options to be cashed we need to set the target origin ID and this is going to be the ID that we set up higher up which is here the origin reactor so copy that and paste that in there then we need some forwarding values for query strings so if someone uses query strings what's going to happen so the forwarded values query string and we're going to set this to false and cookies we can to select the forward of none the last thing we need to do is set a viewer protocol policy policy and this is saying what we should do if the user comes on some a method that we are not expecting as I've set here it should be HTTPS only so if they come on HTTP we want to redirect / - - HTTP this means that no matter what if they come on a HTTP URL they're automatically good to load the HTTP version so that is the last of the default cache behavior to setup so if we go back to that level as well we also need a certificate so the viewer certificate is whether to use SSL and where to get that from and we're going to be using a cloud front SSL certificate so we're going to set cloud front default certificates and set that to true and that is going to make sure that when we are trying to use HTTPS we need a security certificate and we're going to be using the default one provided by CloudFront if we now save this we can actually go into our terminal go back down from the demo app into the root my surface project folder and now run sls deploy now that that has finished deploying we can head over to our AWS account where we will have an s3 bucket and a CloudFront distribution created we're going to look at the URL from the CloudFront distribution so you can search for front and found cloud front now that we're in here we can see there is a record and if we click on this ID here it will open up a load of details for us if we click inside the origins and origin group we can see there is a domain name and path we can this and paste it into a new browser tab with slash index dot HTML on the end and we get our eight our react up that is now deployed through service and a CloudFront distribution this means you get all of the benefits of deploying through a CloudFront distribution such as the edge distribution which means things are going to render and load much quicker than they would just from a single s3 bucket so in this video we have learned how we can set up a react app to be deployed through service into an Amazon s3 bucket we've then also configured an CloudFront distribution which will be connected to that app this CloudFront distribution allows us to cache that website closer to users to improve the performance of your site everyone knows that performance is king in making sure your users have a great experience so this is a brilliant way to provide that to your customers if you've learned something new in this video it would really help me out and help out the channel if you hit that like button as it helps more developers like you get a chance to learn this kind of stuff if you're looking for more videos on service then please subscribe or check out this playlist which outlines all of the other service videos that I've done so far thank you and I'll see you again next time

Channel: Complete Coding

Views: 13,969

Keywords:

Id: sMZm8HASKlM

Length: 28min 15sec (1695 seconds)

Published: Wed Feb 05 2020