Deploy React App to S3 Using GitHub Actions

what's up guys banananeer here and today we're going to go over how to create a continuous development pipeline to deploy a react app to s3 using github actions if you follow along by the end of this video you'll have a highly available website hosted on s3 that external users can access and no servers to manage all you'll need is an aws account a github account and a text editor or ide of your choice so if you don't have any of those things right now pause the video and gather those resources otherwise let's log into aws and get started here we are in our aws account we want to start by creating an s3 bucket and configuring it for static website hosting if you don't already have s3 in your recently visited services click on the search bar at the top start typing s3 and it should come right up as the first result in the s3 console click on create bucket and name your bucket whatever you like just make a note of it as we will be using it later in this video we want to allow public access and acknowledge the warning of objects becoming public and the rest of it we can leave as the default and click on create bucket then let's go into the bucket itself and click on properties scroll all the way to the bottom and where it says static website hosting we want to select edit and enable and we'll be hosting a static website our index document will be index.html and the rest we can leave as default save your changes and if we scroll to the bottom we should see a url where our website would be available however we should get a 403 error this is because there's no bucket policy allowing public access on the bucket so let's hop back to aws and scroll back to the top and select permissions and we'll add a bucket policy by scrolling down select the edit button where it says budget policy and we will copy and paste our template over and replace the bucket name where necessary scroll down save our changes and if we open up the tab that we have open and refresh the page we should get a 404 this is because we haven't uploaded anything to the bucket yet so this is expected so now we've set up our s3 bucket with a bucket policy allowing public access and the next thing we want to do is create a policy user group and user in order for github actions to be able to deploy to this bucket pause the video now if you need to review otherwise let's move on to creating policy here we are back in the aws console we've just created our s3 bucket and now we want to create a policy group and user in order to deploy to that bucket using github actions in order to do that we're going to go into i am and if you don't have it in the recently visited services just come up to the search bar here and start typing i am and it should be the first service that pops up now that we're in i am let's come over to policies in the left hand side here and let's create a new policy and we're going to use the json editor and we will copy and paste our template over and replace the bucket name as necessary so we'll replace it in these two places in this template and we can hit next and review and we want to give our policy a name i'm just going to give it the same name as our bucket so it's easy to relate this policy to the deployment of the application and create our policy and we can see that our policy has been created here and the next thing we're going to do is we're going to come into groups on the left hand side and create a group for this we are going to name it the same as our bucket with deploy so that we know that this group has permissions to deploy our app to s3 and let's scroll down and we are going to use that policy that we just created and create group now we have our group created we need to create a user for github actions so let's come into user add a new user and the username i'll do the same as the bucket name again so it's easy to relate this user to the deployment of the application for the aws credential type we only need to select programmatic access as this user won't need a password in order to access the management console next click on permissions and we want to add this user to the group that we just created which has permission to deploy to that s3 bucket review your tags final review make sure that the access type says programmatic access and the group is that group that we just created and create the user and you'll want to copy the access key id and the secret access key id and store them because we will need them for the github action later in this video don't worry i will rotate these creds by the time this video has been produced so close and now we're ready to set up our code now that we've set everything up in our aws account we need to set up our code and github repository in order to do so we will create our react app with the npx create react app command and we will name this application the same as our bucket just for easy reference later this might take a few minutes so i'll pause the video now and resume it when installing the packages is complete now that the packages are complete we will hop over to github in order to create our repository here we are in github i'm just going to select new the repository name again i will name it the same as the bucket i'll make this one private and i'll create the repository in order to push up my starter code i will come in back to the terminal cd into the react application folder and copy these commands here and paste them into the terminal once that is complete i can come back to github and verify that the code was pushed the last step will be setting up the github workflow to push these files to s3 whenever there is a push to the main branch the first thing we want to do for our github actions is add our aws access key and secret access key for our user to the repository secrets in order to do that we'll come up to settings and in the menu select secrets we'll add a new repository secret and we'll add the access key id first and then we will add the secret access key once we've done that we can hop back to our terminal we can make the github workflows directory and then create a main dot yaml workflow file then let's open that up in our text editor and copy and paste our template in all we'll need to do is change the bucket name let's add all of our files add a commit message of add deployment action and then we'll push it up to the repository and what this will do is it will kick off the workflow hopefully successfully and then deploy our application to s3 let's refresh the page here so we have the workflows file created let's come into actions and we can see that we have the upload website workflow and we can see where it is in the process of deploying so if we click on this we have setup node here if we want to hop back over to the workflow file as this is running we can look at what's going on a little bit let's jump back in we can see that we need to set up node and the reason we need node is in order to run this npm install command which is what is happening right now after that the npm run build command will be ran which will create a build directory which will house all of the files which we need to upload to s3 after that the aws credentials will be configured using the access key id and the secret access key id that we added using the us east1 region once that has been configured successfully then we will deploy 2s3 using the aws s3 sync command let's hop back over to the console and see what's happening so our job has completed and if we go back into aws and view the url of the static site that our bucket is on we should be able to see the react application and there you have it we have now just configured github actions to deploy a react application to s3 for external users to access if you have any questions about the video or would like to see more please leave a comment and i'll see you guys on the next one

Channel: banananeer

Views: 130

Keywords: github actions, aws, ci/cd, react, s3, s3 static hosting

Id: lZ2SwKxcc88

Length: 14min 17sec (857 seconds)

Published: Wed Oct 06 2021