Hello everyone welcome to maste2teach step-by-step guide
in this video you learn serverless web applications in AWS
we'll use S3 DynamoDB API gateway and AWS lambda to make our site server
less I will try my best to explain step by step if you haven't subscribed to our
channel please click on the subscribe button and subscribe to our YouTube
channel what we are going to learn in this video we will host I static website
in the s3 bucket replaced the HTML form in the site using
the post method request sent to API gateway trigger the lambda function
using the API gateway store the data in dynamoDB
we have already hosted a website in S3 bucket in the last tutorial
lokanthali.com if you haven't gone through it please find the link in the
description below how to host the static website in S3
bucket in this session we are going to replace it with the form where it will
contain name email and message with the submit button
I had already made the form in the index file let's open in the Subline text
it's in the footer section scroll down
yeah here I have already made ready it consists of name email massage and submit button
and on click on the submit button it will call the show method which I have
already written at the end of the file here is the show method it will store the
name email and message in the variable and var API is equal to URL this is the
main thing that you need to understand on click on the submit buttons we are
going to submit the name email and message to DynamoDB from lambda which
will be trigger using API gateway so that the require URL will provide us by
the API gateway which we will learn in few minutes using the xmlhttprequest the
data will send let's check how it will look
name email message and submit button let's start open the AWS console page
let's check the S3 bucket first of all
here are lokanthali.com and www.lokanthali.com all files are uploaded in the lokanthali.com
let's see the static files
hare are all the files which we had uploaded in the last tutorial this is the index.html
file which we will replace after we generate the URL
now let's create a table in dynamoDB first of all open the console page and
search for dynamoDB
click and open it
click the create table button specify the table name we are
storing all the contact us info so let's create a contact us table
another we need to specify the partition key which will be behaved as a primary
key we have the only name email and message data this is only for demo so
let's put email ID as a primary key click the Create button
okay the contact us table is created for now there are empty items that we will
feel from our contact us section now moving forward let's create the
lambda function again open the console page and search
for the lambda click and open it there are zero
functions for now navigate to create function
Author from scratch okay
function name give the lambda function name that described the purpose of your
function lok_lambda_ function
as you can see there are different options for the runtime we are going
through the Python expand the choose or create role
here we need to assign the IAM role to the lambda function to have access to
DynamoDB and api gateway let's create a new role for it open the console page and
source for IAM click and open it
navigate to the role menu
click in the create a role here are common use cases select lambda and click next
Search for dynamoDB
let's sign full access another search for the API gateway
assign administrator role click Next tag leave it for now review
give a role name lok_lambda@role
description let's leave attaches for now this lambda role will have DynamoDB
full access and api getway administrator role click the create role
okay here is listed let's check inside here they are okay fine
let's move back to lambda click the use an existing role select the lambda role
which we have just created click creat function
here you can see the layer lambda function in the left API gateway
triggers the lambda and lambda function to store the data in dynamoDB now
let's move to API gateway which will trigger the lambda let's again open the
console page in the new tab
search for the API gateway click and open it
scroll down in the rest API section navigate to build button
rest protocol okay click new API give an API name lok_API
description not compulsory in point type regional fine click create API in the
resource section navigate to action from the drop down section click create the
resource provide the resource name we are creating for contact us section so let's
name as contactus don't forget to check and enable API get
cors click resources we are going to call this API using the
post method so let's add the method again navigate to action drop down and click
create method select the post method and click in the tick marks indicate type
integration type lambda function okay in lambda function type and choose the lambda
function and save it
okay from client method requests then integrates request to lambda functions
and again integrates response to method response and finally the client get
response here we need the URL to use this API gateway still we didn't get it
for that we need to deploy the API to get the required URL so navigate to the
action menu selecting the needed resources from the drop-down
clicking deploy api here in which stage would you like to
deploy the API news test Dev for now click deploy
okay here is in invoke url you can expand the Dev stage click in post here
is the require URL that you need to place in our code section copy the full
URL open the code
in API paste the URL and save the file moving back
now if we refresh the lambda page
the API gateway appears in the trigger section
here you can see API gateway triggers the lambda function and lambda function
store the data in the dynamo DB which we are going to do now is scroll down
the page here you can see the default Python code we
are going to place the Python code which will store the data in the DynamoDB
table I have already written the required codes I am just going to paste
it if you need the same code please find in the description section
in code here we need to specify the table name of the dynamoDB our table name in
dynamoDB is contact us give the table name here
we don't need to modify order here so save it
now the last job to do is upload the index.html file in the S3
bucket open the S3 bucket again let's remove the old index.html
files from here
okay now let's upload the new index file select the file
next assign public permission next
next upload
okay done let's check on the side refresh the page
okay here it comes let's close the local site
now its time to test it
not working let's check the console
it's blocked by the cors policy issues are related to the API gateway let's
solve this issue open the API gateway page navigate to the resources menu
from drop down option click enable cors clicking enable cors and replace
existing cors header yes now again deployed the API once again
the URL will be same so no need to replace the URL okay now let's test it
again
added record successfully okay nice let's check in the DynamoDB table refresh
the page
yes here is all input that we have submitted from the side
we upload the HTML forms in the S3 bucket
using the xmlhttprequest we send data to api gateway using URL generated from the
api gateway
API getway triggers to lambda function
using Python code the lambda function insert
the data in the DynamoDB tables in this way we can use the serverless
architecture in AWS using S3 API gateway lambda and dynamoDB table I hope
you learn from this video tutorial if you have any questions or comments please
make sure to leave a comments in the comment section below also please be
sure to LIKE this video and subscribe to my channel if you haven't already thank
you very much for watching check us out for more in IT tutorial and
guide on website master2teach.com we will see you again soon
bye
you