Use Github Actions to Automatically Deploy a Static Site - Next.js & AWS S3

hey team today we're gonna use github actions to deploy an xjs app to amazon s3 i'm colby fayoff and if this is your first time here make sure you hit subscribe for future updates github actions are a service from github that allows us to automate code tasks right in our repositories so using one of those actions we're gonna learn how to statically compile one of our nexjs apps and then deploy it to s3 s3 is an object storage service from amazon aws that allows us to store files and retrieve them where we can even turn them into websites so to get started we're going to create a new app locally using next.js so in my terminal i'm going to run yarn create next app and we'll say my static website once that's done we can navigate into that directory and we can run our dev server we can open it up in our browser and we can see our new app if we run yarn build out of the box with an xjs app it's going to go through some steps and statically compile our site but it's not going to export it into files that makes it available as for us to use so inside our package.json for our nexjs app we want to also add to the build command we're going to say and next export and now if we test that we can see that nextjs still did the same steps for compiling our app but it also exported it and we can see that by going back to our code editor and looking at the out directory which now has our html so the next thing we want to do is create an s3 bucket so we want to log into our aws account which is free to sign up then we want to navigate to s3 where if you already visited before you can find it there or you can search for s3 and we can navigate there as you can see i'm searching for my but if you are in here for the first time you probably don't have any buckets so the first thing we want to do is create a new bucket and i'm going to call it colby's static website next gs and we want to make sure that this bucket name is globally unique and for the region you can set it to really whatever you want since i'm in the northeast united states i'm going to leave at usc and then i'm going to click create and now i can see that my bucket is created i can navigate to it and we can see that it's empty next we want to also prepare this to actually host a static website so we're first gonna go over to properties static website hosting where we're gonna say use this bucket to host a website we're gonna put in the index.html file for the index document and we can put it as the error document for now and click save over in the permissions tab we wanna make sure that we unblock all public access so that we can actually access our bucket then we type confirm to confirm that then we want to go to the bucket policy where i definitely don't know those policies by heart so i usually go to the s3 bucket for static hosting from the amazon aws docs and then i scroll down i find the policy that they publicly recommend i copy that right into my policy and the last thing we want to do is make sure that we update example.com to our buckets website so in my instance it's colby's static website next.js and then hit save so now that we actually have our bucket configured to work for a website let's test this out so inside of the directory where i have all my files we can see it my out directory with all the next js assets and i'm going to take all of those i'm going to drag it right into s3 and i'm going to upload them now if we go back to properties and our static website hosting area we can see that we have this endpoint which is where our static site is actually hosted so if we open that up in a new tab we can see that we have our next.js site so now that we have our site we want to actually make this so this can update anytime we push changes to git so the first thing i'm going to do is go over to github and i'm going to create a new repository and i'm going to call it colby's static website similar to before gonna leave it public and hit create repository the great thing is github gives you the commands that you need to run right inside of the terminal so i'm gonna copy these commands let me run get branch minus main just so that i can start off from main i'm going to add the remote origin i'm going to also commit my changes for our build script then we're going to push that out and once that's done i can refresh my github page and we can see our new repository so now that we have our github repo we can actually get started with our actions so i'm going to navigate over to the actions tab and i'm going to click set up a workflow yourself or alternatively you can start off with a node.js one and as you can see once that loads we have a basic skeleton of what we want to do but i'm going to quickly remove all these comments just to make it a little easier to read and see what we're doing so looking at this again there's a couple things i'm going to do i'm going to rename this to deploy i'm going to change the name also to deploy we want to make sure that it only runs when things get pushed to main so that it's not trying to rebuild and deploy the main branch for pull requests then for our jobs we want to leave it on you ubuntu latest hopefully i said that right we want to also make sure that it checks out the code and we're going to remove these other scripts for now since we're not going to use them and once we have that ready we can commit that right to the main branch and as soon as we commit that and go to the actions tab we can see that it already kicked off a new instance of that deployer where we can go into it and see what's going on once it's available we can select the build on the left in our sidebar and we can also see that it's actually going through and checking out our code to make it available inside this action so now that we have this code actually getting checked out we want to actually run it and build it so to modify our deploy script we're going to move into the github workflows folder where we're going to open back up that deploy.yaml and we're going to edit it and underneath the checkout i'm going to add a few new commands i'm going to tidy this up a little bit but what we're going to do is we're going to use the setup node action which we're gonna set it up for 12 for now you can change that to whatever you'd like we're going to also install yarn globally that way we can actually use it within our action we're going to install our all of our dependencies and make sure that we use a frozen lock file so it doesn't try to upgrade anything and then we're finally going to run yarn build which is going to build our website and similar to before we can see that commit already triggered a new job which we can move into and we can watch it build and once it's finished we can see that it's gone through all those steps it's installed yarn it's ran yarn install and yarn build and if we actually look in the logs for yarn build we can see that it's done the same thing that happened inside of our terminal where it created our site and it also exported it to the out folder so now that we're actually building our project we want to take it to the next step and we want to upload those results straight to s3 to do this we're going to use a github action called configure aws credentials where this action will set up our secret keys and access keys which makes it available to use right inside of the github action this means we can run any command we want from the aws cli and we can make it work alternatively there's a few options like this s3 sync option which allows us to interface directly with aws s3 through this action but by using the cli we're going to be able to have a little bit more flexibility and be able to add on to that later if we want so inside of my action code i'm going to copy and paste in a few additional steps and now what we're going to do is we're going to run that configure aws credentials github action and we're going to pass in a few parameters we're going to pass in aws access key id and secret access key we're gonna pull those from github secrets on the repository that way that they're not stored inside the code itself and then finally we're gonna set a region of us east one and that can be whatever aws region you wanna use but again since i'm in the northeast united states i'm going to use the one closest to me then i'm going to go ahead and just commit that for now so now that we're defining those secrets inside of our file we want to actually set those secrets so first thing we want to do is go over to settings and then we can go to the secrets tab where we'll be ready to add our secrets these secrets are going to come from aws where we're going to set up access keys in order for our account to access aws programmatically so inside the console i'm going to go up to the drop down where it has my username and i'm going to go down to my security credentials and select that now what we're gonna do is we're gonna go over to the access keys section and we're gonna click create access key inside the screen we have two keys we have our access key and then we have our secret access key after closing this dialog box we're never gonna be able to see this secret access key again so we want to make sure we either download this csv file or save these keys separately so that we still can access them later also just of note i'm going to delete these keys later but make sure you never expose these keys so that somebody can't compromise your account with them so step by step i'm going to take the access key and i'm going to go over to secrets i'm going to create a new secret and that's going to be called aws access key id and i'm going to paste in my value and click add secret similarly i'm going to grab my secret key i'm going to go back over to secret i'm going to add that as a new secret that one's going to be called aws secret access key i'm going to paste in the value and click add secret and now that we're defining our secrets we can finally add the cli command that'll sync this project up to s3 so we're going to specify run and we're gonna say aws s3 sync we're gonna specify that out directory which is where we want it to pull the files from and then we're gonna specify the bucket with s3 colon slash slash and then the bucket name which in my instance was colby's static website next.js and now if i commit that file right to the main branch we can see that our last deploy actually failed because we didn't have the secret keys in there yet but if we go to our new deploy and once it's finished successfully we can go through and we can see that it ran all of our commands even the configure aws credentials and it also ran that aws s3 sync command where we can go through and we can see that it uploaded all the files that we had from that out directory if we go back to our bucket now we can see that the files are the same but that's because we haven't made any changes so let's test that out inside the code inside of our app on the home page i'm going to simply change this to colby's next js app and if i look in the browser we can see the updated title and now if i commit that change and commit it colby's title and push that out to github we can see that our new build kicked off and we can see that it successfully went through all the build steps especially the aws s3 sync command and if you paid attention closely we can also see that we have a new last modified date but now if we open back up our endpoint for static web hosting in our browser we can see our new title colby's next js app and that was updated automatically by pushing that to github so if you follow along with me you learned how to automatically deploy your next js app to s3 using github actions github actions are an awesome way to automate code task and this is just another way that we can use it to automatically deploy our site if you like this video make sure you hit thumbs up and subscribe for future updates thanks for watching

Channel: Colby Fayock

Views: 11,920

Keywords: use github action, use github actions for ci, how to use github actions, github actions tutorial, github actions ci/cd, github actions workflow, github actions deploy to aws, deploy next js, deploy next js to aws, host static site s3, github actions s3, github actions aws, github actions aws s3, github actions awesome, how to github actions, how to deploy next js app, how to deploy next js app to aws, how to deploy next js, github actions, deploy a static site

Id: D3h91EvRxuk

Length: 9min 47sec (587 seconds)

Published: Wed Oct 28 2020