CI/CD from GitHub to AWS S3 using CodeBuild (e.g. Angular/React.js App automatic Deployments)

what's up everyone and welcome back to another episode of aws tutorial and today i'll show you how to automate process for updating the file content in your s3 bucket i found it very convenient when i have to update the contents for my website because i host it in s3 bucket and all i have to do is make the changes and then push it to github and then code build is gonna build a project for me and then update the contents in the sd bucket and of course you can use it for other use cases as well so in this video i'm going to use an angular app for the demo but along the way i'll talk about the equivalent commands that you would use for a react.js app as well so without further ado let's get to it alright so step one is to create a repository to host our project on github so i'm going to click new and then give it a name and then keep it public edit ignore i'll just note create a repo alright so it's done and right now let's create our angular app on our machine all right so right now i have vs code open with the empty folder so what i would do is i'll click on terminal new terminal so in order to create an angular app you need to have node npm and the angular cli installed so if you don't have it you just go to the node website and follow the instruction to download that installed in your machine so after you can load an npm install you need to do this command to install the angular cli and then for react.js you need to do this to install the mpx that's what you're going to use to create a react.js app so right now let me create a new project for the angular app so just to ng new i'll just call it the same name as my github name hit enter yes i'll do scss all right it's done so i'm going to see it into the project and then what i can do is i just do ng surf to see if the project is working all right so it's listening on port 4200 so let's get there all right seems like it's working so right now what i'm going to do is i will go to source go to app in the app component i'm going to remove everything and then just add a text to it that says github 2s3 demo app and then we have a version number to be version 1.0 and then go back it should be updated with our new content and right now let's go back to vs code and then we're going to add the buildback.ml file for the code builder used for to build the project so i'll go to the root directory add a new file and we have to call it buildsback.yml we need to specify the version i believe this is the latest version and then we have to identify the faces install runtime version we're going to use node version 12 and then the command we're going to use is we first going to print out what it's doing now and then we're gonna do npm install to install all the necessary modules or dependencies we have in the project and then we're going to do npm installed global angular cli and we're going to specify a version number for it i'm going to use 10.0.8 because that's what i'm using in my machine but you can specify newer versions if you want and then the next phase is going to be built and the commands we're going to have is we're going to print out what it's doing and then we're gonna do ng build pride for react.js apps i believe the command is npm run builds and then the next phase is gonna be post built what we're gonna do after we build project and we have the commands as again we're going to print out what we're doing here so what we're going to do here is we're going to sync up the files we have in our project with the s3 bucket that we're going to use to host the content of the website so we're going to do aws s3 sync dist our project name everything and then we specify the sql bucket that we're going to create later on in the next step i think we're just going to call it gene monster demo app 2021 and then delete so this is the directory that angular is going to create and put all your built files in there i'm going to show you so if i do ng build prod which is that and this new directory is created with all these contents that we need to host the project alright so right now let's commit the changes that we have made and push the github now we need to go back to github copy this url and then do git remote add a region and then paste the url and then to git push and we get an error here and the reason is that my branch name is my branch name is master and in our github repo we have the main here so what i need to do is just copy this hit enter and now in our github there should be a new branch called master refresh there you go and that has all the new code that we have all right so right now we are ready to create this sd bucket to host our content so let's go to the aws console type in s3 click on it create buckets type in the name that we have specified uncheck this because we're going to use that to host our website that's open to the public enable versioning enable encryption create and right now let's configure that for website hosting click on property scroll all the way down under the static website hosting hit edit enable and then we're going to put index dot html and do the same here save changes and then under permissions scroll all the way down to the bucket policy hit edit and then we're going to add a bucket policy here i'll include this in the link down below so you have it as well but one thing you need to change here is you need to change this to match with what you have for your bucket one thing i want to mention here is you may be tempted to change the date here but please don't because this is how aws keeps track of the versions so save changes unknown error oh this is not right let's try again all right so now it's done and now we're ready to create a code build to connect everything so i'm just going to type in code build open that into a new tab create a new project i'll just call it github s3 angular demo and then scroll down under source we're going to select github and if this is the first time that you're doing it you have to connect to github and then confirm and if your aws account has never connected to github before you may have to enter your passwords and stuff to authenticate so follow those steps and connect to it and then i'll select repo from my account and select the github repo that we just created i believe we call it github there you go right here and then source version i'll just enter master because that's our branch and then we can leave our configs as default and next on the webhook we're gonna check it here and then event type we're gonna choose push because we want it to build every time we push a change to it and then operating system we're going to choose ubudu runtime standard image just choose extender 5.0 image version yeah leave it as default and linux i'll just let it create a new service row for us and i believe everything else can be left as default and then lastly the logs i'll just enable cloudwatch and give it a group name as build and then stream name is github s3 angular demo and then create build project and then one last thing we need to do is give code build the permission to access our sd bucket so that you can delete and upload new contents to it and we're going to do that using an imrow which can be found under build details scroll down and service row so right click on it open that into a new tab under the base policy we're going to add the policy json and we're going to add a new statement to it i have it written down before so i'm just going to copy and paste it here but i'll include that in the link down below so you can have that as well i need to fix the quotes here and then we have to change the bucket name here so i'm just going to copy this is it and then we hit save save changes and right now let's go back to the s3 bucket now it's empty but if i post the changes to github the new content is going to appear here so if i go back to vs code let's change it to 1.1 updated version push and that's gonna trigger the code build let me go back to code build and now it's in progress we can click here view the entire log it will open the cloud watch for all the logs and the progress there's a delay it may take a while we can also look at the face details and you can see is doing the installing all right so everything's successful now the logs you can look at progress as well and right now if i go back to the sd bucket hit refresh nothing's here let's see what's wrong let's go back to vs code the builds back ah i have a typo here commands and that should do it so if i push this a new build is going to start it's in progress look at the face details all right so everything's successful right now let's go back to s3 and refresh let's do nothing unless it was wrong all right so the indentation is wrong it should match with here now it should work now let's go back go boot go back here now there should be a third one all right so everything is successful and now it looks more reasonable because it actually took time to build and upload that to s3 so right now if we go back to the s3 bucket refresh hey there you go we should see all the files in here and if we go to properties scroll all the way down click on this url we should be able to see our website and right now if i change the version number let's say to 2.0 it should be updated automatically now let's go back to code build it's going all right so everything is successful so right now if i go back to the website and hit refresh this is going to change to 2.2 i mean 2.0 and there you go it's updated and that is it everyone i hope you have learned something and if you like this video i hope you can give it a thumbs up and i'll see you in the next video

Channel: Felix Yu

Views: 1,855

Keywords: aws, s3, CI/CD, automatic deployment front end, github, codebuild, update file contents in s3, github action, github hook

Id: AMSdM2dj_eI

Length: 18min 40sec (1120 seconds)

Published: Fri Jan 29 2021