Serverless Web App with API and Microservices Design

Serverless Web App with API and Microservices Design

Overview

Note: need to have an AWS account to do this lab.

This lab is AWS tutorial: https://webapp.serverlessworkshops.io/6-postworkshop/

Create a serverless web app with AWS Amplify, Amazon Cognito, API Gateway, Lambda, DynamoDB:

  • Setup AWS Cloud9 IDE

  • Static Web Hosting with AWS Amplify

  • Configure Amazon Cognito for user management

  • Create AWS Lambda function and store data to DynamoDB

  • Expose the Lambda function via API Gateway as Restful API called by the static website

Application Architecture

Steps

  1. Setup AWS Cloud9 IDE

  2. Static Web Hosting with AWS Amplify

    Create git repository:

    Create git repository:

    Deploy the site with AWS Amplify Console:

    Static website generated:

  3. Configure Amazon Cognito for user management

    Initialize AWS Amplify CLI:

    Create an Amazon Cognito User Pool:

    User pool created:

    Create a User from the website:

    User Created in Cognito:

  4. Create AWS Lambda function and store data to DynamoDB

    Create DynamoDB table:

    Create Lambda function with an IAM role can write to dynamodb table:

    Change the lambda function name from index.mjs to index.js:

    Save the lambda function and Deploy:

  5. Expose the Lambda function via API Gateway as Restful API called by the static website

    Create a Rest API:

    Create a Cognito User Pool Authorizer:

Create the API resource ‘/ride’ and method ‘POST’ and select the ‘wirldRydes’ Cognito user pool authorizer then SAVE (don’t forget to save by clicking the checkmark icon):

Deploy to prod stage and note the URL for later use:

Update the src/config.js with the prod stage URL above:

Commit the change to repository:

When Amplify complete the deployment, test out the website: requested Seattle as the pickup location and the Golden unicorn arrived: