How Create A Serverless Website The Usage Of Aws Lambda, Aws S3, Aws Api Gateway And Aws Dynamodb With Node.js? Full Academic!

This put up will show you the way we are able to create an internet website online the use of AWS serverless architecture.

Architecture

The structure could appearance some thing like under:

Basic Architecture of my Serverless Web Application

The offerings and technology we are able to be the usage of to build this software are:

  • AWS Lambda

    • AWS Lambda is a compute carrier that lets you run code with out provisioning or handling servers.
  • AWS API Gateway

    • Amazon API Gateway is a completely managed carrier that makes it easy for builders to create, put up, preserve, display, and secure APIs at any scale.
  • AWS S3

    • AWS S3 is Object garage built to store and retrieve any amount of information from anywhere

  • AWS DynamoDB

    • Amazon DynamoDB is a fast and bendy nonrelational database carrier for all applications that want steady, single-digit millisecond latency at any scale.
  • AWS Route 53

    • For growing and registering a domain call for the web app.
  • AWS IAM

    • AWS IAM for growing users, roles and regulations.
  • HTML, CSS and JQuery

    • These are the customer aspect web frameworks
  • node.js 

    • node.js is the server aspect JavaScript framework.

About the Application

The application we are going to create includes an html internet web page which consists of 3 input fields – employee id, first call, closing name. it additionally has buttons – Save Profile and View a profile.

Steps to create the net app on a AWS serverless structure:

  • Create a  primary html, css internet web page layout.
  • Create a DynamoDB desk with columns- id, empid, firstname, lastname
  • Create IAM policy for lambda to benefit access to DynamoDB database and other resources
  • Create a Lambda characteristic to GET statistics from dynamodb desk
  • Create a Lambda feature to POST records into dynamodb desk
  • Create an API the use of API gateway
  • Create a GET API characteristic inner API gateway
  • Create a POST API functin interior API gateway
  • Create an S3 bucket
  • Upload all the web files inside the S3 bucket
  • Create a DynamoDB table with columns:empId, empFirstName, empLastName, empAge

    Go to DynamoDb and click on on Create desk and fill the information as proven below:

    Then Click on Create item and fill take a look at facts as proven underneath:

    Your DynamoDB desk could seem like below:

    Creating Our Lambda Functions – GET and POST Employee Details

    Go to AWS lambda carrier underneath compute section.

    Click on create feature

    Creating the getEmployeeProfile lambda feature

    Fill the info for you characteristic and add a role(Create a new position if you do now not have an existing one) as shown underneath and Click on Create feature:

    You will see the screen as proven under that the Lambda characteristic has been created effectively.

    index.js can be default node.js file, paste the subsequent code as show inside the document. The following code scans the DynamoDB file and presentations all the desk statistics.

    We have used experiment operation of DynamoDB table scan for node.js

    Find the under code for getEmployeeProfile.js here on my Github

    Below that configure the Environment Variables: Add TABLE_NAME as display underneath. So that lambda code knows which desk to for.

    Change the event handler call to index.getempprofile consistent with the source code as shown below thru crimson arrow.

    earlier than trying out the Lambda characteristic let us first configure the check occasion.

    Click at the dropdown as proven underneath and click on on Configure test occasion

    Add a check event, add an partition key i.e empId.

    “empId”: “*” approach get all rows of facts. Save the occasion and the characteristic.

    Click on Test. It will take a 2nd or so that you can get the information from DynamoDB table.

    The characteristic execution is a hit and shows the table records in JSON layout as shown in underneath photo.

    So our one lambda feature is prepared whose function is to get employee details from database.

    Let us create a POST function to publish information to the database:

    Creating the addEmployeeProfile lambda characteristic

    Add the details as finished earlier than.

    Add the node.js code for adding employee details to database. Use the code as shown under:

    we’ve got used Put Item Operation of DynamoDB

    Find the underneath code for getEmployeeProfile.js right here on my Github

    Configure the test event for this feature additionally.

    Test Run the feature.

    As shown in the above %, the feature is effectively performed.

    Now allow us to take a look at DynamoDb table if it is updated or now not.

    Yes, as you can see the desk has been updated with new values which have been surpassed from the check occasion of the lambda feature.

    Adding API Gateway as a trigger to Lambda function and Creating an API

    Going further we ought to create a RESTful API the use of API Gateway that can work with Lambda capabilities.

    For this we add API Gateway as a cause to each our lambda features: getEmployeeProfile and addEmployeeProfile

    After adding the trigger, Configure the trigger by using adding API call, security options etc as display underneath.

    Click on upload and your API will be created.

    As display above our API -(EmployeeProfile-API) is created.

    Click on the API hyperlink, It will redirect you to the API gateway provider in which you could edit and configure(add GET/POST methods) your API.

    As display beneath you may see your API console.

    Click on Actions and delete the default “ANY” useful resource.

    Then Create a GET technique and upload Lambda vicinity and feature the form as shown underneath.

    Click on create technique and underneath request-response blueprint can be shown:

    Similarly we’ve add API cause to our second Lambda function which addEmployeeProfile

    Add and configure the API details and finished earlier than.

    Configure the GET technique to feature version mapping template as display beneath

    now our API techniques-GET and POST are setup.

    We can continue to deploying our API.

    Select Deploy API from the dropdown.

    Enter details like Stage call and description.

    The invoke URL for prod stage will generated and you could send a GET and POST request to that URL.

    We can do the Method Test to check out GET and POST technique to verify if our API is operating exceptional.

    If you get any access mistakes you probable haven’t enabled CORS. Click on API dropdown in the dashboard and pick out Enable CORS.

    Test the POST technique also as shown underneath. skip the parameters within the Request Body.

    Once examined the POST method you can once more take a look at you DynamoDb table to affirm if the entirety is running  pleasant.

    Yes, So our API is ready.

    Adding HTML Code to create Web web page UI

    create a report named profile.html and add following code:

    Find the below code on my Github

    Add the following Script file: script.js

    File the below code for script.js on my Github

    Now your Web files are ready.

    Create an S3 bucket

    allow us to create an S3 bucket to host our static net documents.

    Go to S3 underneath storage carrier.

    Create a bucket and information and set other permissions as default.

    As display inside the above photograph, Click on upload.

    Select the html and js files and click on on add.

    After the files were uploaded, click at the each documents and click on “Make Public” to have them reachable over Internet.

    Click on the hyperlink to get entry to your Html web site over net.

    Now allow us to add details to the form and shop profile which inturns invokes Lambda API through AJAX name and API call Lambda event characteristic(addEmployeeProfile) which calls DynamoDB and adds records to the database desk.

    Ohk, in case you get an above blunders, then it means you haven’t executed CORS configuration to your bucket to get right of entry to the API.

    Add the underneath configuration for your bucket inside Permissions Tab.

    After including the CORS configuration, refresh your website url and add the info once more and click on Save profile.

    It will send a reaction as “Profile stored“. Actually it call the API and saves the statistics in DynamDb table.

    To affirm, visit the DynamoDB desk and refresh the desk.

    You will the brand new information added on your desk, as display in under photograph.

    Similarly, Click on “View all of the Employee Profile” button to view the all of the information present in DynamoDB desk.

    FInd all the code documents right here.

    So this was the stop of this Post. Share your feedback beneath.

    Hope you all found out some thing. 🙂

    Related Posts

    Leave a Reply

    Your email address will not be published. Required fields are marked *