How to Deploy React App on AWS S3 and CloudFront [UPDATED 2021]

hello guys in this video i want to show you how to deploy a react application created using the create create react app boilerplate to a string cloudfront i will also configure dynamic routing using react rather dom package in the last css3 policies changed a little bit they introduced a block of all the public confine by default so i will show you how to keep your s3 packet private and serve the react application using cloudfront so you will have both the https by default provided by cloudfront and also your website will be served using the edge location of cloudfront i will start by creating the react application and setting up some routing if you want to skip directly to the deployment phase i will leave in the description the placeholders to navigate through the video let's start with the uh create react application boilerplate so i'm gonna create a new app i'm gonna call it like my example up for example and this this script is gonna create a new folder called my example app and it's gonna install all the packages needed for the right application this can take a couple of minutes so i think i will pause the video in the meantime and wait for the script to finish as you can see the script has finished so it suggests me to do my cd into the folder and we're gonna see we have different files the idea is gonna we're gonna show the files using the visual studio application so here this is the structure of the application we do have our packages and then the important ones are the npm start to start the application and the npm build to build the prod package where we're gonna basically deploy 2s3 so let's start with setting up the app starting the application this creep writing install all the node modules um for you that's also why it takes long time so if around npm start i should be able to see the website running and it's gonna have of course like very basic stuff i think it's like um it's gonna show like a react uh icon or something like that spinning around yes this is the this is the application deployed by the created by the create react app boilerplate so it says edit source up fjs to save reload okay so let's do it we go on the app js we can get rid of everything we don't really need it and this is now up now okay a blank page from here we want to start and set up some routing so we can see the dynamic routing working and do for doing that we need to install the package called npme install react router dom and from here we're gonna set up some routing if we go on the react router.com quickstart webpage we can start from the very very basic example and it's actually what we're gonna do so we're gonna copy the example and paste the code into the app.js file you're going to import everything from the without router actually this is not the the autocomplete doesn't work very well so that's going to copy the example and run again the npm style so we can see the dynamic routing of the react application working now takes a bit for staying up of course we need to define the about users and home pages because here we need we are defining basically components like about users and home so we can do it by setting up the like very simple function i forgot to copy those ones and it can be something very easy like this one so now what is happening is that when we navigate through the link home about and uses what the routing is doing is actually displaying this component which basically is just an h2 title so if we go here you're gonna see that it's actually changing the page and if we reload it stays on the same page okay this is very important when we're gonna deploy the website on the s3 packet so we have our router working and our page are changing so let's see now from this very simple react application how we can deploy everything to s3 okay now we have the up the application up and running with the routing mode the routing working as well the next step is to create the s3 bucket so if we go on the aws console you'd go on the s3 service create packet we're going to call it my example up deployment i don't know s3 something like that actually deployment is i think it's okay then you select region i'm gonna choose uh london then here is the new kind of policy where everything is blocked and in some some guidelines in some blog posts i saw that everyone is actually unchecking this point but you don't really need it if you if you're gonna use cloudfront to serve your react application so i suggest you to leave this one uh as default so block all public access to the s3 bucket because your users are gonna gonna use your website i'm gonna reach out to your website using cloudfront edge location so here we can leave everything to default settings that was not really interesting in this case we're gonna create a bucket let's see if the name already exists okay okay it's not been taken let's see the is the bucket where we're gonna deploy the react application once we have created the bucket we have to now go through the we have to go on the cloudfront um service on aws i create a new distribution this can take it will take actually up to 10-15 minutes so we'll start the process and then stop the video anyway this is the um origin domain name which means which origin is gonna use the cloud for distribution to serve the content this this way is gonna be the example application that we just created origin path we can leave it blank for now um no this is not useful origin id is yeah it's like description for the origin and then here this is important restrict back to access i want my my bucket to be private so i'm going to say yes and i'm going to tell a call from basically to create a new identity to access the um the packet for me every time a user is gonna navigate to the cloudfront url and i can decide to update the s3 packet permissions by myself but i think it's more it's easier basically to just leave cloudfront doing that for me so i'm going to select yes update packet policy and then the other ones we don't really need headers here i prefer to do redirect http to https and then we're gonna do let's see okay we don't need any c names it depends if you so if you want to serve your website using uh another dns you will need to set up the cnames in cloudfront so he knows that he has to redirect the content to your dns to your sorry to your domain name and default root object we will need to add the uh index html page and i always forgot if you have to add the trading um sorry this slash but i think it's just index in this case i'm gonna set index.html and if it's not correct i'm gonna just change it after the creation so i think we are a good start and hit create distribution yeah the status is in progress so yeah i'm gonna stop the video come back when this is done i also want to add another thing back in the days when you had to host your website on s3 you had to basically set up the um the website hosting start the website hosting like here click edit enable and set up all the document like index html and error html this is not going to be needed anymore because we're gonna gonna have cloudfront doing that for us so you can simply disable the static website hosting on the s3 packet it's not needed anymore so let's see now the um platform distribution has been created and we have our distribution deployed okay perfect now we have to basically create the building package deployed to s3 and then s3 is gonna um and then cloud4 is gonna serve the s3 content for us as we said before to create the build package we just have to run npm run build and it's gonna take a few times like a few seconds it can take like up to 30 seconds depending on your application size of course in the meantime we're gonna build the we're gonna set up the packages on script to push the build package to s3 so the idea is to have something like i don't know client s3 deploy and we're going to create a new script which is going to deploy our build folder to s3 so the idea is to use aws cli which is aws s3 we call the function sync which is going to basically sync our local folder to ds3 packet and here we're gonna we want to sync this slash build slash what is inside build so actually sorry the build is on the same route level so i think it's just build and then the next argument is gonna be as an ids three bucket name which is uh let me check it out i think it was like my example up or something let me see so if i uh if i order the bucket from here okay so the name of the bucket is my example up deployment i'm gonna set it up and then uh so the aws um cli is gonna use your default profile but in this case i want to use another one so i'm gonna add an option which is please use this profile which is a profile with um i said i set up like a profile with only um allowance to upload to that specific packet i suggested to the same by having like this privilege profile for each of the script that you're gonna build so if i run now the script i should see my um build folder synced into the s3 packet let's try out so it's gonna be client s3 deploy yes also actually the uh the correct option is just profile i miss type it so i'm gonna do let's try again okay as you can see there is the let me zoom in a little bit the upload here it upload everything into the bucket we can see the results if i refresh and we have our website up and running uploaded on the s3 bucket so before navigating to the cloud for url we also have to set up the error pages because we are serving the website and direct application using cloudfront so we have to create custom error pages for two arrows the forbidden one and we're gonna set like a customized error response with a customized page which is actually gonna be our index page and we're gonna set 200k we need to do the same thing for the 404 error so we're gonna do the same customize error page index html and 200k same thing so this change is gonna again take a bit of time to show up so let me stop for a second okay distribution has been updated so it's been deployed i can navigate to the url and see if i can see the react application so let's try out and i still see the redirect to the s3 bucket so i think i know what is going on let me try again to navigate to the cloudfront url and this is something that you may be facing when you first deploy the app so let's see what happens so i now get to the yeah as i was thinking there is the 307 code which means that it's like a temporary redirect and this is because the cloud form dns has to be has to be updated with the s3 redirect so it can take like up up to 30 minutes to this error to go away it takes a little bit to update it in s4 cloud 4 and s3 and what is actually happening as you can see from the url is that every time i navigate to the cloudfront url i'll be redirect to the s3 packet which of course is private so i'm getting the access the night error trust me you will see that this error is gonna go away in like 30 minutes let's say so again i will stop the video and let you know in the meantime we can set up the cloud from the validation so every time you update the s3 bucket with new content let's say you're gonna update your react application you're pushing new changes to s3 but cloudfront doesn't know that so you need to basically invited cloud from cache if you can do that from the cli of aws again so you can call aws cloudfront create invalidation you have to you have to set the distribution id which we're gonna get on the um on here on the cloud front service then you're gonna you want to you have to tell cloud from which uh objects and file you want to invalidate here in this case since we are building a new package a new build package we want to emulate everything and then here i am again setting up a profile to call the aws api from the cli the last step they usually do is setting up these two command together so some something like client deploy and every time i create a build script so i will do something like npm run build and when it's finished i'm gonna do npm run client s3 deploy and and npm run client cloud front invalidation so every time that i there is an update every time i want to to deploy a new version of direct react application i will call this command and it is gonna build the folder update the for the twist three and run the invalidation to cloudfront so i can have everything in one command okay so it's been actually two out three hours since the last time i tried the website let's see if now it works so i get the url and i navigate to the website and this time i can see that actually react application is working so this means that i'm not getting the uh 307 error anymore we can and as you can see the url is the one from cloudform is and i'm not being redirected anymore so it means that yeah channel okay it works as respected if i can navigate through the different roots even if i reload it's gonna stay on the same route so it's it's working as expected so it's in that the right application is working let's see now how we can actually update the application and use the npn run script that we just created so if i go on the up file and let's say i want to modify something and maybe we can add like a new routes so like something like i don't know dashboard i'm gonna change it create a new link as well new um a new route new route so i'm gonna do something like this dashboard component dashboard and then i have to create the component itself it should be a very simple one and this one is going this is the dashboard okay so we can firstly see if it works locally i suppose it works that's very very easy change just to see how we can deploy a change now it's loading and as you can see we have a new route so if i go on about users and this is the dashboard so we have modified the react application now what we have to do is to update our s3 bucket and invalidate the call front cache so we're gonna do that by running the script and pm run client deploy and what's going to happen is when i start the building just going to start the creation of the build holder then it's going to it's going to update the s3 bucket as well the build has been created as three packet created and now it's gonna call the um invalidation cloudfront as you can see there is a reference and if you actually go on the cloudform dashboard as well we will see invalidation here there is in progress we go here details yeah yeah we are invalidating everything so as you as you will see the online app now has been updated with a new version and i think here sometimes yeah okay completed sometimes it takes very very little time to update the cache because here is just you know a few files on the s3 bucket if you have a bigger application can take more time perfect so we have seen how to deploy the react application on s3 and cloudfront uh maintaining the s3 bucket completely private and actually we can see how the cloudfront distribution can access the s3 bucket so uh if we go on under the uh sorry it's under the permission tab we will see that it's private first of all and then there's a policy here where the um the entity that we have created while um creating the codefront distribution can access the s3 file if you remember from the previous step when we created the cloudfront um distribution we asked cloudfront to update the packet policy and this is the update made by cloudfront basically who's saying allow the entity with this id to get the all the resources into my s3 buckets okay guys i hope this video was useful let me know which other deployment you would like to see with react and if you have any comments feel free to if you have any questions feel free to ask on the comments cheers

Channel: Enrico Portolan

Views: 1,210

Rating: 5 out of 5

Keywords: aws, serverless, cloud

Id: CQ8vzm1kYkM

Length: 21min 22sec (1282 seconds)

Published: Wed Jun 09 2021