Deploy a React App to Amazon S3 + CDN in ~10 minutes

react to s3 behind the cloudfront cdn using github actions and less than let's do it step one you need to have an amazon web service account step two once you're in the console go to the services at the top left and type in s3 this is going to take you to the s3 bucket page you're going to create bucket here at the top left it's going to ask you for a bucket name this has to be unique across all buckets in aws i'm gonna name mine youtube actions2s3 you click next once you figure your name out you can skip all of this once you get to the set permissions page you uncheck block all public access and then you have to score the top here and click the i acknowledge this is basically telling you that your bucket is going to be public and people can read from it click next and then click create bucket once you have your s3 bucket created head to the permissions tab and then head to bucket policy i'll have a link to the github gist for the bucket policy that we're going to use but i'll go ahead and copy and paste this in and i'm going to copy the rn here right where it says bucket policy editor and i'm going to paste it in here into the resource this is basically saying we can read anything from this particular bucket at the root path and anything below it once you have this pasted in click save it should give you a success message and tell you that your bucket has public access then head over to the properties tab once you get to the properties tab click static website hosting and we're going to check use this bucket to host a website we're going to paste in index.html for the index document and then same for the error document this is basically telling s3 that whenever we go to this url here retrieve the index.html which is going to boot up our react app once you're finished with this click save and it should update the settings of our s3 bucket now that we have our s3 bucket set up for static hosting we need to set up our cloudfront distribution head over to services at the top left and type in cloudfront head to the cloudfront page and then click create distribution at the top left go ahead and click get started here for web and we'll quickly go through some of the settings that are crucial to this for origin domain name you're going to go ahead and select the s3 bucket that you just created once you have your s3 bucket selected click yes to restrict bucket access and then create a new identity and then click yes to update bucket policy we don't need to mess with any other settings for this video so scroll to the bottom once you're done with that and then click create distribution at the bottom right once that's created redirect to the distributions page at the top left here and validate that your new cloudfront distribution is in progress and enabled now that we have our s3 bucket created and our cloudfront distribution created we need to create an i am role for our github repo so that github can go ahead and deploy this on our behalf head to the services at the top left and type in i am once you're on the im page go ahead and go to users at the top left and then click on add user you can choose whatever name you want i'm going to name mine ci admin and below we're going to click on the programmatic access type because we need an access key id and a secret access key for our ci process once you have the name and access type configured click on next to go to permissions and then click on the attach existing policies directly tab once you click on this tab it'll give you a few options for some pre-built policies and go ahead and click on the administrator access this is basically going to give this imroll admin access to do anything so please be aware of what you're doing with this once you have this selected go ahead and just skip through all of this and go to review and once you finish the review you can click create user and it should give you a success on the success page here you'll see the access key id and the secret access key hide these don't give these to anyone this basically gives anyone with cli access the ability to assume this iam role and do whatever they want in your aws account copy the access key id and the secret because we're going to need that in the next part of this video now that we have our cloud services configured we just need a react app to actually deploy to get our ci process running correctly we need to create a new folder here in the root of our project directory called dot github inside of that dot github folder we're going to create a workflows folder inside of workflows create a dev.yaml file i usually have a ci file for every environment so i'll have one for dev one for staging and one for broad i'm gonna quickly code out this ci pipeline and then i'll explain what i'm [Music] doing [Music] now let me quickly explain what i'm doing here so i have this on here which basically tells github actions to run whenever we push to our branch but this branch specifically so this is going to run on the develop branch the jobs here describes which jobs you're going to be running during your ci pipeline you can have a test job you can have a lint job in my case i just have a build and deploy job inside of the build job we have a runs on option and this runs on ubuntu latest this basically tells github actions to run ubuntu whenever all of this pipeline stuff actually does run during ci the steps here describes what we want our ci job to do before it completes so in our case we're going to check out the repository we're going to set up node with version 12 we're going to configure aws the aws cli in this pipeline after that's configured we're going to install npm we're going to run our build our production react build we're going to copy the files to s3 and then once those files are copied over to s3 we're going to run a cloudfront invalidation you'll notice that some of these steps have uses and then some of them have run the run syntax here basically lets you type in a custom shell script to run and the uses syntax here in line 21 basically utilizes someone else's pre-built github action so in this case we're letting that job configure the aws credentials locally and all we have to do is just pass in some parameters for that to work now that we have our ci pipeline built out there's a few things that we have to switch out on line 34 you'll have to switch out this for your s3 bucket and you'll have to switch out the dist folder here if your react project spits out a different bundle folder you'll also have to paste in your correct cloudfront distribution id here on line 39. if you remember from earlier i mentioned that we would need the aws key id and the secret key that was generated whenever we created our iam role this is where it's going to come into play here on line 23 and 24. we're going to take those variables and configure them in our github repository settings you can configure these variables by going to your github repository clicking on settings here at the top right going to secrets and the tabs on the left and then creating new secrets here and the names of the secrets will correspond to what we have in our github actions file so what's going to happen is whenever we push to our develop branch it's going to run the ci job that we have here and it's going to get to this aws step once it gets to that step it's going to pull the secrets from our github repository and then this job is going to set up the aws cli in that pipeline runner and then whenever it gets to the aws sync step it's going to use the key and the secret from your im profile that we set up earlier and it's going to use those credentials to get access to sync those files and then create the invalidation for you and that's all we need to do so we can test this now by going to our terminal on the right and pushing to that develop branch so assuming you already have that developed branch already checked out we can do a git add and then commit our message just gonna say init and then git push origin develop now that we have a successful deployment we can validate that this actually worked by going back to the s3 services tab in aws going to your s3 bucket and then clicking into it and seeing that there are some files in there to test the cdn is working properly head back to the cloudfront distributions and find the domain name here of your cloudfront distribution open a new tab paste in the domain name and do slash index.html and it should load up your react app if you don't want to have to type index.html to access that rootlevel object every single time you go to your cloudfront domain you can go back to your cloudfront domain options and then click on edit in the general tab and then scroll down to the default root object and type in index.html and then click save to edit it this is basically going to make it to where whenever you go to your cloudfront domain it's going to access index.html by default for you when it comes to deploying a react app to s3 and cloudfront this is the gist of what you need to know there's some security related stuff that i'm not going to put in this video that'll probably be another video down the line the next step after this would be to set up route 53 for a custom domain and then tie the route 53 record to your cloudfront domain so you don't have this ugly cloudfront url hopefully this stuff was useful if you have any questions feel free to drop them in the comments section below and i'll try to answer them otherwise thank you for watching the video you

Channel: Brodey Newman

Views: 2,101

Keywords: S3, Amazon, Cloudfront, ReactJS, JavaScript, GitHub

Id: NPM-FyHfiGg

Length: 10min 6sec (606 seconds)

Published: Tue Sep 08 2020

Reddit Comments

[u/abugee1029]

It's great if he explained in the beginning why someone needs to do this kind of architecture, what are the advantages/disadvantages. Also this is not exclusive to a reactjs project, it can be a applied for any js or stateless html project at the very least.