[00:01] channel today we're going to be looking at github actions specifically how we can use them to deploy our websites up to amazon s3 automatically my original deployments to s3 was to use raspberry pi
[00:14] now i've got a raspberry pi with docker and droneci on it but the problem is a lot of the node packages that my application uses needed an intel process of building everything from source but i ended up wasting several
[00:28] days and it didn't work so then i realized hey we've got github actions this is perfect and i don't need to set up a whole cicd environment just to be going to show you how to do that so to be able to test this out we need a
[00:41] website to be able to deploy so for this i'm going to be using this open react uh it's freely available on github and it's not mine i don't endorse it but it's um it looks really cool so i thought i'd use this for the example so
[00:53] this particular one is a landing page for startups so let's check this code out and see what it looks like so we're going to clone this repository um so client go to our terminal git clone
[01:15] studio code so this is a pretty standard react project we've got our components in our source folder and we've got our normal index and everything else so in package.json we have several
[01:27] scripts already set up for us so start build test and eject um so let's get this project built and see how it looks so first thing i'm going to do is mpm so first thing i'm going to do is mpm install
[01:45] now it's installed we can do npm start and they should all stop in our browser so next we're going to build website using npm run build
[02:05] version in our build folder and this is ultimately what we're going to deploy to s3 so now it's all built we can see we have our build folder which has our html file as well as our css javascript and images
[02:19] on the s3 buckets so we're going to create a new bucket create a new bucket let's just call this one open template i'm going to leave the region as is um and i'll leave everything else
[02:32] for default for now i'm going to create bucket if we click that we're going to go to properties bottom and here we've got static website
[02:48] hosting so we're going to enable this leave it at uh the host stack static website we're then going to put in index.html for for both of these and obviously if you've got a specific error page that you want to show users and you
[03:03] put that in the error document instead i'm just going to leave it as index.html i'm just going to leave it as index.html so we click save changes down to the bottom and we'll get our link for our website
[03:17] and for now it's not going to go to anything should get a 403 there we go so obviously our s3 bucket isn't set up with any files yet um but we also need to give permission for people to be able to view those files so we go back to our
[03:31] permissions we need to allow all access but we're gonna set up additional permissions and so that only people can view the files
[03:45] so we go so we've now got public access but we're gonna go to bucket policy the jsonparty here so this is a policy that allows read get requests on
[04:00] everything within our open template bucket bucket so let's save that getting a 404 instead of a 403 because we don't actually have an index.html
[04:13] file in our folder so to be able to give github access to our s3 bucket we need to set up a policy so here we're going to create policy and i'm just going to go straight and
[04:26] so i've got the code here ready and i'll explain what each thing does so here we have our first bit which is get bucket location so this just allows us to see which buckets we have
[04:39] and then this gives us permission on the individual buckets so here we have um for objects get objects as well as list what's in in the bucket so here you can see i've limited the
[04:53] we're dealing with here i would always recommend that if you're giving you're creating a new user you want to smallest amount of resources that they need access to
[05:06] so should this key get lost and someone gain access to it all they have access to is this one bucket they don't have access to everything else add some tags if you want to this is particularly useful if you are looking
[05:20] budget reasons um but for now for this demo we're just going to leave it blank so we're going to give it a name let's just call it s3
[05:32] just call it s3 open template else is the same and we'll do create policy
[05:49] we need to put into github so that it has access to our s3 bucket so we're going to do add user i'm going to call this open user
[06:04] so programmatic access and so we're going to provide the access key and the secret to github so that and ultimately is going to use to access rs3 bucket
[06:18] so permissions we're gonna attach existing policies so we just created one so we're gonna do s3 and we should find open template so i'm gonna tick that click next again leaving tags blank
[06:31] and then review and then we go with our one manage policy then we do create user so here we get access to our access key and our secret so what you want to do is
[06:43] copy those now so i'll copy this one and you see here you need to show secret so you will have access to the access here again the secret not so much now these will be gone by the time this
[06:57] video is posted so don't even bother trying to try these out and hack my system so we now have our website we have our s3 bucket we have our permissions set up to be able to write to the s3
[07:09] bucket and we have our user so the next thing we need to do is set up our github workflow so that we can get this running automatically and pushing up to s3 so to do that we need to create a new folder in our repository let's call it
[07:23] folder in our repository let's call it git dot github slash workflows and in here we're going to create our workflow yaml file call it name deploy we need to specify when this is going to
[07:39] branch but you might want to set it up differently let's close branches and let's close branches and master
[07:56] and do in this case we're just going to use our the ubuntu latest image there are different images that you can use such as windows but yeah have a look at the github documentation and see what you can set up there
[08:09] steps so this is the steps that are going to happen to be able to build so in our case we need to check our code we need to set up node we need to build and do npm install then do build
[08:23] set up aws and then push it to rs3 bucket bucket so we need to check out our code we need to set up node
[08:48] so in this case just npm install and do here run build commands that actually builds our website in the build folder
[09:14] credentials uh so we set up earlier we had our key id and our secret directly in the file we are going to store these in secrets in so now we need to set up a region and we were used one our pocket was located in
[09:30] and of course the last thing we need to do is actually push our files to s3 so do is actually push our files to s3 so just click name and do copy to s3 and we're going to run this case aws
[09:45] sync we're going to put in the contents of we're going to put in the contents of our field folder record our bucket open open template
[10:02] github and we need to add in the access key and the secret so that github knows how to push stuff to s3 so we're going to go to settings now i'm going to scroll down to secrets and we want actions
[10:15] i'm going to do new repository secret so we need to add in in the same form access key id and copy in what our our id is
[10:31] and we need to do the same for our secret
[10:44] to run it now so you can see what it's doing doing let's rerun this job
[10:56] it's starting the job and it's coming up with the with the trying to find the hosted runner you see it's setting up the job it's installing dependencies
[11:16] pushing everything towards three and it's done now we can come back to our s3 bucket open template refresh this as you can see here we've got all of the files all loaded
[11:30] got all of the files all loaded now if we just go to our website now if we just go to our website down here website's all loaded obviously this is quite basic we only
[11:44] have our website hosted in an s3 bucket and the url is not great so on top of cloudfront you're going to want to set up a ssl certificate so we actually have https at the front and set up your own domain and route 53
[11:58] if you want to do that and take this step further have a look at my blog post in the description below and it will outline how to go through those extra if this has been really useful then please comment below like the video and
[12:13] subscribe to my channel thank you very much for watching