Serverless Web Application CloudFront, S3, API Gateway, Lambda & DynamoDB | CORS concept API Gateway

thank you hello everyone welcome to serverless learning plan today is the third and final part of our Series in this part we will integrate our front end and back end with API Gateway API Gateway is a service which serves API calls to your backend application as our front end is with basic HTML which needs to call backend Lambda to insert and view the data from dynamodb this is the reason we have used API Gateway now please check out my previous video of front end where we have set up the dynamic website with S3 and cloudfront also I have another video where we have set up our backend with Lambda and dynamodb please go through them if you want to have a full understanding of how things are integrated we will also test our overall application here in this video if you are new to this channel kindly like share subscribe give your comments in the comment section let me know in which area you need to learn more so let's go and build our whole serverless integration so in our last part here we are going to spin upon API Gateway and this API Gateway will integrate our front end this part and our backend this part and within this between two our back end and front end API Gateway decides so API Gateway is an API management tool that sits between a client and a collection of backend services and what it does it actually serves the request from backend to our client so again if you have not seen the two other videos of front-end and backend please go watch them in this learning series that is in their playlist already and you will be familiar that we have already set up our front end and our backend in our front end we have Cloud front distribution which is actually serving this website from S3 and in our backend we have two Lambda functions which is serving the dynamodb data one is for inserting the data and one is for showing the route today in this API Gateway we will call this two Lambda function so whenever user will request from this website to view the data API Gateway will call this get request Lambda function and whenever user will try to insert some data then API Gateway will call this insert employee Lambda function and it will insert the data into dynamotivator so let's go in our Management console and spin up this API Gateway and configure the Lambda and test the whole application there so here is my API Gateway console you can search with API Gateway and it will give you the same console if you click on this one it will you will come here so I have one API Gateway already there so let's not uh go inside of it this is for another project so I will create one API Gateway from scratch so for to create that I have clicked on this create API and here you can create lots of API Gateway like for HTTP request for websocket API for rest API and for rest API private so we can create this rest API which is very simple and we will be doing it with age optimized because we will be using a cloud form rest API private is kind of if you want your API Gateway to be in private in a VPC we will not do that uh we will go ahead with this rest API so to create that we have to click on build and then we will select rest and this is a new API and I will give my API name is employee so this is my API Gateway name and description I will not give anything and N type I will select as age optimized age optimized is because an age optimized API endpoint is uh based for geographical distribution distributed clients so API requests are routed to the nearest uh Cloud front point of presence and this is the default endpoint type for API gateways in rest apis so as we are using cloudfront uh here as we are using our Cloud front distribution in our static website or in our front end so we will make this as age optimized you can also select Regional no problem but I will do it with each optimized now I will click on this create API so when I click on this create API the my API Gateway is done so if you go into dashboard here so this is my API Gateway URL now here you can see that our domain name is inside Amazon aws.com so in API Gateway there is a concept called course so if you go to resources you will be able to see here enable course so we need the course uh enabled to be enabled uh why because of one reason so let me let me first tell you why we don't need that why we would not have needed that if we have done it in plain and simple S3 bucket so if we have done it in plain and simple S3 and S3 is calling this API Gateway without this Cloud front then it would have worked because S3 has a URL S3 is under Amazon ews.com domain uh I cannot show you here because I have disabled the static website hosting so S3 actually in Amazon S3 yeah Amazon aws.com in domain but in Cloud front Cloud front if we see here the distribution domain name uh the distribution domain name is cloudfront.net so what it is actually doing whenever user will be requesting via Cloud front cloudfront.net will try to access API Gateway dot Amazon aws.com here we have seen in our dashboard Amazon aws.com so cloudfront.net will try to invoke Amazon aws.com which is a cross origin reference so for that cross origin reference we always need to invoke or we need to enable this course we will do that so we will do it after we create the methods and then we will enable the chords so course is very much important so if you don't enable course in our in your API uh you cannot uh invoke your API Gateway from other Origins like from your localhost you are from your localhost uh if you are trying to access any kind of other API for testing and that API is not enabled course then you cannot even invoke your localhost that particular API from your localhost so this course is very important we need to enable this course so this is what I wanted to show you and also one more thing here is that this is one undefined that means my I have not I have not described the stage yet so the stage is undefined this is fine so what we can do here in this API Gateway uh so if you don't know what API Gateway is please let me know in the comment section maybe I can uh describe what API Gateway in a different video but in this video I assume that you already have an uh idea about what API Gateway is and how to use this one okay so in the API Gateway uh we go to actions and in the image if you see here we have created this API Gateway but we have not linked it to the Lambda functions so we have to link it so what we can do uh from the actions we have to click create method so we have to create method what method we have to create so we have to create two method one for get request and one for post request and for get request my Lambda is different for post request my Lambda is different so in the in this section I will select get and forget let me show here and forget I will select the integration type as Lambda function and then the Lambda region is EU Central one let me go back to the Lambda function and get employee and this get employee function is in Frankfurt Vision this is fine and for Lambda function if you just type in it will come here this is this is my Lambda function so whenever user will raise a get request it will go to this Lambda function to dynamodb to fetch the results fine now I will save it now it says that you are about to give API Gateway permission to invoke your Lambda functions this so this is fine so this is okay too so whenever I will click OK what it will do it will create a Lambda policy so if I go inside this Lambda get employee then configuration then permission we see here that resource based policy statement has been added and if we select view policy we see that Lambda invoke function policy has been added to this particular Lambda function from our API Gateway this is fine so this is the resource based policy that is added uh if and it is added automatically that's fine that's that's great now my get method is done now what is needed if you select if you see the architecture diagram here my gate method is done what we need is the post post method we go to again this API Gateway and from actions we create method and select host and from the post method if we select the stick then another Lambda function and if we type in insert this is coming as insert employee data so if we go back to function we see that insert employee data this one so this is my Lambda function and I click on save this is the same thing that API Gateway needs permission to invoke Lambda function this is a nice one let me show you before that in the permission section configuration permissions if you see here right now there is no resource list policy added as soon as I click on OK it is created and we see if we refresh this one we see that one API Gateway policy has been added that's fine now my get request and post request is done and my API Gateway is enabled or API Gateway has been set up what is the next step the next step is to deploy the API Gateway as long as you don't deploy the API Gateway it is not yet live so we have to create click deploy API and within that we have to select one deployment stage if you have already deployed your API Gateway previously it will show you the stage if not then we have to create one new stage I will give it a name as plot and other than that I don't give anything and I will deploy so my API Gateway is live right now so the last step is to enable the course if I go to resources these are the two methods that we have created gate and post and from the actions we just enable the course we click on enable course and everything as it is and we will select enable course and it will give me the information that while enabling course uh we have to add the soap what it will do it will create couple of header requests it will add couple of added requests for get and post methods and the course will be set up so this is fine so I will select yes replace the existing value and everything will be set up automatically so my course enable course is done you see here the invoke URL is this one and we have seen previously that uh in my API Gateway this part was uh unassigned or something like the undefined but now we see that the stage name is appeared so this is my API Gateway URL great now if we copy this one we go back to our script this is the script this is the Ajax script which will be called whenever the button will be clicked what we can do here before this one uh let us first go to our cloudfront distribution so let us first uh see the architecture diagram and see what we have done so far one by one okay before testing so we have our S3 bucket we go to S3 and this is our S3 bucket and here profile and script profile HTML and script.js is there and this S3 bucket is served by cloudfront distribution this is our cloudfront distribution this is currently disabled so what I will do I will enable this one so I have done the first uh video couple of days before so I have just disabled it uh then I will enable this one is it still deploying so our S3 bucket is there and S3 bucket is uh serving the traffic uh this cloud from this Cloud front and now we have to point from this S3 bucket to this API Gateway which we will do here then we have this Lambda 2 Lambda function what we go here and we see that we have this two Lambda function and this two Lambda function is pointing to one dynamodb if we go here we see that we have this dynamodivity table or adding transportation oh yeah I have selected this URL we go to our script and paste here this URL this is my API Gateway URL this is my script what we will do here is we will upload the script.js in our S3 bucket again we have to do that so we go back again in our S3 bucket this is profile.html fine this we are not changing anything but on script we have included the API Gateway so we have to upload the script dot JS again I will upload it so this is my script.js and I will just try to upload it now and this one is okay I will click on upload and I will close this one so my script.js is now updated if I just refresh this one I see that it is updated now so now it is fine and let's go back to cloudfront and see if it is deployed or not so it is still deploying so let's wait for a couple of minutes here so I see my uh this one is deployed now my cloudform distribution is deployed now so what we can expect is if we hit the cloudfront distribution it will serve the traffic from S3 bucket which will serve the data from dynamodb so one last check let's do if we have any data in dynamodb table or not let's explore table items and run the scan I see one item is there let's leave it out let's leave it out because we will first get this one and then we will insert it fine now where is my cloud front here is my cloud front I go inside this Cloud front I copy this one and then I open a browser and then paste this one enter this is my website and this website so let's go one by one I am the user I have requested the website so the cloudfront distribution serves the website from S3 so till now I am here I did not go to API gate till now I am here now if you see here there are two buttons save profile and view all employee profile if we go to script if we see here this is the get function view all profile and if I click on this get all profile it will call this API Gateway and this API Gateway in turn will call the Lambda and serve should serve this one from dynamodb let's see I will click on view all employees let's see so here is my data so my employee ID is zero zero one first name is Alex last name is Halt and employee age is 34. so if we go to dynamodb table we see here we have only one data employee ID is zero zero one employee age 34 first name LX last name Hall so we see this is fine so that means whenever user request this URL uh so user requested this URL it served the traffic from S3 and from S3 it went to this API Gateway and from API Gateway whenever we are clicking this gate employee it calls this Lambda function and Lambda got the data from dynamodb table and it showed the data now the similar way we will save some data into dynamodivity type so from employee ID let's give to employee name maybe ABC last name x y z and employee age may be 20. so or maybe a legal is right 22. okay so if I click if I click on Save profile it should go to this dynamodb table so let's see if we click on Save profile it showed me that profile saved and if we refresh this dynamodb table we see that another data has been added and this is the same data that we have added so what it happened uh user requested this site and it is served from S3 API Gateway whenever we clicked on insert employee it went to this Lambda function and inserted the data into diamond and right now if we again fetch this data we see two data as added so one is existing one and the other one is the one that we have added recently so this is very cool this is the this is a dynamic website that we have built we can we can uh enter uh more data if you want so three maybe another name uh whatever uh and the employee age may be 30 and save the profile and if it has selected that profile saved if we go to dynamodb table and we see that our profile has been saved we again list view all the employee and we see that our employees uh there if we just maybe delete one employee from database so we delete this uh employee from this database and we again check we select this view all employee and right now we are getting only two employee data because the third one is deleted so this is what I wanted to show you and this is what is all about the serverless application hosting so we have hosted a dynamic website uh which is kind of serving traffic from cloudfront distribution and the website is hosted into S3 bucket which is also serving traffic uh which is redirecting traffic from API Gateway to two Lambda function one is for post request and one is for get request and all the data we have saved into Central dynamodb everything is serverless and also we have enabled course uh to serve the traffic from Lambda function uh because uh or because the our API Gateway uh is in different domain rather than our Cloud front distribution so we have we have to enable a course so this is uh this is what uh this is what I wanted to show you in this particular tutorial in our whole serverless journey so in the end I hope you have enjoyed this video and learned the steps uh towards serverless again if you have not watched the first two videos kindly check them out from this playlist let me know if you face any difficulties in setting up the serverless website please like share and subscribe to this channel for more exciting content and comment your thoughts on this I will be back with another exciting video Until then take care and goodbye foreign [Music]

Channel: Beyond The Cloud

Views: 6,500

Keywords: aws, amazonwebservice, software, softwaredeveloper, cloud, cloudengineer, cloudcomputing, systemdesign, database, programming, fullstack, cloudsecurity, security, itindustry, beyondthecloud, awsautomation, systemsmanagerautomation, s3, s3security, awsdocuments, systemsmanagerdocuments, python, pythoncoding, yamlcoding, awsiam, json, awssam, serverless, sam, java, awssamwithjava, docker, container, awscodepipeline, CodePipeline, CodeBuild, s3lifecycle, transition, lifecyclerule, inspector, cloudfront, apigateway, lambda, dynamodb

Id: fYW-TQ9A2Lo

Length: 21min 6sec (1266 seconds)

Published: Wed Mar 29 2023