Deploying Serverless Web Application on AWS: S3, API Gateway, Lambda, DynamoDB, and CloudFront

hey guys welcome to devops master we are back with another video in this video I'm going to show you serverless deployment of web application uh using AWS cloud provider so without wasting time let's get [Music] started serverless deployment serverless deployment is not actually serverless there is a server but that server is managed by Cloud providers it allows us to concentrate more on writing code rather than taking headache of creation infrastructure and managing that uh underlying infrastructure for better scalability Auto provisioning and management we use serverless deployment and most importantly for cost optimization how suppose if you deployed your application on E to instance and that instance has some specifications like CPU RAM and some amount of storage and this whole infrastructure is managed by you only assume traffic to your application is less for entire day and your application is not using its whole capacity still you need to pay for the entire server independent of its use time but in case of serverless deploy employment it is not like that you only pay for the compute time used by your application we are using AWS cloud provider for our application deployment uh let me tell you what is our project uh we are going to store our uh code files application code files in S3 bucket and using S3 bucket we are going to uh host our host our application web application using static web hosting and we are going to configure uh a static web hosting to the API Gateway and this API Gateway will trigger Lambda function uh functions when when it trigger get function it will take data from the it will retry uh data from Dynamo deit table and show to the user and user for uh posting data or uh storing data in Dynamo debit table API Gateway will trigger post and it will store the data in Dynamo DB table let me show you how it actually works this is our web application uh related to student data when we give details uh like student ID student name class and age and you click on Save student data uh that API Gateway will trigger get function get Lambda function and this data will be stored in Dynamo debit table when user click on views all student data API Gateway will trigger post Lambda function and that function will retrive data from Dynamo DB table and show it to the user this is our project and coming to prerequisites uh we need AWS account and I roll to the Lambda function for accessing Dynamo DB and I have divided this project in three parts and part one is like we will be creating Dynamo DB table and Lambda function uh we will be creating two Lambda functions one is for get one is for post and we are going to configure that with Dynamo dut table it will retry data from Dynam D table and uh store data in Dynamo divit Table after completing part one we will be uh going to do part two in part two uh we are going to create API to trigger Lambda function and we are going to host our application using S3 static web hosting after doing this there is a part three that is bonus watch video till the end and you will get one bonus so without wasting time let's do handson okay we will start with part one uh we will be creating Dynamo debut table in this uh just go to Amazon uh AWS console and if you don't know how to open Dynamo DB table just go to search and type there Dynamo DB you will get there I have already opened it so click on tables here you will find create table click on create table uh and just you need to give name for your table uh I'm giving name as student data and next is partition key uh partition key is like uh in Dynamo deit table we will refer our uh table values or data uh using one key particular key so using that key only we will retrive our data or uh we can uh place our data table so next coming to sort key sort key is like secondary key uh how to let me give you an example if in class two students having same name uh John John if you want to differentiate them you need secondary key like uh their age by using their age you will differentiate so we need uh partition key s key s key is optional if you want to give you can otherwise leave it next is uh table setting default settings all just that's it just click on create table and it will take some time for creation so till that uh yeah you can see uh creating still creating just go to Lambda here um we will create Lambda function click on create function uh we are going to create from scratch not using any blueprint or container image just uh give name as I will be naming it as uh get student data otherwise just get student and we will be using uh python 3.2 and uh default execution role you need to give role and I'm will be using role is as Lambda Dynamo D Ro just click on create function so our Lambda function is ready you can see yeah successfully created function get student uh it will be loading it will taking some time so uh I have uh if okay get student this is my Lambda function you can see it this is my Lambda function uh we need we need boto 3 uh for uh like configuring Dynamo DB or some it's like library and this is the function you can see it just copy this you can this code in my GitHub repo and come here just paste this here yeah and we need to deploy deployment is done if you go to table uh do refresh yeah table is ready student data and explore table items we don't have anything here so uh nothing is there come to Lambda function uh we will check here is it working or not let's test it we need to create test in this uh my test and uh here we will have some uh Json format key value uh if you want to pause it if you want to give anything you can give otherwise just save it when when we click on test now it will invoke that Lambda function this Lambda function will uh go to Dynamo table and try to get uh retrive data from table just click on test yeah response is empty list nothing is there so it gives empty list so come come to functions and one more function we need to create for posting data I I will be naming it as a insert student data and select python 3.12 and we need to change permissions uh use an existing role that's it just click on create function it will create one more function taking some little bit time for creation you successfully created and if you come to vs code here uh insert student data sorry I need to rename this so this is our uh Lambda function for uh posting data or we can say inserting data inside table so same here just we need to give student ID name class and age it will store in that just copy this and come to a s Lambda function and uh in code we need to paste here so this is pasted click on deploy we need to deploy first yeah successfully deployed still deploying Deo you need to create test okay uh my test then uh just copy these values contr C configure here come here so uh these are the values we are going to pass to our Lambda function uh student ID 1 name Sur Class A is 22 years old so just save it and click on test when this function need to uh like yeah uh student data saved successfully if you go to uh table and we do refresh we need to find that uh student data so you can see student ID 1 and age 22 Class A name Sur so this is it guys as you can see our Lambda functions creation is done and we have configured our Lambda functions to the Dynamo DB table and it is perfectly working so with this our uh part one of uh serverless deployment is completed uh coming to part two we'll be create we will be creating our API Gateway and S3 bucket uh this API gate we will trigger Lambda function to retri data and uh paste data in Dynamo debit table so after creating API uh we will be pasting our API endpoint in uh like our files uh in uh scripts.js file here you can see API endpoint we will paste that endpoint here and we will copy this uh this file and index. HTML file in S3 S3 bucket and using these files we will be hosting our website so first uh let's create API endpoint sorry first create API uh Gateway come to API Gateway uh if you don't don't know how to open just go to search and search here API you can see API Gateway I have already opened it uh come to apis next scroll down and click on rest API create and next is new API we will be creating new API API name I will be giving student and next coming to API endpoint type uh we will be selecting Edge optimize uh let me give you uh let me tell okay let me tell you the difference between uh Regional and Edge optimized uh Regional is like uh it will allow only uh users uh who are from uh this particular region which we are using in this case it's us is2 so if you select Regional it will allow users within this region only when we are using Edge optimized uh Edge optimiz is allow users from around the world so we can uh access from anywhere our website so I will be selecting Edge optimized create API so you can see successfully created uh next coming to we will need to create methods like get and post method uh click on create method select I will be creating get first uh next integration type is Lambda function uh region is us is to select Lambda function which we need to configure uh get student that's it uh click on create method it will create yeah successfully created method uh if you want to test this method uh you can if you want to test whether it is correctly configured or not uh just go to test and click on test you will get you will get data from Dynamo D table Yeah response it's working properly uh student ID name class H so it's done uh next we need to create one more method that is post method uh scroll down create create method uh method type is post and same Lambda function us is to this one is uh inserting student data next create method it will take some time they are [Music] done done uh next is uh we need to deploy our application if you want our application will available uh or work we need to deploy our API next stage is new stage name uh prodad you need to provide name for your deployment click on deploy done uh come to just okay scroll down here you will find invoke URL this URL will uh invoke our Lambda function you can say uh it will trigger our Lambda function if you come to Lambda functions here uh insert data not this get student you can see here one API is created uh which will trigger our get student Lambda function you can see here yeah API Gateway see it will trigger if you see configurations here one uh policy will be created you can see this will yeah get so this is forget uh just copy this and come to script.js and here paste it API endpoint so when we click on uh get student data uh it will invoke this URL it will go to get and Lambda function will be triggered and it will retry data from the Dynamo deit table so this is and next one is come to resources enable course uh select get and post and save so come to S3 bucket uh we need to create one bucket for our application uh I will be giving name as devops uh Master uh bucket next scroll down yeah that's it uh keep it as it is everything yeah click on create bucket it will create bucket for us done bucket is created uh click on bucket and we need to upload our files add files index and scripts open select it and yeah they are selected click on upload they will be uploaded it will take few seconds yeah one is done one is successful uh yeah you can see both are uploaded so done next come to properties if you uh go to bottom in properties you there you will find uh static static web hosting edit it it is uh disabled you need to enable it and next is stating website and we need to give docent index do do HTML that's it we are not giving any error yeah save it you will get one URL to access our website yeah you can see if you click on website you will find your website it's saying 43 forb access denied so you can see our bucket is not public it's private all public access is blocked if we go to permissions while creating a didn't given yeah we need to edit it yeah allow Public Access now save changes uh confirm it not only by just uh giving Public Access uh we will we can access our web application still it is access denied why because we need to give one policy bucket policy to get object so users can access our objects in inside the bucket which are present inside the bucket so policy just C we don't know policy if we don't know how to write policy or something just click on policy generator the AWS will generate and give to us S3 bucket policy select typ policy and allow everything start and get object everywhere everywhere or anywhere or something whatever next is get object yeah get object Arn we need to paste our bucket here and copy this and simply paste here and add statement generate policy yeah policy is ready uh garam garam policy just copy this and come here in policy paste and just edit this to allow every Star and that's it save changes done public policy is updated uh what you think if I refresh we will get our upsite or not let's do it done our application is deployed successfully so if I click on view all stent data it need to uh show us uh the data which is present in uh present here you can see this just let's try uh view all student data yeah you can see student ID Sur Class A is 22 years and like that only if we give one more uh student ID and name XY Z and class uh B and age is around 21 save okay yeah student data is saved if you come to tan DB and refresh here you can find yeah2 XYZ and if you click on all student data you can see XYZ Class B 21 year successful so our part two also uh you can see our part two also completed uh we have configured with our Lambda and we have hosted our web application using S3 static web hosting uh done part two also uh I told you guys uh I will give you one more uh bonus at the end so that is we are going to place uh Cloud front in front of our S3 bucket why because if you come to our website here it is not secure this is only HTP httpp method we will have one more htpp yes that is secure uh in this what happening our user who are accessing our websites is directly accessing our objects from the uh S3 bucket uh that means our uh bucket is exposed to public that is not good good practice to so to make secure we need Cloud front what we are doing we are going to give our website URL or we can say say uh our website objects uh to the cloud front and it will be secure it will give one DNS uh URL To Us by using that DNS we can access our uh website so let's do it uh that one let's go [Music] to okay I want to Let's uh come here and search uh Cloud front click on cloud front I will show you if we copy this this will if you copy this and come to uh some notepad or any open notepad uh you can see here this is HPP only means that is not secure if you use cloud front it will be hpps means it will be secure yeah C fun uh previously have used one just leave it create one New Blood front yeah choose domain uh it will automatically select our S3 bucket devop Master bucket next coming to uh original pa uh no need name it will take select origin access control settings and we need to we need to create one click on create done you must update the S3 bucket policy it's showing we need to update we need to give uh this policy to our S3 bucket so our so our cloudfront can access our S3 bucket uh objects next scroll down that's it yeah next scroll down scroll down and uh coming to default root object means which file we need to uh we need to give it we need to tell uh cloudfront uh so it can access uh our file index do index.html file directly we need to mention that sorry guys if I am feeling some little bit low like uh that's it uh click on create distribution uh do not enable security protection we don't need and create on distribution okay now just copy this policy and come to S3 bucket come to permissions now we need to make our S3 bucket private block all public access save changes uh confirm after this we need to change our policy uh which we have copied uh right now we need to change this click on edit uh we need to paste this your policy we need to paste this policy here then you can see uh Cloud fund Cloud Al cloudfront service principal so distribution so this is our cloudfront so it can access our S3 bucket save changes we come to Cloud front and scroll down domain you can see distribution domain if you copy this domain and come here paste it we will get our website can't be reached why because uh maybe it is still creating yeah still deploying guys after this deployment will complete uh we can access our website so guys after 5 minutes it's uh done now come to this URL if you refresh we can access our website yeah you can see website is running saved it's showing saved and view all student data yeah you can see so if you copy this URL and come to notepad uh paste here you can see this is https means it is more secure for security purpose uh we are using Cloud front so this is more secure guys uh by using Cloud font uh we are not going to give permission users to access our S3 bucket access uh bucket objects directly if you find this video informative please don't forget to like And subscribe our Channel and share with your friends who are trying to get an AWS uh Cloud domain so that is it guys uh we will meet in next video goodbye

Channel: DevOpsMaster

Views: 2,932

Keywords: aws, s3, APIGateway, serverless, serverless deployment, aws devops projects for resume, aws projects, aws cost optimization, lambda, dynamodb, aws tutorial, web development

Id: pK52mfm69i0

Length: 32min 20sec (1940 seconds)

Published: Mon Mar 18 2024