AWS - Serverless Web Application

> AWS (Amazon Web Services)

1 - About

Advertising

3 - Architecture

N Component Function Description
1 Amazon S3 Static Web Hosting Amazon S3 hosts static web resources including HTML, CSS, JavaScript, and image files which are loaded in the user's browser
2 Amazon Cognito User Management Amazon Cognito provides user management and authentication functions to secure the backend API
3 Amazon DynamoDB Serverless Backend Amazon DynamoDB provides a persistence layer where data can be stored by the API's Lambda function.
4 AWS Lambda and Amazon API Gateway RESTful API JavaScript executed in the browser sends and receives data from a public backend API built using Lambda and API Gateway.

4 - Steps

4.1 - Static Web Hosting

4.2 - Users Authentication

Creates a user pool ID and an app client ID, see Cognito - Javascript Identity Sdk (in the browser) and use:

  • PoolName: NameWildRydes
  • AppName: WildRydesWebApp

Implementation in the app:

  • The config.js file contains settings for the user pool ID, app client ID and Region.
js/config.js
window._config = {
    cognito: {
        userPoolId: 'eu-central-1_7l0D9CCvP', // PoolId e.g. us-east-2_uXboG5pAb
        userPoolClientId: '4rv21psdl35dsj3d1hhb5pug3p', // App clients Id e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'eu-central-1' // e.g. us-east-2
    },
    api: {
        invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};
Advertising

4.3 - Service backend

The backend are the functions that process a HTTP request.

The function is a Lambda Function with a IAM Role to give authorization to create data into the Database (Amazon DynamoDB) The Lambda function will be invoked each time an HTTP request is made.

The function will be invoked from the browser after having create an API with the Amazon API Gateway that links the Lambda function to an HTTP endpoint (URL + HTTP method).

The static website is turned into a dynamic web application by adding client-side JavaScript that makes AJAX calls to the exposed APIs.

4.3.1 - Create table

4.3.2 - IAM Role Creation

The IAM role needs to grants to the Lambda function permission to:

Create Role:

  • Create Role > Aws Service > Lambda > Next
  • Permissions > AWSLambdaBasicExecutionRole > Next
  • Create Role > RoleName

Selecting a role type automatically creates a trust policy for your role that allows AWS services to assume this role on your behalf. If you were creating this role using the CLI, AWS CloudFormation or another mechanism, you would specify a trust policy directly.

Role Policy:

  • Select Role > Add Inline Policy
    • Choose a Service > DynamoDb
    • Choose a action > PutItem
    • Choose a resources > Add the Table ARN
    • Next
  • Create Policy > Name: DynamoDBWriteAccess > Create
Advertising

4.3.3 - Lambda creation

  • Console > Services > Lambda > Create a function
    • Options: Author from scratch
    • Name: RequestUnicorn
    • Runtime: Node
    • Role: Use an existing role
    • Create
  • Scroll down to the Function code
  • Create a test
    • From the dropdown at the top of the page: Configure test events
    • Name: TestRequestEvent
    • Code:
testRequest.json
{
    "path": "/ride",
    "httpMethod": "POST",
    "headers": {
        "Accept": "*/*",
        "Authorization": "eyJraWQiOiJLTzRVMWZs",
        "content-type": "application/json; charset=UTF-8"
    },
    "queryStringParameters": null,
    "pathParameters": null,
    "requestContext": {
        "authorizer": {
            "claims": {
                "cognito:username": "the_username"
            }
        }
    },
    "body": "{\"PickupLocation\":{\"Latitude\":47.6174755835663,\"Longitude\":-122.28837066650185}}"
}
  • Click on the Test button. Response:
response.json
{
  "statusCode": 201,
  "body": "{\"RideId\":\"j09lHYJSAPWwS6k81qEg1Q\",\"Unicorn\":{\"Name\":\"Rocinante\",\"Color\":\"Yellow\",\"Gender\":\"Female\"},\"UnicornName\":\"Rocinante\",\"Eta\":\"30 seconds\",\"Rider\":\"the_username\"}",
  "headers": {
    "Access-Control-Allow-Origin": "*"
  }
}

AWS Lambda automatically creates a new log group per function in Amazon CloudWatch Logs and writes logs to it when your function is invoked.

To delete, go to CloudWatch > Logs > /aws/lambda/LAMBDA_NAME

4.3.4 - RESTful APIs

Amazon API Gateway exposes the Lambda function and secure it using the Amazon Cognito user pool.

Request Browser code is in the ride.js file. It uses jQuery's ajax() method to make the remote http request.

Create API

  • AWS Management Console> Services > API Gateway
  • Create new API
    • Name: WildRydes
    • Endpoint Type: Edge optimized. Edge optimized are best for public services being accessed from the Internet. Regional endpoints are typically used for APIs that are accessed primarily from within the same AWS Region
    • Create
  • Create a new Authorizer
    • Select the created API
    • Scroll Down to Authorizer
    • Create a new one
    • Select Incognito
    • Select the Region
    • Select the User pool
    • Token Source: Authorization
    • Create
  • Create a new resources
    • Select the created API
    • Scroll down to Resources
    • Actions > Create Resources
      • Name: ride
      • Enable API Gateway CORS: Yes
      • Create
  • Create a new HTTP method for the resources (ie HTTP request type: PUT, GET,…)
    • Select the created API
    • Scroll down to Resources
    • Select the Resources
    • Actions > Create a new Method
    • Select below the resources the POST method
    • Setup:
      • Integration Type: Lambda
      • Use Lambda Proxy integration: Check
      • Lambda function: RequestUnicorn or the ARN
  • Resources Authorization:
    • Select a resource
    • Choose the Method Request card.
    • Pencil closed to Authorization
    • Select the authorizer: ie the Cognito User Pool
    • Click the ok mark
  • Deploy API

Example:

js/config.js
window._config = {
    cognito: {
        userPoolId: 'eu-central-1_7l0D9CCvP', // PoolId e.g. us-east-2_uXboG5pAb
        userPoolClientId: '4rv21psdl35dsj3d1hhb5pug3p', // App clients Id e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'eu-central-1' // e.g. us-east-2
    },
    api: {
        invokeUrl: 'https://o2f6vh7cwf.execute-api.eu-central-1.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};

5 - Documentation / Reference

aws/serverless_web_app.txt · Last modified: 2019/04/16 09:27 by gerardnico